                    <!-- Introduction -->
                    <section id="introduction">
                        <h2>Introduction</h2>
                        <p data-lang="fr">
                            GitFlow est un modele de branchement Git qui definit une structure stricte pour gerer le developpement, les releases et les corrections de bugs. SmartStack CLI automatise entierement ce workflow avec des commandes intelligentes qui gerent le versioning, les migrations EF Core et les conflits.
                        </p>
                        <p data-lang="en">
                            GitFlow is a Git branching model that defines a strict structure for managing development, releases and bug fixes. SmartStack CLI fully automates this workflow with intelligent commands that handle versioning, EF Core migrations and conflicts.
                        </p>

                        <div class="alert alert-info">
                            <span class="alert-icon">&#128161;</span>
                            <div class="alert-content">
                                <h5 data-lang="fr">Pourquoi GitFlow ?</h5>
                                <h5 data-lang="en">Why GitFlow?</h5>
                                <p data-lang="fr">
                                    GitFlow est ideal pour les projets avec des cycles de release planifies, une equipe de plusieurs developpeurs, et un besoin de maintenir plusieurs versions en production.
                                </p>
                                <p data-lang="en">
                                    GitFlow is ideal for projects with planned release cycles, a team of multiple developers, and a need to maintain multiple versions in production.
                                </p>
                            </div>
                        </div>
                    </section>

                    <!-- Quick Start -->
                    <section id="quick-start">
                        <h2>Quick Start</h2>

                        <div class="alert alert-info">
                            <span class="alert-icon">&#128640;</span>
                            <div class="alert-content">
                                <h5 data-lang="fr">Commandes essentielles</h5>
                                <h5 data-lang="en">Essential Commands</h5>
                                <p data-lang="fr">Les commandes les plus utilisees pour demarrer rapidement.</p>
                                <p data-lang="en">The most commonly used commands to get started quickly.</p>
                            </div>
                        </div>

                        <div class="table-container">
                            <table>
                                <thead>
                                    <tr>
                                        <th>
                                            <span data-lang="fr">Action</span>
                                            <span data-lang="en">Action</span>
                                        </th>
                                        <th>
                                            <span data-lang="fr">Commande</span>
                                            <span data-lang="en">Command</span>
                                        </th>
                                        <th>
                                            <span data-lang="fr">Raccourci</span>
                                            <span data-lang="en">Shorthand</span>
                                        </th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>
                                            <span data-lang="fr">Demarrer feature</span>
                                            <span data-lang="en">Start feature</span>
                                        </td>
                                        <td><code>/gitflow start feature xxx</code></td>
                                        <td><code>/gitflow -f xxx</code></td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <span data-lang="fr">Demarrer release</span>
                                            <span data-lang="en">Start release</span>
                                        </td>
                                        <td><code>/gitflow start release 2.0.0</code></td>
                                        <td><code>/gitflow -r 2.0.0</code></td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <span data-lang="fr">Demarrer hotfix</span>
                                            <span data-lang="en">Start hotfix</span>
                                        </td>
                                        <td><code>/gitflow start hotfix xxx</code></td>
                                        <td><code>/gitflow -h xxx</code></td>
                                    </tr>
                                    <tr>
                                        <td>Commit</td>
                                        <td><code>/gitflow commit</code></td>
                                        <td><code>/gitflow -a commit "msg"</code></td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <span data-lang="fr">Creer PR</span>
                                            <span data-lang="en">Create PR</span>
                                        </td>
                                        <td><code>/gitflow pr</code></td>
                                        <td>-</td>
                                    </tr>
                                    <tr>
                                        <td>Merge</td>
                                        <td><code>/gitflow merge</code></td>
                                        <td>-</td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <span data-lang="fr">Finaliser</span>
                                            <span data-lang="en">Finish</span>
                                        </td>
                                        <td><code>/gitflow finish</code></td>
                                        <td>-</td>
                                    </tr>
                                    <tr>
                                        <td>Status</td>
                                        <td><code>/gitflow status</code></td>
                                        <td><code>/gitflow -s</code></td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>

                        <h3>
                            <span data-lang="fr">Flags disponibles</span>
                            <span data-lang="en">Available Flags</span>
                        </h3>

                        <div class="table-container">
                            <table>
                                <thead>
                                    <tr>
                                        <th>Flag</th>
                                        <th>Long</th>
                                        <th>Description</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td><code>-f</code></td>
                                        <td><code>--feature</code></td>
                                        <td>
                                            <span data-lang="fr">Workflow feature (cible: develop)</span>
                                            <span data-lang="en">Feature workflow (target: develop)</span>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td><code>-r</code></td>
                                        <td><code>--release</code></td>
                                        <td>
                                            <span data-lang="fr">Workflow release (cible: main, merge-back develop)</span>
                                            <span data-lang="en">Release workflow (target: main, merge-back develop)</span>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td><code>-h</code></td>
                                        <td><code>--hotfix</code></td>
                                        <td>
                                            <span data-lang="fr">Workflow hotfix (cible: main, merge-back develop)</span>
                                            <span data-lang="en">Hotfix workflow (target: main, merge-back develop)</span>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td><code>-a</code></td>
                                        <td><code>--auto</code></td>
                                        <td>
                                            <span data-lang="fr">Mode autonome: sauter les confirmations</span>
                                            <span data-lang="en">Autonomous mode: skip confirmations</span>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td><code>-s</code></td>
                                        <td><code>--status</code></td>
                                        <td>
                                            <span data-lang="fr">Mode status: afficher l'etat uniquement</span>
                                            <span data-lang="en">Status mode: show state only</span>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td><code>-v</code></td>
                                        <td><code>--verbose</code></td>
                                        <td>
                                            <span data-lang="fr">Sortie detaillee</span>
                                            <span data-lang="en">Verbose output</span>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td><code></code></td>
                                        <td><code>--dry-run</code></td>
                                        <td>
                                            <span data-lang="fr">Previsualiser sans executer</span>
                                            <span data-lang="en">Preview actions without executing</span>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </section>

                    <!-- Key Concepts -->
                    <section id="concepts">
                        <h2>
                            <span data-lang="fr">Concepts cles</span>
                            <span data-lang="en">Key Concepts</span>
                        </h2>

                        <h3>SemVer (Semantic Versioning)</h3>
                        <p data-lang="fr">
                            Le versioning semantique utilise le format <code>MAJOR.MINOR.PATCH</code> :
                        </p>
                        <p data-lang="en">
                            Semantic versioning uses the format <code>MAJOR.MINOR.PATCH</code>:
                        </p>

                        <div class="table-container">
                            <table>
                                <thead>
                                    <tr>
                                        <th>Type</th>
                                        <th>
                                        <span data-lang="fr">Quand incrementer</span>
                                        <span data-lang="en">When to increment</span>
                                    </th>
                                        <th>
                                        <span data-lang="fr">Exemple</span>
                                        <span data-lang="en">Example</span>
                                    </th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td><strong>MAJOR</strong></td>
                                        <td>
                                        <span data-lang="fr">Breaking changes, API incompatible</span>
                                        <span data-lang="en">Breaking changes, incompatible API</span>
                                    </td>
                                        <td>1.0.0 &#8594; 2.0.0</td>
                                    </tr>
                                    <tr>
                                        <td><strong>MINOR</strong></td>
                                        <td>
                                        <span data-lang="fr">Nouvelles fonctionnalites retrocompatibles</span>
                                        <span data-lang="en">New backwards-compatible features</span>
                                    </td>
                                        <td>1.0.0 &#8594; 1.1.0</td>
                                    </tr>
                                    <tr>
                                        <td><strong>PATCH</strong></td>
                                        <td>
                                        <span data-lang="fr">Corrections de bugs retrocompatibles</span>
                                        <span data-lang="en">Backwards-compatible bug fixes</span>
                                    </td>
                                        <td>1.0.0 &#8594; 1.0.1</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>

                        <h3 data-lang="fr">Strategie de merge</h3>
                        <h3 data-lang="en">Merge Strategy</h3>
                        <p data-lang="fr">
                            SmartStack CLI utilise <code>--no-ff</code> (no fast-forward) par defaut pour preserver l'historique des branches :
                        </p>
                        <p data-lang="en">
                            SmartStack CLI uses <code>--no-ff</code> (no fast-forward) by default to preserve branch history:
                        </p>

                        <div class="code-block">
                            <button class="copy-btn">Copy</button>
                            <pre><code># Avec --no-ff : cree un commit de merge
*   Merge branch 'feature/login' into develop
|\
| * Add login form
| * Add authentication logic
|/
*   Previous commit

# Sans --no-ff : historique lineaire (perd le contexte)
* Add authentication logic
* Add login form
* Previous commit</code></pre>
                        </div>
                    </section>

                    <!-- Branch Types -->
                    <section id="branches">
                        <h2>
                            <span data-lang="fr">Types de branches</span>
                            <span data-lang="en">Branch Types</span>
                        </h2>

                        <div class="card-grid">
                            <div class="card">
                                <div class="card-header">
                                    <div class="card-icon" style="background: var(--primary);">M</div>
                                    <div>
                                        <div class="card-title">main / master</div>
                                        <div class="card-subtitle">Production</div>
                                    </div>
                                </div>
                                <div class="card-body">
                                    <p data-lang="fr">
                                        Branche de production. Chaque commit represente une version deployee. Protegee contre les push directs.
                                    </p>
                                    <p data-lang="en">
                                        Production branch. Each commit represents a deployed version. Protected from direct pushes.
                                    </p>
                                    <span class="tag tag-workflow">Protected</span>
                                </div>
                            </div>

                            <div class="card">
                                <div class="card-header">
                                    <div class="card-icon" style="background: var(--secondary);">D</div>
                                    <div>
                                        <div class="card-title">develop</div>
                                        <div class="card-subtitle">Integration</div>
                                    </div>
                                </div>
                                <div class="card-body">
                                    <p data-lang="fr">
                                        Branche d'integration. Recoit les features terminees. Base pour les nouvelles features et releases.
                                    </p>
                                    <p data-lang="en">
                                        Integration branch. Receives completed features. Base for new features and releases.
                                    </p>
                                    <span class="tag tag-workflow">Protected</span>
                                </div>
                            </div>

                            <div class="card">
                                <div class="card-header">
                                    <div class="card-icon" style="background: var(--success);">F</div>
                                    <div>
                                        <div class="card-title">feature/*</div>
                                        <div class="card-subtitle" data-lang="fr">Nouvelles fonctionnalites</div>
                                        <div class="card-subtitle" data-lang="en">New features</div>
                                    </div>
                                </div>
                                <div class="card-body">
                                    <p data-lang="fr">
                                        Branches de developpement. Creees depuis develop, mergees dans develop. Increment MINOR automatique.
                                    </p>
                                    <p data-lang="en">
                                        Development branches. Created from develop, merged into develop. Automatic MINOR increment.
                                    </p>
                                    <span class="tag tag-command">+minor</span>
                                </div>
                            </div>

                            <div class="card">
                                <div class="card-header">
                                    <div class="card-icon" style="background: var(--warning);">R</div>
                                    <div>
                                        <div class="card-title">release/*</div>
                                        <div class="card-subtitle" data-lang="fr">Preparation de release</div>
                                        <div class="card-subtitle" data-lang="en">Release preparation</div>
                                    </div>
                                </div>
                                <div class="card-body">
                                    <p data-lang="fr">
                                        Preparation d'une nouvelle version. Creee depuis develop, mergee dans main ET develop. Tag cree automatiquement.
                                    </p>
                                    <p data-lang="en">
                                        Preparation of a new version. Created from develop, merged into main AND develop. Tag created automatically.
                                    </p>
                                    <span class="tag tag-workflow">+tag</span>
                                </div>
                            </div>

                            <div class="card">
                                <div class="card-header">
                                    <div class="card-icon" style="background: var(--danger);">H</div>
                                    <div>
                                        <div class="card-title">hotfix/*</div>
                                        <div class="card-subtitle" data-lang="fr">Corrections urgentes</div>
                                        <div class="card-subtitle" data-lang="en">Urgent fixes</div>
                                    </div>
                                </div>
                                <div class="card-body">
                                    <p data-lang="fr">
                                        Corrections critiques en production. Creee depuis main, mergee dans main ET develop. Increment PATCH automatique.
                                    </p>
                                    <p data-lang="en">
                                        Critical production fixes. Created from main, merged into main AND develop. Automatic PATCH increment.
                                    </p>
                                    <span class="tag tag-command">+patch</span>
                                </div>
                            </div>
                        </div>

                        <!-- GitFlow Diagram -->
                        <h3 data-lang="fr">Schema du workflow</h3>
                        <h3 data-lang="en">Workflow Diagram</h3>

                        <div class="svg-diagram" id="gitflow-diagram">
                            <!-- Tooltip for interactive elements -->
                            <div class="diagram-tooltip" id="diagram-tooltip">
                                <div class="tooltip-title"></div>
                                <div class="tooltip-desc"></div>
                                <div class="tooltip-cmd"></div>
                            </div>

                            <svg viewBox="0 0 900 320" xmlns="http://www.w3.org/2000/svg" style="font-family: 'Inter', system-ui, sans-serif; width: 100%; max-width: 1800px; height: auto; display: block; margin: 0 auto;">
                                <!-- Definitions -->
                                <defs>
                                    <marker id="arrow" markerWidth="10" markerHeight="10" refX="9" refY="3" orient="auto" markerUnits="strokeWidth">
                                        <path d="M0,0 L0,6 L9,3 z" fill="#94a3b8"/>
                                    </marker>
                                    <filter id="glow">
                                        <feGaussianBlur stdDeviation="2" result="coloredBlur"/>
                                        <feMerge>
                                            <feMergeNode in="coloredBlur"/>
                                            <feMergeNode in="SourceGraphic"/>
                                        </feMerge>
                                    </filter>
                                    <!-- Highlight filter for hover/click -->
                                    <filter id="highlight">
                                        <feGaussianBlur stdDeviation="3" result="blur"/>
                                        <feMerge>
                                            <feMergeNode in="blur"/>
                                            <feMergeNode in="SourceGraphic"/>
                                        </feMerge>
                                    </filter>
                                </defs>

                                <!-- INTERACTIVE: Main branch -->
                                <g class="clickable-element" data-element="branch-main"
                                   data-title-fr="Branche main (production)"
                                   data-title-en="Main branch (production)"
                                   data-desc-fr="Branche protegee contenant le code en production. Chaque commit represente une version deployee. Jamais de push direct - uniquement via release ou hotfix."
                                   data-desc-en="Protected branch containing production code. Each commit represents a deployed version. Never push directly - only via release or hotfix."
                                   data-cmd="/gitflow status">
                                    <text x="30" y="55" fill="#ef4444" font-weight="600" font-size="14">main</text>
                                    <line x1="100" y1="50" x2="850" y2="50" stroke="#ef4444" stroke-width="3" stroke-linecap="round"/>
                                    <!-- Invisible hit area -->
                                    <rect x="25" y="35" width="830" height="30" fill="transparent" class="hit-area"/>
                                </g>

                                <!-- INTERACTIVE: Develop branch -->
                                <g class="clickable-element" data-element="branch-develop"
                                   data-title-fr="Branche develop (integration)"
                                   data-title-en="Develop branch (integration)"
                                   data-desc-fr="Branche d'integration recevant toutes les features terminees. Base pour les nouvelles features et releases. Doit toujours etre stable."
                                   data-desc-en="Integration branch receiving all completed features. Base for new features and releases. Must always be stable."
                                   data-cmd="/gitflow status">
                                    <text x="30" y="175" fill="#f97316" font-weight="600" font-size="14">develop</text>
                                    <line x1="100" y1="170" x2="850" y2="170" stroke="#f97316" stroke-width="3" stroke-linecap="round"/>
                                    <rect x="25" y="155" width="830" height="30" fill="transparent" class="hit-area"/>
                                </g>

                                <!-- INTERACTIVE: Release branch label -->
                                <g class="clickable-element" data-element="branch-release-label"
                                   data-title-fr="Ligne release"
                                   data-title-en="Release line"
                                   data-desc-fr="Zone de preparation des releases avant deploiement. Permet de finaliser une version sans bloquer le developpement."
                                   data-desc-en="Release preparation zone before deployment. Allows finalizing a version without blocking development."
                                   data-cmd="/gitflow start release">
                                    <text x="30" y="115" fill="#eab308" font-weight="600" font-size="14">release</text>
                                    <rect x="25" y="100" width="60" height="25" fill="transparent" class="hit-area"/>
                                </g>

                                <!-- INTERACTIVE: Feature branch label -->
                                <g class="clickable-element" data-element="branch-feature-label"
                                   data-title-fr="Ligne feature"
                                   data-title-en="Feature line"
                                   data-desc-fr="Zone de developpement des nouvelles fonctionnalites. Chaque feature a sa branche creee depuis develop."
                                   data-desc-en="Development zone for new features. Each feature has its branch created from develop."
                                   data-cmd="/gitflow start feature {nom}">
                                    <text x="30" y="235" fill="#22c55e" font-weight="600" font-size="14">feature</text>
                                    <rect x="25" y="220" width="60" height="25" fill="transparent" class="hit-area"/>
                                </g>

                                <!-- INTERACTIVE: Hotfix branch label -->
                                <g class="clickable-element" data-element="branch-hotfix-label"
                                   data-title-fr="Ligne hotfix"
                                   data-title-en="Hotfix line"
                                   data-desc-fr="Zone pour les corrections urgentes en production. Creee depuis main, mergee dans main ET develop."
                                   data-desc-en="Zone for urgent production fixes. Created from main, merged into main AND develop."
                                   data-cmd="/gitflow start hotfix {nom}">
                                    <text x="30" y="295" fill="#ec4899" font-weight="600" font-size="14">hotfix</text>
                                    <rect x="25" y="280" width="60" height="25" fill="transparent" class="hit-area"/>
                                </g>

                                <!-- INTERACTIVE: Feature A branch -->
                                <g class="clickable-element" data-element="feature-a"
                                   data-title-fr="Feature A"
                                   data-title-en="Feature A"
                                   data-desc-fr="Branche de developpement d'une fonctionnalite. Contient plusieurs commits de travail avant d'etre mergee dans develop."
                                   data-desc-en="Feature development branch. Contains multiple work commits before being merged into develop."
                                   data-cmd="/gitflow start feature {nom}">
                                    <path d="M 200 170 Q 200 210 230 230 L 330 230 Q 360 210 360 170" stroke="#22c55e" stroke-width="3" fill="none" stroke-linecap="round"/>
                                    <text x="260" y="260" fill="#94a3b8" font-size="11">feature/a</text>
                                    <circle cx="260" cy="230" r="6" fill="#22c55e"/>
                                    <circle cx="300" cy="230" r="6" fill="#22c55e"/>
                                    <rect x="195" y="165" width="175" height="100" fill="transparent" class="hit-area"/>
                                </g>

                                <!-- INTERACTIVE: Feature B branch -->
                                <g class="clickable-element" data-element="feature-b"
                                   data-title-fr="Feature B"
                                   data-title-en="Feature B"
                                   data-desc-fr="Deuxieme feature en parallele. Les features peuvent etre developpees simultanement par differents developpeurs sans conflit."
                                   data-desc-en="Second feature in parallel. Features can be developed simultaneously by different developers without conflict."
                                   data-cmd="/gitflow start feature {nom}">
                                    <path d="M 420 170 Q 420 210 450 230 L 550 230 Q 580 210 580 170" stroke="#22c55e" stroke-width="3" fill="none" stroke-linecap="round"/>
                                    <text x="480" y="260" fill="#94a3b8" font-size="11">feature/b</text>
                                    <circle cx="480" cy="230" r="6" fill="#22c55e"/>
                                    <circle cx="520" cy="230" r="6" fill="#22c55e"/>
                                    <rect x="415" y="165" width="175" height="100" fill="transparent" class="hit-area"/>
                                </g>

                                <!-- INTERACTIVE: Release branch -->
                                <g class="clickable-element" data-element="release-branch"
                                   data-title-fr="Branche release/v1.0"
                                   data-title-en="Release branch v1.0"
                                   data-desc-fr="Preparation de la version 1.0. Permet les derniers ajustements (bugfix, doc) avant deploiement en production."
                                   data-desc-en="Preparation of version 1.0. Allows final adjustments (bugfix, docs) before production deployment."
                                   data-cmd="/gitflow start release">
                                    <path d="M 400 170 Q 400 140 430 110 L 550 110 Q 570 80 600 50" stroke="#eab308" stroke-width="3" fill="none" stroke-linecap="round"/>
                                    <text x="470" y="95" fill="#94a3b8" font-size="11">release/v1.0</text>
                                    <circle cx="500" cy="110" r="6" fill="#eab308"/>
                                    <rect x="395" y="45" width="215" height="135" fill="transparent" class="hit-area"/>
                                </g>

                                <!-- INTERACTIVE: Release merge back (dashed line) -->
                                <g class="clickable-element" data-element="release-mergeback"
                                   data-title-fr="Merge back release → develop"
                                   data-title-en="Merge back release → develop"
                                   data-desc-fr="Synchronisation de la release vers develop. Apres merge dans main, les changements doivent aussi aller dans develop."
                                   data-desc-en="Sync release to develop. After merging into main, changes must also go into develop."
                                   data-cmd="/gitflow finish">
                                    <path d="M 600 50 L 600 170" stroke="#eab308" stroke-width="2" stroke-dasharray="5,5" fill="none"/>
                                    <rect x="590" y="45" width="20" height="130" fill="transparent" class="hit-area"/>
                                </g>

                                <!-- INTERACTIVE: Hotfix branch -->
                                <g class="clickable-element" data-element="hotfix-branch"
                                   data-title-fr="Branche hotfix/bug"
                                   data-title-en="Hotfix branch bug"
                                   data-desc-fr="Correction urgente d'un bug en production. Increment automatique du PATCH (1.0.0 → 1.0.1)."
                                   data-desc-en="Urgent fix for a production bug. Automatic PATCH increment (1.0.0 → 1.0.1)."
                                   data-cmd="/gitflow start hotfix {nom}">
                                    <path d="M 700 50 Q 700 170 720 290 L 780 290 Q 800 170 800 50" stroke="#ec4899" stroke-width="3" fill="none" stroke-linecap="round"/>
                                    <text x="720" y="310" fill="#94a3b8" font-size="11">hotfix/bug</text>
                                    <circle cx="750" cy="290" r="6" fill="#ec4899"/>
                                    <rect x="695" y="45" width="115" height="275" fill="transparent" class="hit-area"/>
                                </g>

                                <!-- INTERACTIVE: Hotfix merge back (dashed line) -->
                                <g class="clickable-element" data-element="hotfix-mergeback"
                                   data-title-fr="Merge back hotfix → develop"
                                   data-title-en="Merge back hotfix → develop"
                                   data-desc-fr="Synchronisation du hotfix vers develop. CRITIQUE pour eviter de regresser dans les futures versions."
                                   data-desc-en="Sync hotfix to develop. CRITICAL to avoid regression in future versions."
                                   data-cmd="/gitflow finish">
                                    <path d="M 780 290 L 820 170" stroke="#ec4899" stroke-width="2" stroke-dasharray="4,3"/>
                                    <rect x="775" y="165" width="55" height="135" fill="transparent" class="hit-area"/>
                                </g>

                                <!-- INTERACTIVE: Commit on main -->
                                <g class="clickable-element" data-element="commit-main"
                                   data-title-fr="Commit sur main"
                                   data-title-en="Commit on main"
                                   data-desc-fr="Commit sur main. Les commits viennent uniquement des merges de release ou hotfix, jamais de push direct."
                                   data-desc-en="Commit on main. Commits only come from release or hotfix merges, never from direct push."
                                   data-cmd="/gitflow commit">
                                    <circle cx="150" cy="50" r="8" fill="#ef4444" filter="url(#glow)"/>
                                    <rect x="140" y="38" width="20" height="24" fill="transparent" class="hit-area"/>
                                </g>

                                <!-- INTERACTIVE: Release merge commit on main -->
                                <g class="clickable-element" data-element="merge-release-main"
                                   data-title-fr="Merge release → main"
                                   data-title-en="Merge release → main"
                                   data-desc-fr="Commit de merge de la release dans main. La bordure jaune = source release. Tag v1.0 cree automatiquement."
                                   data-desc-en="Release merge commit into main. Yellow border = release source. Tag v1.0 automatically created."
                                   data-cmd="/gitflow finish">
                                    <circle cx="600" cy="50" r="10" fill="#ef4444" stroke="#eab308" stroke-width="3" filter="url(#glow)"/>
                                    <rect x="588" y="38" width="24" height="24" fill="transparent" class="hit-area"/>
                                </g>

                                <!-- INTERACTIVE: Hotfix merge commit on main -->
                                <g class="clickable-element" data-element="merge-hotfix-main"
                                   data-title-fr="Merge hotfix → main"
                                   data-title-en="Merge hotfix → main"
                                   data-desc-fr="Commit de merge du hotfix dans main. La bordure rose = source hotfix. Tag v1.0.1 (patch) cree automatiquement."
                                   data-desc-en="Hotfix merge commit into main. Pink border = hotfix source. Tag v1.0.1 (patch) automatically created."
                                   data-cmd="/gitflow finish">
                                    <circle cx="800" cy="50" r="10" fill="#ef4444" stroke="#ec4899" stroke-width="3" filter="url(#glow)"/>
                                    <rect x="788" y="38" width="24" height="24" fill="transparent" class="hit-area"/>
                                </g>

                                <!-- INTERACTIVE: Tag v1.0 -->
                                <g class="clickable-element" data-element="tag-v1"
                                   data-title-fr="Tag v1.0"
                                   data-title-en="Tag v1.0"
                                   data-desc-fr="Tag Git marquant cette version en production. Cree automatiquement lors du finish. Format: v{MAJOR}.{MINOR}.{PATCH}"
                                   data-desc-en="Git tag marking this version in production. Automatically created on finish. Format: v{MAJOR}.{MINOR}.{PATCH}"
                                   data-cmd="/gitflow finish">
                                    <g transform="translate(600, 20)">
                                        <rect x="-20" y="-12" width="40" height="18" rx="4" fill="#eab308"/>
                                        <text x="0" y="2" fill="#0f172a" font-size="10" font-weight="600" text-anchor="middle">v1.0</text>
                                    </g>
                                    <rect x="578" y="5" width="44" height="22" fill="transparent" class="hit-area"/>
                                </g>

                                <!-- INTERACTIVE: Tag v1.0.1 -->
                                <g class="clickable-element" data-element="tag-v101"
                                   data-title-fr="Tag v1.0.1 (patch)"
                                   data-title-en="Tag v1.0.1 (patch)"
                                   data-desc-fr="Tag de version patch cree par le hotfix. Increment automatique: 1.0.0 → 1.0.1. Correction sans nouvelles features."
                                   data-desc-en="Patch version tag created by hotfix. Automatic increment: 1.0.0 → 1.0.1. Fix without new features."
                                   data-cmd="/gitflow finish">
                                    <g transform="translate(800, 20)">
                                        <rect x="-24" y="-12" width="48" height="18" rx="4" fill="#ec4899"/>
                                        <text x="0" y="2" fill="#0f172a" font-size="10" font-weight="600" text-anchor="middle">v1.0.1</text>
                                    </g>
                                    <rect x="774" y="5" width="52" height="22" fill="transparent" class="hit-area"/>
                                </g>

                                <!-- INTERACTIVE: Merge commit feature A on develop -->
                                <g class="clickable-element" data-element="merge-feature-a"
                                   data-title-fr="Merge feature/a → develop"
                                   data-title-en="Merge feature/a → develop"
                                   data-desc-fr="Commit de merge de la feature A dans develop. La bordure verte = merge de feature."
                                   data-desc-en="Feature A merge commit into develop. Green border = feature merge."
                                   data-cmd="/gitflow merge">
                                    <circle cx="360" cy="170" r="8" fill="#f97316" stroke="#22c55e" stroke-width="2"/>
                                    <rect x="350" y="160" width="20" height="20" fill="transparent" class="hit-area"/>
                                </g>

                                <!-- INTERACTIVE: Merge commit feature B on develop -->
                                <g class="clickable-element" data-element="merge-feature-b"
                                   data-title-fr="Merge feature/b → develop"
                                   data-title-en="Merge feature/b → develop"
                                   data-desc-fr="Commit de merge de la feature B dans develop. Plusieurs features peuvent etre mergees independamment."
                                   data-desc-en="Feature B merge commit into develop. Multiple features can be merged independently."
                                   data-cmd="/gitflow merge">
                                    <circle cx="580" cy="170" r="8" fill="#f97316" stroke="#22c55e" stroke-width="2"/>
                                    <rect x="570" y="160" width="20" height="20" fill="transparent" class="hit-area"/>
                                </g>

                                <!-- INTERACTIVE: Release merge back on develop -->
                                <g class="clickable-element" data-element="merge-release-develop"
                                   data-title-fr="Merge back release → develop"
                                   data-title-en="Merge back release → develop"
                                   data-desc-fr="Commit de synchronisation de la release vers develop. Les bugfix sont integres dans develop."
                                   data-desc-en="Release sync commit to develop. Bugfixes are integrated into develop."
                                   data-cmd="/gitflow finish">
                                    <circle cx="600" cy="170" r="8" fill="#f97316" stroke="#eab308" stroke-width="2"/>
                                    <rect x="590" y="160" width="20" height="20" fill="transparent" class="hit-area"/>
                                </g>

                                <!-- INTERACTIVE: Hotfix merge back on develop -->
                                <g class="clickable-element" data-element="merge-hotfix-develop"
                                   data-title-fr="Merge back hotfix → develop"
                                   data-title-en="Merge back hotfix → develop"
                                   data-desc-fr="Commit de synchronisation du hotfix vers develop. ESSENTIEL pour eviter regression."
                                   data-desc-en="Hotfix sync commit to develop. ESSENTIAL to avoid regression."
                                   data-cmd="/gitflow finish">
                                    <circle cx="820" cy="170" r="8" fill="#f97316" stroke="#ec4899" stroke-width="2"/>
                                    <rect x="810" y="160" width="20" height="20" fill="transparent" class="hit-area"/>
                                </g>

                                <!-- Regular commits on develop (non-interactive) -->
                                <circle cx="150" cy="170" r="8" fill="#f97316"/>
                                <circle cx="200" cy="170" r="6" fill="#f97316"/>
                                <circle cx="400" cy="170" r="6" fill="#f97316"/>

                                <!-- INTERACTIVE: Merge arrows -->
                                <g class="clickable-element" data-element="merge-arrow"
                                   data-title-fr="Fleche de merge"
                                   data-title-en="Merge arrow"
                                   data-desc-fr="Direction du merge: de la feature vers develop. Utilise --no-ff pour preserver l'historique."
                                   data-desc-en="Merge direction: from feature to develop. Uses --no-ff to preserve history."
                                   data-cmd="/gitflow merge">
                                    <path d="M 360 230 L 360 178" stroke="#22c55e" stroke-width="2" marker-end="url(#arrow)"/>
                                    <path d="M 580 230 L 580 178" stroke="#22c55e" stroke-width="2" marker-end="url(#arrow)"/>
                                    <rect x="355" y="175" width="10" height="60" fill="transparent" class="hit-area"/>
                                    <rect x="575" y="175" width="10" height="60" fill="transparent" class="hit-area"/>
                                </g>
                            </svg>
                            <p class="diagram-hint">
                                <span data-lang="fr">💡 Cliquez sur n'importe quel element du schema pour voir sa definition et la commande associee.</span>
                                <span data-lang="en">💡 Click on any element in the diagram to see its definition and associated command.</span>
                            </p>
                        </div>

                        <!-- Legend: Branch Colors -->
                        <h4 data-lang="fr">Legende - Branches</h4>
                        <h4 data-lang="en">Legend - Branches</h4>
                        <div class="diagram-legend">
                            <div class="legend-item">
                                <span class="legend-color main"></span>
                                <span>main (production)</span>
                            </div>
                            <div class="legend-item">
                                <span class="legend-color develop"></span>
                                <span>develop (integration)</span>
                            </div>
                            <div class="legend-item">
                                <span class="legend-color feature"></span>
                                <span>feature/*</span>
                            </div>
                            <div class="legend-item">
                                <span class="legend-color release"></span>
                                <span>release/*</span>
                            </div>
                            <div class="legend-item">
                                <span class="legend-color hotfix"></span>
                                <span>hotfix/*</span>
                            </div>
                        </div>

                        <!-- Legend: Visual Elements -->
                        <h4 data-lang="fr">Legende - Elements visuels</h4>
                        <h4 data-lang="en">Legend - Visual Elements</h4>
                        <div class="table-container">
                            <table class="legend-table">
                                <thead>
                                    <tr>
                                        <th style="width:60px;">
                                            <span data-lang="fr">Visuel</span>
                                            <span data-lang="en">Visual</span>
                                        </th>
                                        <th>
                                            <span data-lang="fr">Nom</span>
                                            <span data-lang="en">Name</span>
                                        </th>
                                        <th>
                                            <span data-lang="fr">Signification</span>
                                            <span data-lang="en">Meaning</span>
                                        </th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td style="text-align:center;"><span style="display:inline-block;width:40px;height:3px;background:#22c55e;vertical-align:middle;"></span></td>
                                        <td>
                                            <span data-lang="fr">Ligne pleine</span>
                                            <span data-lang="en">Solid line</span>
                                        </td>
                                        <td>
                                            <span data-lang="fr">Branche active - flux principal de developpement</span>
                                            <span data-lang="en">Active branch - main development flow</span>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td style="text-align:center;"><span style="display:inline-block;width:40px;height:2px;background:repeating-linear-gradient(90deg,#ec4899 0,#ec4899 4px,transparent 4px,transparent 7px);vertical-align:middle;"></span></td>
                                        <td>
                                            <span data-lang="fr">Ligne pointillee</span>
                                            <span data-lang="en">Dashed line</span>
                                        </td>
                                        <td>
                                            <span data-lang="fr"><strong>Merge back</strong> - synchronisation vers develop apres merge dans main</span>
                                            <span data-lang="en"><strong>Merge back</strong> - sync to develop after merging into main</span>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td style="text-align:center;"><span style="display:inline-block;width:12px;height:12px;border-radius:50%;background:#f97316;vertical-align:middle;"></span></td>
                                        <td>
                                            <span data-lang="fr">Cercle plein</span>
                                            <span data-lang="en">Solid circle</span>
                                        </td>
                                        <td>
                                            <span data-lang="fr">Commit standard sur la branche</span>
                                            <span data-lang="en">Standard commit on the branch</span>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td style="text-align:center;"><span style="display:inline-block;width:14px;height:14px;border-radius:50%;background:#f97316;border:2px solid #22c55e;vertical-align:middle;"></span></td>
                                        <td>
                                            <span data-lang="fr">Cercle avec bordure</span>
                                            <span data-lang="en">Circle with border</span>
                                        </td>
                                        <td>
                                            <span data-lang="fr"><strong>Commit de merge</strong> - integration d'une branche (couleur bordure = source)</span>
                                            <span data-lang="en"><strong>Merge commit</strong> - branch integration (border color = source)</span>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td style="text-align:center;"><span style="display:inline-block;padding:2px 6px;background:#eab308;border-radius:4px;font-size:10px;color:#0f172a;font-weight:600;">v1.0</span></td>
                                        <td>
                                            <span data-lang="fr">Tag de version</span>
                                            <span data-lang="en">Version tag</span>
                                        </td>
                                        <td>
                                            <span data-lang="fr">Version deployee en production (cree lors du finish)</span>
                                            <span data-lang="en">Version deployed to production (created on finish)</span>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td style="text-align:center;">
                                            <svg width="16" height="24" viewBox="0 0 16 24" style="vertical-align:middle;">
                                                <line x1="8" y1="20" x2="8" y2="8" stroke="#22c55e" stroke-width="2"/>
                                                <polygon points="8,0 2,8 14,8" fill="#22c55e"/>
                                            </svg>
                                        </td>
                                        <td>
                                            <span data-lang="fr">Fleche de merge</span>
                                            <span data-lang="en">Merge arrow</span>
                                        </td>
                                        <td>
                                            <span data-lang="fr">Direction du merge (feature → develop)</span>
                                            <span data-lang="en">Merge direction (feature → develop)</span>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>

                        <!-- When to use which command -->
                        <h3 id="when-to-use">
                            <span data-lang="fr">Quand utiliser quelle commande ?</span>
                            <span data-lang="en">When to use which command?</span>
                        </h3>

                        <!-- Integration Methods Explanation -->
                        <div class="alert alert-warning" style="margin-bottom: 2rem;">
                            <span class="alert-icon">&#128161;</span>
                            <div class="alert-content">
                                <h5 data-lang="fr">Deux methodes d'integration</h5>
                                <h5 data-lang="en">Two Integration Methods</h5>
                                <div data-lang="fr">
                                    <p><strong>1. Methode PR (Recommandee)</strong> : <code>/gitflow pr</code> &#8594; <code>/gitflow finish</code></p>
                                    <ul style="margin: 0.5rem 0; padding-left: 1.5rem;">
                                        <li>Cree une Pull Request pour revue de code</li>
                                        <li>Apres merge de la PR, <code>/gitflow finish</code> supprime la branche locale ET remote</li>
                                        <li><strong>A utiliser pour</strong> : features, releases, hotfixes</li>
                                    </ul>
                                    <p style="margin-top: 1rem;"><strong>2. Methode directe (Legacy)</strong> : <code>/gitflow plan</code> &#8594; <code>/gitflow merge</code></p>
                                    <ul style="margin: 0.5rem 0; padding-left: 1.5rem;">
                                        <li>Merge directement sans Pull Request</li>
                                        <li>Utile pour les projets solo ou CI/CD automatise</li>
                                        <li><strong>Attention</strong> : Ne supprime pas la branche remote automatiquement</li>
                                    </ul>
                                </div>
                                <div data-lang="en">
                                    <p><strong>1. PR Method (Recommended)</strong>: <code>/gitflow pr</code> &#8594; <code>/gitflow finish</code></p>
                                    <ul style="margin: 0.5rem 0; padding-left: 1.5rem;">
                                        <li>Creates a Pull Request for code review</li>
                                        <li>After PR merge, <code>/gitflow finish</code> deletes both local AND remote branches</li>
                                        <li><strong>Use for</strong>: features, releases, hotfixes</li>
                                    </ul>
                                    <p style="margin-top: 1rem;"><strong>2. Direct Method (Legacy)</strong>: <code>/gitflow plan</code> &#8594; <code>/gitflow merge</code></p>
                                    <ul style="margin: 0.5rem 0; padding-left: 1.5rem;">
                                        <li>Merges directly without Pull Request</li>
                                        <li>Useful for solo projects or automated CI/CD</li>
                                        <li><strong>Warning</strong>: Does not automatically delete remote branch</li>
                                    </ul>
                                </div>
                            </div>
                        </div>

                        <!-- Branch Cleanup Info -->
                        <div class="alert alert-info" style="margin-bottom: 2rem;">
                            <span class="alert-icon">&#128465;</span>
                            <div class="alert-content">
                                <h5 data-lang="fr">Suppression des branches remote</h5>
                                <h5 data-lang="en">Remote Branch Deletion</h5>
                                <p data-lang="fr">
                                    <code>/gitflow finish</code> supprime automatiquement la branche sur le remote (<code>git push origin --delete {branch}</code>).
                                    Pour un nettoyage complet des worktrees orphelins, utilisez <code>/gitflow cleanup</code>.
                                </p>
                                <p data-lang="en">
                                    <code>/gitflow finish</code> automatically deletes the remote branch (<code>git push origin --delete {branch}</code>).
                                    For complete cleanup of orphan worktrees, use <code>/gitflow cleanup</code>.
                                </p>
                            </div>
                        </div>

                        <!-- Decision Flowchart SVG - Responsive -->
                        <div class="decision-diagram" style="margin: 2rem 0;">
                            <svg viewBox="0 0 1200 900" preserveAspectRatio="xMidYMid meet" style="width: 100%; max-width: 1800px; height: auto; display: block; margin: 0 auto;">
                                <!-- Background -->
                                <rect width="1200" height="900" fill="#0f172a" rx="8"/>

                                <!-- Title -->
                                <text x="500" y="40" text-anchor="middle" fill="#f8fafc" font-size="22" font-weight="600">
                                    <tspan data-lang="fr">Quel est votre objectif ?</tspan>
                                    <tspan data-lang="en">What is your goal?</tspan>
                                </text>

                                <!-- Central decision diamond -->
                                <polygon points="500,70 620,130 500,190 380,130" fill="transparent" stroke="#6366f1" stroke-width="2.5"/>
                                <text x="500" y="135" text-anchor="middle" fill="#f8fafc" font-size="14" font-weight="500">
                                    <tspan data-lang="fr">Objectif</tspan>
                                    <tspan data-lang="en">Goal</tspan>
                                </text>

                                <!-- FEATURE PATH (Left) - Simple: left then down -->
                                <line x1="380" y1="130" x2="120" y2="130" stroke="#22c55e" stroke-width="2.5"/>
                                <line x1="120" y1="130" x2="120" y2="250" stroke="#22c55e" stroke-width="2.5"/>
                                <polygon points="120,250 114,236 126,236" fill="#22c55e"/>

                                <rect x="30" y="255" width="180" height="55" rx="8" fill="#22c55e" fill-opacity="0.15" stroke="#22c55e" stroke-width="2.5"/>
                                <text x="120" y="280" text-anchor="middle" fill="#22c55e" font-size="13" font-weight="600">
                                    <tspan data-lang="fr">Nouvelle fonctionnalite</tspan>
                                    <tspan data-lang="en">New feature</tspan>
                                </text>
                                <text x="120" y="298" text-anchor="middle" fill="#94a3b8" font-size="10">(feature)</text>

                                <!-- Feature flow down -->
                                <line x1="120" y1="310" x2="120" y2="335" stroke="#22c55e" stroke-width="2.5"/>
                                <polygon points="120,335 114,321 126,321" fill="#22c55e"/>

                                <g class="cmd-copyable" data-cmd="/gitflow start feature {nom}" style="cursor:pointer;">
                                    <rect x="30" y="340" width="180" height="40" rx="6" fill="#0f172a" stroke="#22c55e" stroke-width="2"/>
                                    <text x="120" y="365" text-anchor="middle" fill="#22c55e" font-size="11" font-family="monospace">/gitflow start feature</text>
                                </g>

                                <line x1="120" y1="380" x2="120" y2="410" stroke="#22c55e" stroke-width="2.5" stroke-dasharray="5,3"/>
                                <text x="120" y="430" text-anchor="middle" fill="#64748b" font-size="11" font-style="italic">
                                    <tspan data-lang="fr">coder...</tspan>
                                    <tspan data-lang="en">code...</tspan>
                                </text>

                                <!-- Decision: Fini? (Done?) -->
                                <line x1="120" y1="445" x2="120" y2="460" stroke="#22c55e" stroke-width="2.5"/>
                                <polygon points="120,505 155,482 120,460 85,482" fill="transparent" stroke="#22c55e" stroke-width="2"/>
                                <text x="120" y="487" text-anchor="middle" fill="#f8fafc" font-size="10" font-weight="500">
                                    <tspan data-lang="fr">Fini?</tspan>
                                    <tspan data-lang="en">Done?</tspan>
                                </text>

                                <!-- NON path - go right to commit -->
                                <line x1="155" y1="482" x2="195" y2="482" stroke="#64748b" stroke-width="2.5"/>
                                <polygon points="195,482 182,476 182,488" fill="#64748b"/>
                                <text x="175" y="472" text-anchor="middle" fill="#64748b" font-size="8" font-weight="600">
                                    <tspan data-lang="fr">NON</tspan>
                                    <tspan data-lang="en">NO</tspan>
                                </text>

                                <g class="cmd-copyable" data-cmd="/gitflow commit" style="cursor:pointer;">
                                    <rect x="198" y="465" width="110" height="34" rx="5" fill="#0f172a" stroke="#8b5cf6" stroke-width="2"/>
                                    <text x="253" y="487" text-anchor="middle" fill="#8b5cf6" font-size="10" font-family="monospace">/gitflow commit</text>
                                </g>

                                <!-- Loop back from commit to coder -->
                                <path d="M 253 465 L 253 420 L 160 420" stroke="#64748b" stroke-width="2.5" fill="none" stroke-dasharray="5,3"/>
                                <polygon points="160,420 175,414 175,426" fill="#64748b"/>

                                <!-- OUI path - continue to PR -->
                                <line x1="120" y1="505" x2="120" y2="530" stroke="#22c55e" stroke-width="2.5"/>
                                <polygon points="120,530 114,516 126,516" fill="#22c55e"/>
                                <text x="100" y="520" text-anchor="end" fill="#22c55e" font-size="9" font-weight="600">
                                    <tspan data-lang="fr">OUI</tspan>
                                    <tspan data-lang="en">YES</tspan>
                                </text>

                                <!-- PR step -->
                                <g class="cmd-copyable" data-cmd="/gitflow pr" style="cursor:pointer;">
                                    <rect x="30" y="535" width="180" height="28" rx="5" fill="#0f172a" stroke="#06b6d4" stroke-width="2"/>
                                    <text x="120" y="554" text-anchor="middle" fill="#06b6d4" font-size="9" font-family="monospace">/gitflow pr</text>
                                </g>

                                <!-- Arrow to merge on GitHub -->
                                <line x1="120" y1="563" x2="120" y2="575" stroke="#22c55e" stroke-width="2.5"/>
                                <polygon points="120,575 114,566 126,566" fill="#22c55e"/>

                                <!-- Merge on GitHub (external step) -->
                                <rect x="30" y="580" width="180" height="32" rx="5" fill="#334155" fill-opacity="0.5" stroke="#64748b" stroke-width="2" stroke-dasharray="4,2"/>
                                <text x="120" y="594" text-anchor="middle" fill="#94a3b8" font-size="9" font-weight="500">
                                    <tspan data-lang="fr">Merge sur GitHub</tspan>
                                    <tspan data-lang="en">Merge on GitHub</tspan>
                                </text>
                                <text x="120" y="606" text-anchor="middle" fill="#64748b" font-size="7">(manuel ou /gitflow merge)</text>

                                <!-- Arrow to finish -->
                                <line x1="120" y1="612" x2="120" y2="625" stroke="#22c55e" stroke-width="2.5"/>
                                <polygon points="120,625 114,616 126,616" fill="#22c55e"/>

                                <!-- Finish step -->
                                <g class="cmd-copyable" data-cmd="/gitflow finish" style="cursor:pointer;">
                                    <rect x="30" y="630" width="180" height="28" rx="5" fill="#0f172a" stroke="#22c55e" stroke-width="2"/>
                                    <text x="120" y="649" text-anchor="middle" fill="#22c55e" font-size="9" font-family="monospace">/gitflow finish</text>
                                </g>

                                <!-- Arrow to result -->
                                <line x1="120" y1="658" x2="120" y2="672" stroke="#22c55e" stroke-width="2.5"/>
                                <polygon points="120,672 114,663 126,663" fill="#22c55e"/>

                                <!-- Final cleanup result -->
                                <rect x="30" y="677" width="180" height="45" rx="8" fill="#22c55e" fill-opacity="0.2" stroke="#22c55e" stroke-width="2.5"/>
                                <text x="120" y="695" text-anchor="middle" fill="#22c55e" font-size="10" font-weight="600">
                                    <tspan data-lang="fr">Cleanup</tspan>
                                    <tspan data-lang="en">Cleanup</tspan>
                                </text>
                                <text x="120" y="712" text-anchor="middle" fill="#94a3b8" font-size="8">
                                    <tspan data-lang="fr">suppression branches + worktree</tspan>
                                    <tspan data-lang="en">delete branches + worktree</tspan>
                                </text>

                                <!-- RELEASE PATH (Center) - Scaled for 1200x750 -->
                                <line x1="470" y1="190" x2="470" y2="220" stroke="#eab308" stroke-width="2.5"/>
                                <line x1="470" y1="220" x2="400" y2="220" stroke="#eab308" stroke-width="2.5"/>
                                <line x1="400" y1="220" x2="400" y2="250" stroke="#eab308" stroke-width="2.5"/>
                                <polygon points="400,250 394,236 406,236" fill="#eab308"/>

                                <rect x="310" y="255" width="180" height="55" rx="8" fill="#eab308" fill-opacity="0.15" stroke="#eab308" stroke-width="2.5"/>
                                <text x="400" y="280" text-anchor="middle" fill="#eab308" font-size="13" font-weight="600">
                                    <tspan data-lang="fr">Deployer en prod</tspan>
                                    <tspan data-lang="en">Deploy to prod</tspan>
                                </text>
                                <text x="400" y="298" text-anchor="middle" fill="#94a3b8" font-size="10">(release)</text>

                                <line x1="400" y1="310" x2="400" y2="335" stroke="#eab308" stroke-width="2.5"/>
                                <polygon points="400,335 394,321 406,321" fill="#eab308"/>

                                <g class="cmd-copyable" data-cmd="/gitflow start release" style="cursor:pointer;">
                                    <rect x="310" y="340" width="180" height="40" rx="6" fill="#0f172a" stroke="#eab308" stroke-width="2"/>
                                    <text x="400" y="365" text-anchor="middle" fill="#eab308" font-size="11" font-family="monospace">/gitflow start release</text>
                                </g>

                                <!-- Release: tests... -->
                                <line x1="400" y1="380" x2="400" y2="410" stroke="#eab308" stroke-width="2.5" stroke-dasharray="5,3"/>
                                <text x="400" y="430" text-anchor="middle" fill="#64748b" font-size="11" font-style="italic">
                                    <tspan data-lang="fr">tests...</tspan>
                                    <tspan data-lang="en">tests...</tspan>
                                </text>

                                <!-- Release: Fini? diamond -->
                                <line x1="400" y1="445" x2="400" y2="460" stroke="#eab308" stroke-width="2.5"/>
                                <polygon points="400,505 435,482 400,460 365,482" fill="transparent" stroke="#eab308" stroke-width="2"/>
                                <text x="400" y="487" text-anchor="middle" fill="#f8fafc" font-size="10" font-weight="500">
                                    <tspan data-lang="fr">Fini?</tspan>
                                    <tspan data-lang="en">Done?</tspan>
                                </text>

                                <!-- Release NON -> commit (shared) -->
                                <line x1="435" y1="482" x2="495" y2="482" stroke="#64748b" stroke-width="2.5"/>
                                <text x="465" y="473" text-anchor="middle" fill="#64748b" font-size="8" font-weight="600">
                                    <tspan data-lang="fr">NON</tspan>
                                    <tspan data-lang="en">NO</tspan>
                                </text>

                                <!-- Shared commit box between Release and Hotfix -->
                                <g class="cmd-copyable" data-cmd="/gitflow commit" style="cursor:pointer;">
                                    <rect x="498" y="465" width="120" height="34" rx="5" fill="#0f172a" stroke="#8b5cf6" stroke-width="2"/>
                                    <text x="558" y="487" text-anchor="middle" fill="#8b5cf6" font-size="10" font-family="monospace">/gitflow commit</text>
                                </g>

                                <!-- Hotfix NON -> commit (shared) -->
                                <line x1="685" y1="482" x2="622" y2="482" stroke="#64748b" stroke-width="2.5"/>
                                <text x="653" y="473" text-anchor="middle" fill="#64748b" font-size="8" font-weight="600">
                                    <tspan data-lang="fr">NON</tspan>
                                    <tspan data-lang="en">NO</tspan>
                                </text>

                                <!-- Release: loop back from commit -->
                                <path d="M 520 465 L 520 420 L 440 420" stroke="#64748b" stroke-width="2.5" fill="none" stroke-dasharray="5,3"/>
                                <polygon points="440,420 455,414 455,426" fill="#64748b"/>

                                <!-- Hotfix: loop back from commit -->
                                <path d="M 598 465 L 598 420 L 680 420" stroke="#64748b" stroke-width="2.5" fill="none" stroke-dasharray="5,3"/>
                                <polygon points="680,420 665,414 665,426" fill="#64748b"/>

                                <!-- Release OUI -> PR -> finish -->
                                <line x1="400" y1="505" x2="400" y2="530" stroke="#eab308" stroke-width="2.5"/>
                                <polygon points="400,530 394,516 406,516" fill="#eab308"/>
                                <text x="380" y="520" text-anchor="end" fill="#eab308" font-size="9" font-weight="600">
                                    <tspan data-lang="fr">OUI</tspan>
                                    <tspan data-lang="en">YES</tspan>
                                </text>

                                <!-- Release: PR step -->
                                <g class="cmd-copyable" data-cmd="/gitflow pr" style="cursor:pointer;">
                                    <rect x="310" y="535" width="180" height="28" rx="5" fill="#0f172a" stroke="#06b6d4" stroke-width="2"/>
                                    <text x="400" y="554" text-anchor="middle" fill="#06b6d4" font-size="9" font-family="monospace">/gitflow pr</text>
                                </g>

                                <line x1="400" y1="563" x2="400" y2="575" stroke="#eab308" stroke-width="2.5"/>
                                <polygon points="400,575 394,566 406,566" fill="#eab308"/>

                                <!-- Merge on GitHub -->
                                <rect x="310" y="580" width="180" height="32" rx="5" fill="#334155" fill-opacity="0.5" stroke="#64748b" stroke-width="2" stroke-dasharray="4,2"/>
                                <text x="400" y="594" text-anchor="middle" fill="#94a3b8" font-size="9" font-weight="500">
                                    <tspan data-lang="fr">Merge sur GitHub</tspan>
                                    <tspan data-lang="en">Merge on GitHub</tspan>
                                </text>
                                <text x="400" y="606" text-anchor="middle" fill="#64748b" font-size="7">(manuel ou /gitflow merge)</text>

                                <line x1="400" y1="612" x2="400" y2="625" stroke="#eab308" stroke-width="2.5"/>
                                <polygon points="400,625 394,616 406,616" fill="#eab308"/>

                                <g class="cmd-copyable" data-cmd="/gitflow finish" style="cursor:pointer;">
                                    <rect x="310" y="630" width="180" height="28" rx="5" fill="#0f172a" stroke="#eab308" stroke-width="2"/>
                                    <text x="400" y="649" text-anchor="middle" fill="#eab308" font-size="9" font-family="monospace">/gitflow finish</text>
                                </g>

                                <line x1="400" y1="658" x2="400" y2="672" stroke="#eab308" stroke-width="2.5"/>
                                <polygon points="400,672 394,663 406,663" fill="#eab308"/>

                                <rect x="310" y="677" width="180" height="45" rx="8" fill="#eab308" fill-opacity="0.2" stroke="#eab308" stroke-width="2.5"/>
                                <text x="400" y="695" text-anchor="middle" fill="#eab308" font-size="10" font-weight="600">
                                    <tspan data-lang="fr">Tag + merge back</tspan>
                                    <tspan data-lang="en">Tag + merge back</tspan>
                                </text>
                                <text x="400" y="712" text-anchor="middle" fill="#94a3b8" font-size="8">
                                    <tspan data-lang="fr">→ main + develop + cleanup</tspan>
                                    <tspan data-lang="en">→ main + develop + cleanup</tspan>
                                </text>

                                <!-- HOTFIX PATH (Center-Right) - Scaled for 1200x750 -->
                                <line x1="550" y1="190" x2="550" y2="220" stroke="#ec4899" stroke-width="2.5"/>
                                <line x1="550" y1="220" x2="720" y2="220" stroke="#ec4899" stroke-width="2.5"/>
                                <line x1="720" y1="220" x2="720" y2="250" stroke="#ec4899" stroke-width="2.5"/>
                                <polygon points="720,250 714,236 726,236" fill="#ec4899"/>

                                <rect x="630" y="255" width="180" height="55" rx="8" fill="#ec4899" fill-opacity="0.15" stroke="#ec4899" stroke-width="2.5"/>
                                <text x="720" y="280" text-anchor="middle" fill="#ec4899" font-size="13" font-weight="600">
                                    <tspan data-lang="fr">Bug urgent prod</tspan>
                                    <tspan data-lang="en">Urgent prod bug</tspan>
                                </text>
                                <text x="720" y="298" text-anchor="middle" fill="#94a3b8" font-size="10">(hotfix)</text>

                                <line x1="720" y1="310" x2="720" y2="335" stroke="#ec4899" stroke-width="2.5"/>
                                <polygon points="720,335 714,321 726,321" fill="#ec4899"/>

                                <g class="cmd-copyable" data-cmd="/gitflow start hotfix {nom}" style="cursor:pointer;">
                                    <rect x="630" y="340" width="180" height="40" rx="6" fill="#0f172a" stroke="#ec4899" stroke-width="2"/>
                                    <text x="720" y="365" text-anchor="middle" fill="#ec4899" font-size="11" font-family="monospace">/gitflow start hotfix</text>
                                </g>

                                <!-- Hotfix: fix... -->
                                <line x1="720" y1="380" x2="720" y2="410" stroke="#ec4899" stroke-width="2.5" stroke-dasharray="5,3"/>
                                <text x="720" y="430" text-anchor="middle" fill="#64748b" font-size="11" font-style="italic">
                                    <tspan data-lang="fr">fix...</tspan>
                                    <tspan data-lang="en">fix...</tspan>
                                </text>

                                <!-- Hotfix: Fini? diamond -->
                                <line x1="720" y1="445" x2="720" y2="460" stroke="#ec4899" stroke-width="2.5"/>
                                <polygon points="720,505 755,482 720,460 685,482" fill="transparent" stroke="#ec4899" stroke-width="2"/>
                                <text x="720" y="487" text-anchor="middle" fill="#f8fafc" font-size="10" font-weight="500">
                                    <tspan data-lang="fr">Fini?</tspan>
                                    <tspan data-lang="en">Done?</tspan>
                                </text>

                                <!-- Hotfix OUI -> PR -> finish -->
                                <line x1="720" y1="505" x2="720" y2="530" stroke="#ec4899" stroke-width="2.5"/>
                                <polygon points="720,530 714,516 726,516" fill="#ec4899"/>
                                <text x="740" y="520" text-anchor="start" fill="#ec4899" font-size="9" font-weight="600">
                                    <tspan data-lang="fr">OUI</tspan>
                                    <tspan data-lang="en">YES</tspan>
                                </text>

                                <!-- Hotfix: PR step -->
                                <g class="cmd-copyable" data-cmd="/gitflow pr" style="cursor:pointer;">
                                    <rect x="630" y="535" width="180" height="28" rx="5" fill="#0f172a" stroke="#06b6d4" stroke-width="2"/>
                                    <text x="720" y="554" text-anchor="middle" fill="#06b6d4" font-size="9" font-family="monospace">/gitflow pr</text>
                                </g>

                                <line x1="720" y1="563" x2="720" y2="575" stroke="#ec4899" stroke-width="2.5"/>
                                <polygon points="720,575 714,566 726,566" fill="#ec4899"/>

                                <!-- Merge on GitHub -->
                                <rect x="630" y="580" width="180" height="32" rx="5" fill="#334155" fill-opacity="0.5" stroke="#64748b" stroke-width="2" stroke-dasharray="4,2"/>
                                <text x="720" y="594" text-anchor="middle" fill="#94a3b8" font-size="9" font-weight="500">
                                    <tspan data-lang="fr">Merge sur GitHub</tspan>
                                    <tspan data-lang="en">Merge on GitHub</tspan>
                                </text>
                                <text x="720" y="606" text-anchor="middle" fill="#64748b" font-size="7">(manuel ou /gitflow merge)</text>

                                <line x1="720" y1="612" x2="720" y2="625" stroke="#ec4899" stroke-width="2.5"/>
                                <polygon points="720,625 714,616 726,616" fill="#ec4899"/>

                                <g class="cmd-copyable" data-cmd="/gitflow finish" style="cursor:pointer;">
                                    <rect x="630" y="630" width="180" height="28" rx="5" fill="#0f172a" stroke="#ec4899" stroke-width="2"/>
                                    <text x="720" y="649" text-anchor="middle" fill="#ec4899" font-size="9" font-family="monospace">/gitflow finish</text>
                                </g>

                                <!-- Hotfix result -->
                                <line x1="720" y1="658" x2="720" y2="672" stroke="#ec4899" stroke-width="2.5"/>
                                <polygon points="720,672 714,663 726,663" fill="#ec4899"/>

                                <rect x="630" y="677" width="180" height="45" rx="8" fill="#ec4899" fill-opacity="0.2" stroke="#ec4899" stroke-width="2.5"/>
                                <text x="720" y="695" text-anchor="middle" fill="#ec4899" font-size="10" font-weight="600">
                                    <tspan data-lang="fr">Version + Tag + merge back</tspan>
                                    <tspan data-lang="en">Version + Tag + merge back</tspan>
                                </text>
                                <text x="720" y="712" text-anchor="middle" fill="#94a3b8" font-size="8">
                                    <tspan data-lang="fr">bump PATCH + main + develop</tspan>
                                    <tspan data-lang="en">bump PATCH + main + develop</tspan>
                                </text>

                                <!-- UTILITY COMMANDS (Right) - Scaled for 1200x750 -->
                                <line x1="620" y1="130" x2="920" y2="130" stroke="#6366f1" stroke-width="2.5"/>
                                <polygon points="920,130 905,124 905,136" fill="#6366f1"/>

                                <rect x="935" y="70" width="240" height="640" rx="10" fill="transparent" stroke="#475569" stroke-width="1.5"/>
                                <text x="1055" y="100" text-anchor="middle" fill="#94a3b8" font-size="14" font-weight="600">
                                    <tspan data-lang="fr">Utilitaires</tspan>
                                    <tspan data-lang="en">Utilities</tspan>
                                </text>

                                <!-- Init (first - setup) -->
                                <g class="cmd-copyable" data-cmd="/gitflow init" style="cursor:pointer;">
                                    <rect x="955" y="118" width="200" height="36" rx="5" fill="#0f172a" stroke="#475569" stroke-width="2" stroke-dasharray="4,3"/>
                                    <text x="1055" y="141" text-anchor="middle" fill="#64748b" font-size="11" font-family="monospace">/gitflow init</text>
                                </g>

                                <!-- Status -->
                                <g class="cmd-copyable" data-cmd="/gitflow status" style="cursor:pointer;">
                                    <rect x="955" y="164" width="200" height="36" rx="5" fill="#0f172a" stroke="#3b82f6" stroke-width="2"/>
                                    <text x="1055" y="187" text-anchor="middle" fill="#3b82f6" font-size="11" font-family="monospace">/gitflow status</text>
                                </g>

                                <!-- Commit -->
                                <g class="cmd-copyable" data-cmd="/gitflow commit" style="cursor:pointer;">
                                    <rect x="955" y="210" width="200" height="36" rx="5" fill="#0f172a" stroke="#8b5cf6" stroke-width="2"/>
                                    <text x="1055" y="233" text-anchor="middle" fill="#8b5cf6" font-size="11" font-family="monospace">/gitflow commit</text>
                                </g>

                                <!-- Abort -->
                                <g class="cmd-copyable" data-cmd="/gitflow abort" style="cursor:pointer;">
                                    <rect x="955" y="256" width="200" height="36" rx="5" fill="#0f172a" stroke="#ef4444" stroke-width="2"/>
                                    <text x="1055" y="279" text-anchor="middle" fill="#ef4444" font-size="11" font-family="monospace">/gitflow abort</text>
                                </g>

                                <!-- PR Commands Section -->
                                <text x="1055" y="318" text-anchor="middle" fill="#64748b" font-size="10" font-weight="500">
                                    <tspan data-lang="fr">─── Pull Request ───</tspan>
                                    <tspan data-lang="en">─── Pull Request ───</tspan>
                                </text>

                                <!-- Pull Request -->
                                <g class="cmd-copyable" data-cmd="/gitflow pr" style="cursor:pointer;">
                                    <rect x="955" y="332" width="200" height="36" rx="5" fill="#0f172a" stroke="#06b6d4" stroke-width="2"/>
                                    <text x="1055" y="355" text-anchor="middle" fill="#06b6d4" font-size="11" font-family="monospace">/gitflow pr</text>
                                </g>

                                <!-- Review -->
                                <g class="cmd-copyable" data-cmd="/gitflow merge" style="cursor:pointer;">
                                    <rect x="955" y="378" width="200" height="36" rx="5" fill="#0f172a" stroke="#10b981" stroke-width="2"/>
                                    <text x="1055" y="401" text-anchor="middle" fill="#10b981" font-size="11" font-family="monospace">/gitflow merge</text>
                                </g>

                                <!-- Merge -->
                                <g class="cmd-copyable" data-cmd="/gitflow merge" style="cursor:pointer;">
                                    <rect x="955" y="424" width="200" height="36" rx="5" fill="#0f172a" stroke="#6366f1" stroke-width="2"/>
                                    <text x="1055" y="447" text-anchor="middle" fill="#6366f1" font-size="11" font-family="monospace">/gitflow merge</text>
                                </g>

                                <!-- Cleanup Commands Section -->
                                <text x="1055" y="487" text-anchor="middle" fill="#64748b" font-size="10" font-weight="500">
                                    <tspan data-lang="fr">─── Nettoyage ───</tspan>
                                    <tspan data-lang="en">─── Cleanup ───</tspan>
                                </text>

                                <!-- Finish -->
                                <g class="cmd-copyable" data-cmd="/gitflow finish" style="cursor:pointer;">
                                    <rect x="955" y="501" width="200" height="36" rx="5" fill="#0f172a" stroke="#22c55e" stroke-width="2"/>
                                    <text x="1055" y="524" text-anchor="middle" fill="#22c55e" font-size="11" font-family="monospace">/gitflow finish</text>
                                </g>

                                <!-- Cleanup -->
                                <g class="cmd-copyable" data-cmd="/gitflow cleanup" style="cursor:pointer;">
                                    <rect x="955" y="547" width="200" height="36" rx="5" fill="#0f172a" stroke="#f97316" stroke-width="2"/>
                                    <text x="1055" y="570" text-anchor="middle" fill="#f97316" font-size="11" font-family="monospace">/gitflow cleanup</text>
                                </g>

                                <!-- Legend inside box -->
                                <text x="1055" y="610" text-anchor="middle" fill="#64748b" font-size="10" font-weight="500">
                                    <tspan data-lang="fr">─── Couleurs ───</tspan>
                                    <tspan data-lang="en">─── Colors ───</tspan>
                                </text>

                                <circle cx="970" cy="635" r="5" fill="#22c55e"/>
                                <text x="983" y="639" fill="#94a3b8" font-size="9">Feature</text>
                                <circle cx="1080" cy="635" r="5" fill="#eab308"/>
                                <text x="1093" y="639" fill="#94a3b8" font-size="9">Release</text>

                                <circle cx="970" cy="658" r="5" fill="#ec4899"/>
                                <text x="983" y="662" fill="#94a3b8" font-size="9">Hotfix</text>
                                <circle cx="1080" cy="658" r="5" fill="#06b6d4"/>
                                <text x="1093" y="662" fill="#94a3b8" font-size="9">PR</text>

                                <circle cx="970" cy="681" r="5" fill="#3b82f6"/>
                                <text x="983" y="685" fill="#94a3b8" font-size="9">Status</text>
                                <circle cx="1080" cy="681" r="5" fill="#8b5cf6"/>
                                <text x="1093" y="685" fill="#94a3b8" font-size="9">Commit</text>
                            </svg>
                        </div>

                        <!-- Command Reference Cards removed: see "Commandes GitFlow" section below -->
                    </section>

                    <!-- Architecture & Structure -->
                    <section id="architecture">
                        <h2>
                            <span data-lang="fr">Architecture &amp; Structure</span>
                            <span data-lang="en">Architecture &amp; Structure</span>
                        </h2>

                        <h3 data-lang="fr">Structure des Worktrees</h3>
                        <h3 data-lang="en">Worktrees Structure</h3>

                        <p data-lang="fr">
                            GitFlow utilise des <strong>git worktrees</strong> pour isoler chaque branche dans son propre repertoire. Cela permet de travailler sur plusieurs branches simultanement sans avoir a faire de checkout.
                        </p>
                        <p data-lang="en">
                            GitFlow uses <strong>git worktrees</strong> to isolate each branch in its own directory. This allows working on multiple branches simultaneously without having to checkout.
                        </p>

                        <!-- Worktree Structure SVG Diagram -->
                        <div class="svg-diagram" style="margin: 1.5rem 0;">
                            <svg viewBox="0 0 1100 520" preserveAspectRatio="xMidYMid meet" style="width: 100%; max-width: 1800px; height: auto; display: block; margin: 0 auto;">
                                <!-- Definitions for folder icons -->
                                <defs>
                                    <linearGradient id="folderGradient" x1="0%" y1="0%" x2="0%" y2="100%">
                                        <stop offset="0%" style="stop-color:#fbbf24"/>
                                        <stop offset="100%" style="stop-color:#f59e0b"/>
                                    </linearGradient>
                                    <linearGradient id="folderBlue" x1="0%" y1="0%" x2="0%" y2="100%">
                                        <stop offset="0%" style="stop-color:#60a5fa"/>
                                        <stop offset="100%" style="stop-color:#3b82f6"/>
                                    </linearGradient>
                                    <linearGradient id="folderGreen" x1="0%" y1="0%" x2="0%" y2="100%">
                                        <stop offset="0%" style="stop-color:#4ade80"/>
                                        <stop offset="100%" style="stop-color:#22c55e"/>
                                    </linearGradient>
                                    <linearGradient id="folderYellow" x1="0%" y1="0%" x2="0%" y2="100%">
                                        <stop offset="0%" style="stop-color:#fde047"/>
                                        <stop offset="100%" style="stop-color:#eab308"/>
                                    </linearGradient>
                                    <linearGradient id="folderPink" x1="0%" y1="0%" x2="0%" y2="100%">
                                        <stop offset="0%" style="stop-color:#f472b6"/>
                                        <stop offset="100%" style="stop-color:#ec4899"/>
                                    </linearGradient>
                                    <linearGradient id="folderPurple" x1="0%" y1="0%" x2="0%" y2="100%">
                                        <stop offset="0%" style="stop-color:#a78bfa"/>
                                        <stop offset="100%" style="stop-color:#8b5cf6"/>
                                    </linearGradient>
                                </defs>

                                <!-- Title -->
                                <text x="550" y="35" text-anchor="middle" fill="#f8fafc" font-size="16" font-weight="600">
                                    <tspan data-lang="fr">Structure des dossiers GitFlow</tspan>
                                    <tspan data-lang="en">GitFlow Folder Structure</tspan>
                                </text>

                                <!-- ========== LEFT SIDE: Project Structure ========== -->
                                <text x="180" y="70" text-anchor="middle" fill="#94a3b8" font-size="12" font-weight="500">
                                    <tspan data-lang="fr">Projet principal</tspan>
                                    <tspan data-lang="en">Main project</tspan>
                                </text>

                                <!-- my-project folder -->
                                <g transform="translate(30, 85)">
                                    <rect x="0" y="0" width="300" height="40" rx="8" fill="transparent" stroke="#3b82f6" stroke-width="2"/>
                                    <path d="M15,12 L15,8 L22,8 L25,12 L35,12 L35,28 L15,28 Z" fill="url(#folderBlue)"/>
                                    <text x="50" y="26" fill="#f8fafc" font-size="14" font-weight="600">my-project/</text>
                                    <text x="180" y="26" fill="#64748b" font-size="11">Repertoire principal</text>
                                </g>

                                <!-- .claude/gitflow/ folder -->
                                <g transform="translate(60, 135)">
                                    <line x1="-15" y1="-20" x2="-15" y2="20" stroke="#475569" stroke-width="2"/>
                                    <line x1="-15" y1="20" x2="0" y2="20" stroke="#475569" stroke-width="2"/>
                                    <rect x="0" y="0" width="270" height="40" rx="8" fill="transparent" stroke="#8b5cf6" stroke-width="2"/>
                                    <path d="M15,12 L15,8 L22,8 L25,12 L35,12 L35,28 L15,28 Z" fill="url(#folderPurple)"/>
                                    <text x="50" y="26" fill="#a78bfa" font-size="13" font-weight="600">.claude/gitflow/</text>
                                    <text x="200" y="26" fill="#64748b" font-size="10">Config GitFlow</text>
                                </g>

                                <!-- Config files inside .claude/gitflow -->
                                <g transform="translate(90, 185)">
                                    <line x1="-15" y1="-20" x2="-15" y2="155" stroke="#475569" stroke-width="2" stroke-dasharray="4,4"/>

                                    <!-- config.json -->
                                    <g transform="translate(0, 0)">
                                        <line x1="-15" y1="15" x2="0" y2="15" stroke="#475569" stroke-width="2"/>
                                        <rect x="0" y="0" width="200" height="30" rx="6" fill="transparent" stroke="#475569" stroke-width="1"/>
                                        <rect x="12" y="7" width="16" height="16" rx="2" fill="#6366f1"/>
                                        <text x="40" y="20" fill="#e2e8f0" font-size="11" font-family="monospace">config.json</text>
                                        <text x="135" y="20" fill="#64748b" font-size="9">Configuration</text>
                                    </g>

                                    <!-- plans/ -->
                                    <g transform="translate(0, 40)">
                                        <line x1="-15" y1="15" x2="0" y2="15" stroke="#475569" stroke-width="2"/>
                                        <rect x="0" y="0" width="200" height="30" rx="6" fill="transparent" stroke="#475569" stroke-width="1"/>
                                        <path d="M12,9 L12,6 L18,6 L20,9 L28,9 L28,21 L12,21 Z" fill="#f97316"/>
                                        <text x="40" y="20" fill="#e2e8f0" font-size="11" font-family="monospace">plans/</text>
                                        <text x="105" y="20" fill="#64748b" font-size="9">Plans d'integration</text>
                                    </g>

                                    <!-- logs/ -->
                                    <g transform="translate(0, 80)">
                                        <line x1="-15" y1="15" x2="0" y2="15" stroke="#475569" stroke-width="2"/>
                                        <rect x="0" y="0" width="200" height="30" rx="6" fill="transparent" stroke="#475569" stroke-width="1"/>
                                        <path d="M12,9 L12,6 L18,6 L20,9 L28,9 L28,21 L12,21 Z" fill="#64748b"/>
                                        <text x="40" y="20" fill="#e2e8f0" font-size="11" font-family="monospace">logs/</text>
                                        <text x="90" y="20" fill="#64748b" font-size="9">Historique</text>
                                    </g>

                                    <!-- migrations/ -->
                                    <g transform="translate(0, 120)">
                                        <line x1="-15" y1="15" x2="0" y2="15" stroke="#475569" stroke-width="2"/>
                                        <rect x="0" y="0" width="200" height="30" rx="6" fill="transparent" stroke="#475569" stroke-width="1"/>
                                        <path d="M12,9 L12,6 L18,6 L20,9 L28,9 L28,21 L12,21 Z" fill="#06b6d4"/>
                                        <text x="40" y="20" fill="#06b6d4" font-size="11" font-family="monospace">migrations/</text>
                                        <text x="130" y="20" fill="#64748b" font-size="9">EF Core</text>
                                    </g>

                                    <!-- backup/ & cache/ -->
                                    <g transform="translate(0, 160)">
                                        <line x1="-15" y1="15" x2="0" y2="15" stroke="#475569" stroke-width="2"/>
                                        <rect x="0" y="0" width="200" height="30" rx="6" fill="transparent" stroke="#334155" stroke-width="1"/>
                                        <text x="15" y="20" fill="#64748b" font-size="10">backup/, cache/</text>
                                        <text x="130" y="20" fill="#475569" font-size="9">Autres</text>
                                    </g>
                                </g>

                                <!-- Separator line -->
                                <line x1="400" y1="80" x2="400" y2="480" stroke="#334155" stroke-width="2" stroke-dasharray="8,8"/>

                                <!-- ========== RIGHT SIDE: Worktrees Structure ========== -->
                                <text x="750" y="70" text-anchor="middle" fill="#94a3b8" font-size="12" font-weight="500">
                                    <tspan data-lang="fr">Worktrees (branches isolees)</tspan>
                                    <tspan data-lang="en">Worktrees (isolated branches)</tspan>
                                </text>

                                <!-- worktrees/ folder -->
                                <g transform="translate(430, 85)">
                                    <rect x="0" y="0" width="260" height="40" rx="8" fill="transparent" stroke="#fbbf24" stroke-width="2"/>
                                    <path d="M15,12 L15,8 L22,8 L25,12 L35,12 L35,28 L15,28 Z" fill="url(#folderGradient)"/>
                                    <text x="50" y="26" fill="#fbbf24" font-size="14" font-weight="600">worktrees/</text>
                                    <text x="160" y="26" fill="#64748b" font-size="11">Branches isolees</text>
                                </g>

                                <!-- main/ -->
                                <g transform="translate(460, 140)">
                                    <line x1="-15" y1="-15" x2="-15" y2="15" stroke="#475569" stroke-width="2"/>
                                    <line x1="-15" y1="15" x2="0" y2="15" stroke="#475569" stroke-width="2"/>
                                    <rect x="0" y="0" width="220" height="32" rx="6" fill="transparent" stroke="#6366f1" stroke-width="1.5"/>
                                    <path d="M12,9 L12,6 L18,6 L20,9 L28,9 L28,23 L12,23 Z" fill="#6366f1"/>
                                    <text x="40" y="21" fill="#818cf8" font-size="12" font-weight="500">main/</text>
                                    <text x="100" y="21" fill="#64748b" font-size="10">Production</text>
                                    <circle cx="200" cy="16" r="6" fill="#6366f1"/>
                                </g>

                                <!-- develop/ -->
                                <g transform="translate(460, 182)">
                                    <line x1="-15" y1="-10" x2="-15" y2="15" stroke="#475569" stroke-width="2"/>
                                    <line x1="-15" y1="15" x2="0" y2="15" stroke="#475569" stroke-width="2"/>
                                    <rect x="0" y="0" width="220" height="32" rx="6" fill="transparent" stroke="#f97316" stroke-width="1.5"/>
                                    <path d="M12,9 L12,6 L18,6 L20,9 L28,9 L28,23 L12,23 Z" fill="#f97316"/>
                                    <text x="40" y="21" fill="#fb923c" font-size="12" font-weight="500">develop/</text>
                                    <text x="115" y="21" fill="#64748b" font-size="10">Integration</text>
                                    <circle cx="200" cy="16" r="6" fill="#f97316"/>
                                </g>

                                <!-- features/ -->
                                <g transform="translate(460, 230)">
                                    <line x1="-15" y1="-16" x2="-15" y2="15" stroke="#475569" stroke-width="2"/>
                                    <line x1="-15" y1="15" x2="0" y2="15" stroke="#475569" stroke-width="2"/>
                                    <rect x="0" y="0" width="220" height="32" rx="6" fill="#22c55e" fill-opacity="0.15" stroke="#22c55e" stroke-width="1.5"/>
                                    <path d="M12,9 L12,6 L18,6 L20,9 L28,9 L28,23 L12,23 Z" fill="url(#folderGreen)"/>
                                    <text x="40" y="21" fill="#4ade80" font-size="12" font-weight="600">features/</text>
                                    <text x="125" y="21" fill="#64748b" font-size="10">En cours</text>
                                    <circle cx="200" cy="16" r="6" fill="#22c55e"/>
                                </g>

                                <!-- Feature subfolders -->
                                <g transform="translate(490, 275)">
                                    <line x1="-15" y1="-13" x2="-15" y2="45" stroke="#22c55e" stroke-width="1.5" stroke-dasharray="3,3"/>

                                    <g transform="translate(0, 0)">
                                        <line x1="-15" y1="12" x2="0" y2="12" stroke="#22c55e" stroke-width="1.5"/>
                                        <rect x="0" y="0" width="170" height="26" rx="5" fill="transparent" stroke="#22c55e" stroke-width="1"/>
                                        <text x="12" y="18" fill="#4ade80" font-size="11" font-family="monospace">user-auth/</text>
                                    </g>

                                    <g transform="translate(0, 35)">
                                        <line x1="-15" y1="12" x2="0" y2="12" stroke="#22c55e" stroke-width="1.5"/>
                                        <rect x="0" y="0" width="170" height="26" rx="5" fill="transparent" stroke="#22c55e" stroke-width="1"/>
                                        <text x="12" y="18" fill="#4ade80" font-size="11" font-family="monospace">payment-gateway/</text>
                                    </g>
                                </g>

                                <!-- releases/ -->
                                <g transform="translate(460, 365)">
                                    <line x1="-15" y1="-29" x2="-15" y2="15" stroke="#475569" stroke-width="2"/>
                                    <line x1="-15" y1="15" x2="0" y2="15" stroke="#475569" stroke-width="2"/>
                                    <rect x="0" y="0" width="220" height="32" rx="6" fill="#eab308" fill-opacity="0.15" stroke="#eab308" stroke-width="1.5"/>
                                    <path d="M12,9 L12,6 L18,6 L20,9 L28,9 L28,23 L12,23 Z" fill="url(#folderYellow)"/>
                                    <text x="40" y="21" fill="#fde047" font-size="12" font-weight="600">releases/</text>
                                    <text x="125" y="21" fill="#64748b" font-size="10">En cours</text>
                                    <circle cx="200" cy="16" r="6" fill="#eab308"/>
                                </g>

                                <!-- Release subfolder -->
                                <g transform="translate(490, 410)">
                                    <line x1="-15" y1="-13" x2="-15" y2="12" stroke="#eab308" stroke-width="1.5" stroke-dasharray="3,3"/>
                                    <line x1="-15" y1="12" x2="0" y2="12" stroke="#eab308" stroke-width="1.5"/>
                                    <rect x="0" y="0" width="170" height="26" rx="5" fill="transparent" stroke="#eab308" stroke-width="1"/>
                                    <text x="12" y="18" fill="#fde047" font-size="11" font-family="monospace">v1.2.0/</text>
                                </g>

                                <!-- hotfixes/ -->
                                <g transform="translate(460, 450)">
                                    <line x1="-15" y1="-14" x2="-15" y2="15" stroke="#475569" stroke-width="2"/>
                                    <line x1="-15" y1="15" x2="0" y2="15" stroke="#475569" stroke-width="2"/>
                                    <rect x="0" y="0" width="220" height="32" rx="6" fill="#ec4899" fill-opacity="0.15" stroke="#ec4899" stroke-width="1.5"/>
                                    <path d="M12,9 L12,6 L18,6 L20,9 L28,9 L28,23 L12,23 Z" fill="url(#folderPink)"/>
                                    <text x="40" y="21" fill="#f472b6" font-size="12" font-weight="600">hotfixes/</text>
                                    <text x="125" y="21" fill="#64748b" font-size="10">Urgents</text>
                                    <circle cx="200" cy="16" r="6" fill="#ec4899"/>
                                </g>

                                <!-- Hotfix subfolder -->
                                <g transform="translate(490, 495)">
                                    <line x1="-15" y1="-13" x2="-15" y2="10" stroke="#ec4899" stroke-width="1.5" stroke-dasharray="3,3"/>
                                    <line x1="-15" y1="10" x2="0" y2="10" stroke="#ec4899" stroke-width="1.5"/>
                                    <rect x="0" y="0" width="170" height="24" rx="5" fill="transparent" stroke="#ec4899" stroke-width="1"/>
                                    <text x="12" y="16" fill="#f472b6" font-size="11" font-family="monospace">critical-fix/</text>
                                </g>

                                <!-- Legend -->
                                <g transform="translate(750, 140)">
                                    <rect x="0" y="0" width="200" height="130" rx="8" fill="transparent" stroke="#334155" stroke-width="1"/>
                                    <text x="100" y="22" text-anchor="middle" fill="#94a3b8" font-size="11" font-weight="500">
                                        <tspan data-lang="fr">Legende</tspan>
                                        <tspan data-lang="en">Legend</tspan>
                                    </text>

                                    <circle cx="20" cy="45" r="5" fill="#6366f1"/>
                                    <text x="35" y="49" fill="#94a3b8" font-size="10">Permanent</text>

                                    <circle cx="20" cy="68" r="5" fill="#22c55e"/>
                                    <text x="35" y="72" fill="#94a3b8" font-size="10">Feature</text>

                                    <circle cx="110" cy="45" r="5" fill="#eab308"/>
                                    <text x="125" y="49" fill="#94a3b8" font-size="10">Release</text>

                                    <circle cx="110" cy="68" r="5" fill="#ec4899"/>
                                    <text x="125" y="72" fill="#94a3b8" font-size="10">Hotfix</text>

                                    <line x1="15" y1="90" x2="185" y2="90" stroke="#334155" stroke-width="1"/>
                                    <text x="100" y="110" text-anchor="middle" fill="#64748b" font-size="9">
                                        <tspan data-lang="fr">Chaque worktree = 1 branche isolee</tspan>
                                        <tspan data-lang="en">Each worktree = 1 isolated branch</tspan>
                                    </text>
                                </g>
                            </svg>
                        </div>

                        <h3 data-lang="fr">Fichiers de configuration</h3>
                        <h3 data-lang="en">Configuration Files</h3>

                        <div class="table-container">
                            <table>
                                <thead>
                                    <tr>
                                        <th>
                                            <span data-lang="fr">Fichier</span>
                                            <span data-lang="en">File</span>
                                        </th>
                                        <th>
                                            <span data-lang="fr">Description</span>
                                            <span data-lang="en">Description</span>
                                        </th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td><a href=".claude/gitflow/config.json" class="file-link"><code>.claude/gitflow/config.json</code></a></td>
                                        <td>
                                            <span data-lang="fr">Configuration principale : versioning, branches, EF Core, worktrees</span>
                                            <span data-lang="en">Main configuration: versioning, branches, EF Core, worktrees</span>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td><a href=".claude/gitflow/plans/" class="file-link"><code>.claude/gitflow/plans/</code></a></td>
                                        <td>
                                            <span data-lang="fr">Plans d'integration generes par /gitflow plan</span>
                                            <span data-lang="en">Integration plans generated by /gitflow plan</span>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td><a href=".claude/gitflow/logs/" class="file-link"><code>.claude/gitflow/logs/</code></a></td>
                                        <td>
                                            <span data-lang="fr">Historique des operations et checkpoints</span>
                                            <span data-lang="en">Operations history and checkpoints</span>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td><a href=".claude/gitflow/migrations/" class="file-link"><code>.claude/gitflow/migrations/</code></a></td>
                                        <td>
                                            <span data-lang="fr">Snapshots EF Core pour detection de conflits</span>
                                            <span data-lang="en">EF Core snapshots for conflict detection</span>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>

                        <h3 data-lang="fr">Creation automatique</h3>
                        <h3 data-lang="en">Automatic Creation</h3>

                        <p data-lang="fr">
                            La structure est creee automatiquement par <code>/gitflow init</code>. Les worktrees sont crees lors du premier <code>/gitflow start</code>.
                        </p>
                        <p data-lang="en">
                            The structure is automatically created by <code>/gitflow init</code>. Worktrees are created on the first <code>/gitflow start</code>.
                        </p>

                        <div class="code-block">
                            <button class="copy-btn">Copy</button>
                            <pre><code><span class="code-comment"># Initialiser GitFlow avec worktrees</span>
<span class="code-cmd">/gitflow init</span> <span class="code-flag">--with-worktrees</span>

<span class="code-comment"># Demarrer une feature (cree le worktree automatiquement)</span>
<span class="code-cmd">/gitflow start</span> <span class="code-arg">feature</span> <span class="code-string">user-auth</span>
<span class="code-output"># → Worktree cree: ../worktrees/features/user-auth/</span>

<span class="code-comment"># Travailler sans worktree (meme repertoire)</span>
<span class="code-cmd">/gitflow start</span> <span class="code-arg">feature</span> <span class="code-string">test</span> <span class="code-flag">--no-worktree</span></code></pre>
                        </div>
                    </section>

                    <!-- Best Practices -->
                    <section id="best-practices">
                        <h2>
                            <span data-lang="fr">Bonnes pratiques</span>
                            <span data-lang="en">Best Practices</span>
                        </h2>

                        <div class="best-practice">
                            <h4>
                                <span class="bp-icon">&#9989;</span>
                                <span data-lang="fr">Nommage des branches</span>
                                <span data-lang="en">Branch Naming</span>
                            </h4>
                            <p data-lang="fr">Utilisez des noms descriptifs et kebab-case :</p>
                            <p data-lang="en">Use descriptive names with kebab-case:</p>
                            <div class="code-block">
                                <pre><code># Bon
feature/user-authentication
feature/add-payment-gateway
hotfix/fix-login-redirect
release/v2.1.0

# Mauvais
feature/auth
feature/MyNewFeature
hotfix/fix
release/new</code></pre>
                            </div>
                        </div>

                        <div class="best-practice">
                            <h4>
                                <span class="bp-icon">&#9989;</span>
                                <span data-lang="fr">Commits atomiques</span>
                                <span data-lang="en">Atomic Commits</span>
                            </h4>
                            <p data-lang="fr">
                                Chaque commit doit representer un changement logique unique. Utilisez <code>/gitflow commit</code> pour des commits structures.
                            </p>
                            <p data-lang="en">
                                Each commit should represent a single logical change. Use <code>/gitflow commit</code> for structured commits.
                            </p>
                            <div class="code-block">
                                <pre><code># Bon - Commits atomiques
feat(auth): add login form component
feat(auth): implement JWT token validation
fix(auth): handle expired token refresh

# Mauvais - Commit fourre-tout
WIP: auth stuff</code></pre>
                            </div>
                        </div>

                        <div class="best-practice">
                            <h4>
                                <span class="bp-icon">&#9989;</span>
                                <span data-lang="fr">Rebase avant merge</span>
                                <span data-lang="en">Rebase Before Merge</span>
                            </h4>
                            <p data-lang="fr">
                                Avant de merger une feature, rebaser sur develop pour avoir un historique propre et eviter les conflits de merge.
                            </p>
                            <p data-lang="en">
                                Before merging a feature, rebase on develop to have a clean history and avoid merge conflicts.
                            </p>
                            <div class="code-block">
                                <pre><code># SmartStack CLI le fait automatiquement avec /gitflow merge
# Manuellement :
git checkout feature/my-feature
git fetch origin
git rebase origin/develop
# Resoudre les conflits si necessaire
git checkout develop
git merge --no-ff feature/my-feature</code></pre>
                            </div>
                        </div>

                        <div class="best-practice">
                            <h4>
                                <span class="bp-icon">&#9989;</span>
                                <span data-lang="fr">Ne jamais push sur main directement</span>
                                <span data-lang="en">Never Push to Main Directly</span>
                            </h4>
                            <p data-lang="fr">
                                Toutes les modifications doivent passer par des branches feature, release ou hotfix. SmartStack CLI protege automatiquement les branches principales.
                            </p>
                            <p data-lang="en">
                                All changes must go through feature, release or hotfix branches. SmartStack CLI automatically protects main branches.
                            </p>
                        </div>

                        <div class="best-practice">
                            <h4>
                                <span class="bp-icon">&#128465;</span>
                                <span data-lang="fr">Nettoyer regulierement les worktrees</span>
                                <span data-lang="en">Regularly Clean Up Worktrees</span>
                            </h4>
                            <p data-lang="fr">
                                Apres chaque release ou hotfix, les worktrees sont nettoyes automatiquement. Pour un audit complet, utilisez <code>/gitflow cleanup</code> depuis main ou develop.
                            </p>
                            <p data-lang="en">
                                After each release or hotfix, worktrees are automatically cleaned up. For a full audit, use <code>/gitflow cleanup</code> from main or develop.
                            </p>
                            <div class="code-block">
                                <pre><code># Audit et nettoyage complet (depuis main ou develop)
/gitflow cleanup

# Audit seul sans suppression
/gitflow cleanup --dry-run

# Nettoyage automatique des orphelins
/gitflow cleanup --force</code></pre>
                            </div>
                        </div>

                        <div class="best-practice">
                            <h4>
                                <span class="bp-icon">&#9989;</span>
                                <span data-lang="fr">Tester avant de merger</span>
                                <span data-lang="en">Test Before Merging</span>
                            </h4>
                            <p data-lang="fr">
                                <code>/gitflow merge</code> execute automatiquement les tests, le build et le lint avant tout merge.
                            </p>
                            <p data-lang="en">
                                <code>/gitflow merge</code> automatically runs tests, build and lint before any merge.
                            </p>
                        </div>

                        <div class="alert alert-warning">
                            <span class="alert-icon">&#9888;</span>
                            <div class="alert-content">
                                <h5 data-lang="fr">Eviter les anti-patterns</h5>
                                <h5 data-lang="en">Avoid Anti-patterns</h5>
                                <div class="feature-grid">
                                    <div class="feature-item">
                                        <span class="feature-icon">&#10060;</span>
                                        <span class="feature-text" data-lang="fr">Ne jamais force push sur main ou develop</span>
                                        <span class="feature-text" data-lang="en">Never force push to main or develop</span>
                                    </div>
                                    <div class="feature-item">
                                        <span class="feature-icon">&#10060;</span>
                                        <span class="feature-text" data-lang="fr">Ne pas merger une feature non testee</span>
                                        <span class="feature-text" data-lang="en">Don't merge an untested feature</span>
                                    </div>
                                    <div class="feature-item">
                                        <span class="feature-icon">&#10060;</span>
                                        <span class="feature-text" data-lang="fr">Ne pas laisser des branches ouvertes trop longtemps</span>
                                        <span class="feature-text" data-lang="en">Don't leave branches open too long</span>
                                    </div>
                                    <div class="feature-item">
                                        <span class="feature-icon">&#10060;</span>
                                        <span class="feature-text" data-lang="fr">Ne pas ignorer les conflits de ModelSnapshot (EF Core)</span>
                                        <span class="feature-text" data-lang="en">Don't ignore ModelSnapshot conflicts (EF Core)</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </section>

                    <!-- Commands -->
                    <section id="commands">
                        <h2>
                            <span data-lang="fr">Commandes GitFlow</span>
                            <span data-lang="en">GitFlow Commands</span>
                        </h2>

                        <p data-lang="fr">SmartStack CLI fournit 11 commandes pour gerer le workflow GitFlow. Chaque commande inclut son prompt complet.</p>
                        <p data-lang="en">SmartStack CLI provides 11 commands to manage the GitFlow workflow. Each command includes its complete prompt.</p>

                        <!-- Command: /gitflow init -->
                        <div class="command-card">
                            <div class="command-header">
                                <code class="command-name">/gitflow init</code>
                                <span class="tag tag-command">Setup</span>
                            </div>
                            <div class="command-body">
                                <p data-lang="fr">
                                    Cette commande est le point d'entree obligatoire pour tout nouveau projet utilisant GitFlow. Elle analyse le repository existant pour detecter la source de version (package.json, .csproj, VERSION file), identifie les branches deja presentes, et detecte automatiquement si le projet utilise Entity Framework Core. A partir de cette analyse, elle genere un plan d'initialisation detaille que l'utilisateur peut valider avant execution. Une fois approuve, elle cree la structure complete : branches main et develop, dossier .claude/gitflow/ avec la configuration, et met a jour CLAUDE.md avec les informations du projet. Cette approche en deux temps (plan puis execution) garantit une initialisation sans surprise et parfaitement adaptee au contexte du projet.
                                </p>
                                <p data-lang="en">
                                    This command is the mandatory entry point for any new project using GitFlow. It analyzes the existing repository to detect the version source (package.json, .csproj, VERSION file), identifies branches already present, and automatically detects if the project uses Entity Framework Core. From this analysis, it generates a detailed initialization plan that the user can validate before execution. Once approved, it creates the complete structure: main and develop branches, .claude/gitflow/ folder with configuration, and updates CLAUDE.md with project information. This two-step approach (plan then execution) ensures a surprise-free initialization perfectly adapted to the project context.
                                </p>
                                <div class="code-block">
                                    <button class="copy-btn">Copy</button>
                                    <pre><code>/gitflow init</code></pre>
                                </div>
                            </div>
                        </div>

                        <!-- Command: /gitflow status -->
                        <div class="command-card">
                            <div class="command-header">
                                <code class="command-name">/gitflow status</code>
                                <span class="tag tag-command">Info</span>
                            </div>
                            <div class="command-body">
                                <p data-lang="fr">
                                    Cette commande est votre tableau de bord avant toute action GitFlow. Elle collecte et affiche l'etat complet du repository : branche courante et son type (feature/release/hotfix), version actuelle lue depuis la source configuree, synchronisation avec develop et main (commits ahead/behind), et etat des migrations EF Core. Elle detecte egalement les risques potentiels comme une divergence importante avec develop, des migrations non commitees, ou des conflits ModelSnapshot imminents. Utilisez-la systematiquement avant de commencer une operation pour avoir une vision claire de la situation. L'option --all-branches permet de voir l'etat des migrations sur toutes les branches actives avec un ordre de merge recommande.
                                </p>
                                <p data-lang="en">
                                    This command is your dashboard before any GitFlow action. It collects and displays the complete repository state: current branch and its type (feature/release/hotfix), current version read from the configured source, synchronization with develop and main (commits ahead/behind), and EF Core migrations status. It also detects potential risks such as significant divergence from develop, uncommitted migrations, or imminent ModelSnapshot conflicts. Use it systematically before starting an operation to have a clear view of the situation. The --all-branches option shows migration status across all active branches with a recommended merge order.
                                </p>
                                <div class="code-block">
                                    <button class="copy-btn">Copy</button>
                                    <pre><code>/gitflow status

# Voir toutes les branches avec migrations
/gitflow status --all-branches</code></pre>
                                </div>
                            </div>
                        </div>

                        <!-- Command: /gitflow commit -->
                        <div class="command-card">
                            <div class="command-header">
                                <code class="command-name">/gitflow commit</code>
                                <span class="tag tag-command">Git</span>
                            </div>
                            <div class="command-body">
                                <p data-lang="fr">
                                    Cette commande remplace le commit Git standard par un commit intelligent adapte au workflow GitFlow et EF Core. Elle analyse automatiquement les fichiers modifies pour valider que les migrations EF Core sont completes (les 3 fichiers requis), detecte les operations destructives comme DropTable ou DropColumn qui necessitent une confirmation explicite, et genere un message de commit structure selon les conventions (feat:, fix:, db:). Si vous travaillez dans un worktree, elle propose automatiquement de pousser vers le remote apres le commit. Cette validation en amont evite les erreurs courantes comme committer une migration incomplete ou oublier de signaler une operation destructive a l'equipe.
                                </p>
                                <p data-lang="en">
                                    This command replaces the standard Git commit with a smart commit adapted to GitFlow and EF Core workflow. It automatically analyzes modified files to validate that EF Core migrations are complete (the 3 required files), detects destructive operations like DropTable or DropColumn that require explicit confirmation, and generates a structured commit message following conventions (feat:, fix:, db:). If you're working in a worktree, it automatically offers to push to remote after the commit. This upstream validation prevents common errors like committing an incomplete migration or forgetting to signal a destructive operation to the team.
                                </p>
                                <div class="code-block">
                                    <button class="copy-btn">Copy</button>
                                    <pre><code>/gitflow commit</code></pre>
                                </div>

                                <div class="alert alert-info">
                                    <span class="alert-icon">&#128640;</span>
                                    <div class="alert-content">
                                        <h5 data-lang="fr">Push automatique pour worktrees</h5>
                                        <h5 data-lang="en">Automatic push for worktrees</h5>
                                        <p data-lang="fr">
                                            Si vous travaillez dans un <strong>git worktree</strong>, le push est automatique apres le commit. Configurable dans <code>.claude/gitflow/config.json</code> via <code>workflow.push.afterCommit</code>.
                                        </p>
                                        <p data-lang="en">
                                            If you're working in a <strong>git worktree</strong>, push is automatic after commit. Configurable in <code>.claude/gitflow/config.json</code> via <code>workflow.push.afterCommit</code>.
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Command: /gitflow plan -->
                        <div class="command-card">
                            <div class="command-header">
                                <code class="command-name">/gitflow plan</code>
                                <span class="tag tag-workflow">Planning</span>
                            </div>
                            <div class="command-body">
                                <p data-lang="fr">
                                    Cette commande prepare une integration complexe en analysant tous les aspects critiques avant l'execution. Elle examine la branche courante pour determiner le nombre de commits a integrer, detecte les migrations EF Core presentes et verifie s'il y a un conflit ModelSnapshot avec la branche cible. En fonction du type de branche (feature, release, hotfix), elle determine la strategie optimale : rebase simple, rebase avec recreation de migration si conflit, ou merge direct. Le resultat est un fichier plan detaille dans .claude/gitflow/plans/ qui liste toutes les etapes a executer, les risques identifies, et les actions de rollback possibles. Ce plan peut etre relu et valide avant execution avec /gitflow merge.
                                </p>
                                <p data-lang="en">
                                    This command prepares a complex integration by analyzing all critical aspects before execution. It examines the current branch to determine the number of commits to integrate, detects present EF Core migrations and checks for ModelSnapshot conflicts with the target branch. Based on branch type (feature, release, hotfix), it determines the optimal strategy: simple rebase, rebase with migration recreation if conflict, or direct merge. The result is a detailed plan file in .claude/gitflow/plans/ listing all steps to execute, identified risks, and possible rollback actions. This plan can be reviewed and validated before execution with /gitflow merge.
                                </p>
                                <div class="code-block">
                                    <button class="copy-btn">Copy</button>
                                    <pre><code>/gitflow plan</code></pre>
                                </div>
                            </div>
                        </div>

                        <!-- Command: /gitflow merge -->
                        <div class="command-card">
                            <div class="command-header">
                                <code class="command-name">/gitflow merge</code>
                                <span class="tag tag-workflow">Execution</span>
                            </div>
                            <div class="command-body">
                                <p data-lang="fr">
                                    Cette commande execute le plan genere par /gitflow plan de maniere securisee et tracable. Elle commence par creer un checkpoint permettant un rollback en cas de probleme, puis execute chaque etape du plan : fetch des dernieres modifications, rebase sur la branche cible si necessaire (avec gestion automatique des conflits ModelSnapshot), merge avec l'option --no-ff pour preserver l'historique, et mise a jour du versioning. Pour les releases et hotfixes, elle gere automatiquement le tag Git et l'increment de version. A chaque etape, elle valide le build et les tests. En cas d'echec, elle peut etre reprise avec --resume ou annulee avec /gitflow abort. L'option --dry-run permet de simuler l'execution sans rien modifier.
                                </p>
                                <p data-lang="en">
                                    This command executes the plan generated by /gitflow plan in a secure and traceable manner. It starts by creating a checkpoint allowing rollback in case of issues, then executes each plan step: fetching latest changes, rebasing on target branch if needed (with automatic ModelSnapshot conflict handling), merging with --no-ff option to preserve history, and version update. For releases and hotfixes, it automatically handles Git tag and version increment. At each step, it validates build and tests. On failure, it can be resumed with --resume or cancelled with /gitflow abort. The --dry-run option allows simulating execution without modifying anything.
                                </p>
                                <div class="code-block">
                                    <button class="copy-btn">Copy</button>
                                    <pre><code>/gitflow merge</code></pre>
                                </div>
                            </div>
                        </div>

                        <!-- Command: /gitflow abort -->
                        <div class="command-card">
                            <div class="command-header">
                                <code class="command-name">/gitflow abort</code>
                                <span class="tag tag-danger">Rollback</span>
                            </div>
                            <div class="command-body">
                                <p data-lang="fr">
                                    Cette commande est votre filet de securite quand une operation GitFlow tourne mal. Elle detecte automatiquement l'etat actuel du repository (merge en cours, rebase interrompu, conflit non resolu) et propose les options de recuperation appropriees. Elle peut annuler un merge avec git merge --abort, restaurer l'etat complet depuis un checkpoint sauvegarde par /gitflow merge, abandonner completement une branche feature/hotfix en la supprimant proprement, ou nettoyer le working directory. Avant toute operation destructive, elle affiche clairement ce qui sera perdu et demande une confirmation explicite. C'est la commande a utiliser en cas de probleme pour revenir a un etat stable sans perdre de travail.
                                </p>
                                <p data-lang="en">
                                    This command is your safety net when a GitFlow operation goes wrong. It automatically detects the current repository state (ongoing merge, interrupted rebase, unresolved conflict) and offers appropriate recovery options. It can cancel a merge with git merge --abort, restore complete state from a checkpoint saved by /gitflow merge, completely abandon a feature/hotfix branch by cleanly deleting it, or clean the working directory. Before any destructive operation, it clearly shows what will be lost and asks for explicit confirmation. This is the command to use when problems occur to return to a stable state without losing work.
                                </p>
                                <div class="code-block">
                                    <button class="copy-btn">Copy</button>
                                    <pre><code>/gitflow abort</code></pre>
                                </div>
                            </div>
                        </div>

                        <!-- Command: /gitflow pr -->
                        <div class="command-card">
                            <div class="command-header">
                                <code class="command-name">/gitflow pr</code>
                                <span class="tag tag-info">PR</span>
                            </div>
                            <div class="command-body">
                                <p data-lang="fr">
                                    Cette commande automatise la creation de Pull Request en generant un contenu professionnel et complet. Elle commence par verifier que vous etes sur une branche de travail valide (feature, release, hotfix), execute les pre-checks (build, tests) et detecte la presence de migrations EF Core. Elle genere ensuite automatiquement le titre depuis le nom de branche, construit la description a partir des commits effectues, ajoute les labels appropries (feature, bugfix, enhancement) et lie les issues mentionnees. La PR ciblee est determinee automatiquement : develop pour les features, main pour les releases et hotfixes. L'option --draft permet de creer une PR en mode brouillon pour obtenir des feedbacks avant finalisation.
                                </p>
                                <p data-lang="en">
                                    This command automates Pull Request creation by generating professional and complete content. It starts by verifying you're on a valid working branch (feature, release, hotfix), runs pre-checks (build, tests) and detects EF Core migrations presence. It then automatically generates the title from the branch name, builds the description from commits made, adds appropriate labels (feature, bugfix, enhancement) and links mentioned issues. The target PR is determined automatically: develop for features, main for releases and hotfixes. The --draft option creates a draft PR to get feedback before finalization.
                                </p>
                                <div class="code-block">
                                    <button class="copy-btn">Copy</button>
                                    <pre><code># PR vers develop (default)
/gitflow pr

# PR vers main (release/hotfix)
/gitflow pr main

# PR en draft
/gitflow pr --draft</code></pre>
                                </div>
                            </div>
                        </div>

                        <!-- Command: /gitflow merge -->
                        <div class="command-card">
                            <div class="command-header">
                                <code class="command-name">/gitflow merge</code>
                                <span class="tag tag-success">Review</span>
                            </div>
                            <div class="command-body">
                                <p data-lang="fr">
                                    Cette commande effectue une revue de code structuree et exhaustive d'une Pull Request. Elle analyse le diff complet en verifiant plusieurs aspects : qualite du code (patterns existants, duplication, nommage, gestion d'erreurs), bonnes pratiques .NET (injection de dependances, async/await, null safety, LINQ), migrations EF Core si presentes (reversibilite, breaking changes, indexes, foreign keys), securite (exposition de donnees sensibles, validation d'inputs, SQL injection) et couverture de tests. Elle genere un rapport structure avec une recommandation finale (APPROVE ou CHANGES_REQUESTED). Les options --security et --ef-core permettent de se concentrer sur un aspect specifique, tandis que --quick produit une checklist rapide pour les petits changements.
                                </p>
                                <p data-lang="en">
                                    This command performs a structured and exhaustive code review of a Pull Request. It analyzes the complete diff checking multiple aspects: code quality (existing patterns, duplication, naming, error handling), .NET best practices (dependency injection, async/await, null safety, LINQ), EF Core migrations if present (reversibility, breaking changes, indexes, foreign keys), security (sensitive data exposure, input validation, SQL injection) and test coverage. It generates a structured report with a final recommendation (APPROVE or CHANGES_REQUESTED). The --security and --ef-core options focus on specific aspects, while --quick produces a fast checklist for small changes.
                                </p>
                                <div class="code-block">
                                    <button class="copy-btn">Copy</button>
                                    <pre><code># Review PR #123
/gitflow merge 123

# Focus securite
/gitflow merge 123 --security

# Focus migrations EF Core
/gitflow merge 123 --ef-core</code></pre>
                                </div>
                            </div>
                        </div>

                        <!-- Command: /gitflow merge -->
                        <div class="command-card">
                            <div class="command-header">
                                <code class="command-name">/gitflow merge</code>
                                <span class="tag tag-primary">Merge</span>
                            </div>
                            <div class="command-body">
                                <p data-lang="fr">
                                    Cette commande finalise l'integration d'une Pull Request de maniere securisee et controlee. Elle verifie d'abord tous les pre-requis : approbations des reviewers, statut CI (tous les checks doivent etre verts), absence de conflits et branche a jour. La strategie de merge est determinee automatiquement selon le type de branche : squash merge pour les features (historique propre dans develop), merge commit pour les releases et hotfixes (preservation de l'historique complet). Apres le merge, elle nettoie automatiquement la branche source sur le remote et met a jour les branches locales. L'option --auto permet d'activer l'auto-merge qui s'executera des que la CI sera verte.
                                </p>
                                <p data-lang="en">
                                    This command finalizes Pull Request integration in a secure and controlled manner. It first verifies all prerequisites: reviewer approvals, CI status (all checks must be green), no conflicts and branch up to date. Merge strategy is determined automatically based on branch type: squash merge for features (clean history in develop), merge commit for releases and hotfixes (full history preservation). After merge, it automatically cleans up the source branch on remote and updates local branches. The --auto option enables auto-merge that will execute as soon as CI is green.
                                </p>
                                <div class="code-block">
                                    <button class="copy-btn">Copy</button>
                                    <pre><code># Merge PR #123
/gitflow merge 123

# Auto-merge quand CI vert
/gitflow merge 123 --auto

# Simulation
/gitflow merge 123 --dry-run</code></pre>
                                </div>
                            </div>
                        </div>

                        <!-- Command: /gitflow start -->
                        <div class="command-card">
                            <div class="command-header">
                                <code class="command-name">/gitflow start</code>
                                <span class="tag tag-workflow">Branch</span>
                            </div>
                            <div class="command-body">
                                <p data-lang="fr">
                                    Cette commande est le point de depart pour tout nouveau travail dans GitFlow. Elle cree la branche appropriee (feature depuis develop, release depuis develop, hotfix depuis main) et l'isole dans un worktree separe par defaut. Cette isolation permet de travailler sur plusieurs branches simultanement sans avoir a switcher constamment. L'assistant analyse d'abord le contexte du projet (version actuelle, commits en avance sur develop, branches existantes) puis pose des questions adaptees pour guider la creation. Pour les releases, elle detecte si main a diverge et propose de le resynchroniser, et si trop de migrations EF Core existent, elle propose de les consolider. L'option --no-worktree permet de creer la branche dans le repertoire courant si les worktrees ne sont pas souhaites.
                                </p>
                                <p data-lang="en">
                                    This command is the starting point for any new work in GitFlow. It creates the appropriate branch (feature from develop, release from develop, hotfix from main) and isolates it in a separate worktree by default. This isolation allows working on multiple branches simultaneously without constantly switching. The assistant first analyzes project context (current version, commits ahead on develop, existing branches) then asks adapted questions to guide creation. For releases, it detects if main has diverged and offers to resync it, and if too many EF Core migrations exist, it offers to consolidate them. The --no-worktree option creates the branch in the current directory if worktrees are not desired.
                                </p>
                                <div class="code-block">
                                    <button class="copy-btn">Copy</button>
                                    <pre><code># Demarrer une feature
/gitflow start feature authentication

# Demarrer une release (avec options avancees EF Core)
/gitflow start release

# Demarrer un hotfix
/gitflow start hotfix critical-bug

# Sans worktree (meme repertoire)
/gitflow start feature test --no-worktree</code></pre>
                                </div>

                                <div class="alert alert-info" style="margin-top: 1rem;">
                                    <span class="alert-icon">&#128161;</span>
                                    <div class="alert-content">
                                        <h5 data-lang="fr">Fonctionnalites avancees pour releases</h5>
                                        <h5 data-lang="en">Advanced features for releases</h5>
                                        <p data-lang="fr">
                                            Lors de la creation d'une release, l'assistant detecte automatiquement :
                                            <br/>• <strong>Main divergent</strong> : Si main contient des commits absents de develop, propose de reset main via cette release
                                            <br/>• <strong>Migrations multiples</strong> : Si plus de 3 migrations existent, propose de les consolider en une seule migration propre
                                        </p>
                                        <p data-lang="en">
                                            When creating a release, the assistant automatically detects:
                                            <br/>• <strong>Divergent main</strong>: If main contains commits missing from develop, offers to reset main via this release
                                            <br/>• <strong>Multiple migrations</strong>: If more than 3 migrations exist, offers to consolidate them into a single clean migration
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Command: /gitflow finish -->
                        <div class="command-card">
                            <div class="command-header">
                                <code class="command-name">/gitflow finish</code>
                                <span class="tag tag-workflow">Branch</span>
                            </div>
                            <div class="command-body">
                                <p data-lang="fr">
                                    Cette commande finalise proprement une branche apres que sa Pull Request a ete mergee. Le comportement depend du type de branche : pour une feature, elle effectue simplement le nettoyage (suppression de la branche locale et remote). Pour une release ou un hotfix, elle execute le workflow complet GitFlow : checkout de main, creation du tag de version, merge back vers develop pour synchroniser les branches, puis nettoyage. Pour les hotfixes, elle gere automatiquement l'increment de version PATCH et la mise a jour du fichier source de version avant de creer le tag. Le worktree associe est egalement supprime si present. Cette commande garantit que toutes les etapes du GitFlow sont correctement executees apres un merge.
                                </p>
                                <p data-lang="en">
                                    This command properly finalizes a branch after its Pull Request has been merged. Behavior depends on branch type: for a feature, it simply performs cleanup (local and remote branch deletion). For a release or hotfix, it executes the complete GitFlow workflow: checkout main, create version tag, merge back to develop to sync branches, then cleanup. For hotfixes, it automatically handles PATCH version increment and version source file update before creating the tag. The associated worktree is also removed if present. This command ensures all GitFlow steps are properly executed after a merge.
                                </p>
                                <div class="code-block">
                                    <button class="copy-btn">Copy</button>
                                    <pre><code>/gitflow finish</code></pre>
                                </div>
                            </div>
                        </div>

                        <!-- Command: /gitflow cleanup -->
                        <div class="command-card">
                            <div class="command-header">
                                <code class="command-name">/gitflow cleanup</code>
                                <span class="tag tag-workflow">Maintenance</span>
                            </div>
                            <div class="command-body">
                                <p data-lang="fr">
                                    Cette commande de maintenance audite et nettoie les worktrees accumules au fil du temps. Elle categorise chaque worktree trouve : permanents (main, develop - jamais supprimes), actifs (branches avec travail en cours), orphelins (la branche Git associee n'existe plus), stale (inactifs depuis plus de 30 jours), ou dirty (modifications locales non commitees). L'audit affiche un rapport complet avec recommandations. En mode interactif, elle propose de supprimer les worktrees orphelins et stale un par un avec confirmation. Elle doit etre executee depuis main ou develop pour eviter de supprimer le worktree courant. Cette commande est automatiquement appelee par /gitflow finish et /gitflow abort pour maintenir l'environnement propre.
                                </p>
                                <p data-lang="en">
                                    This maintenance command audits and cleans up worktrees accumulated over time. It categorizes each found worktree: permanent (main, develop - never deleted), active (branches with ongoing work), orphan (associated Git branch no longer exists), stale (inactive for more than 30 days), or dirty (uncommitted local changes). The audit displays a complete report with recommendations. In interactive mode, it offers to delete orphan and stale worktrees one by one with confirmation. It must be run from main or develop to avoid deleting the current worktree. This command is automatically called by /gitflow finish and /gitflow abort to keep the environment clean.
                                </p>
                                <div class="code-block">
                                    <button class="copy-btn">Copy</button>
                                    <pre><code>/gitflow cleanup</code></pre>
                                </div>
                            </div>
                        </div>
                    </section>

                    <!-- Complete Example -->
                    <section id="workflow-example">
                        <h2>
                            <span data-lang="fr">Exemple complet</span>
                            <span data-lang="en">Complete Example</span>
                        </h2>

                        <p data-lang="fr">Voici un exemple complet de workflow GitFlow avec SmartStack CLI :</p>
                        <p data-lang="en">Here's a complete GitFlow workflow example with SmartStack CLI:</p>

                        <div class="code-block">
                            <button class="copy-btn">Copy</button>
                            <pre><code># 1. Initialiser GitFlow (une seule fois)
/gitflow init

# 2. Verifier l'etat du projet
/gitflow status

# 3. Demarrer une nouvelle feature
/gitflow start feature user-dashboard

# 4. Developper la feature...
# ... ecrire du code ...

# 5. Commits reguliers
/gitflow commit

# 6. Creer une Pull Request vers develop
/gitflow pr

# 7. Review de la PR (optionnel, peut etre fait par un collegue)
/gitflow merge 123

# 8. Merger la PR apres approbation
/gitflow merge 123

# 9. Preparer une release
/gitflow start release

# 10. Tests finaux et corrections mineures...
/gitflow commit

# 11. Creer PR vers main et merger
/gitflow pr main
/gitflow merge 456

# 12. Finaliser la release (tag + merge back + cleanup auto)
/gitflow finish

# La release est maintenant sur main avec un tag!

# 13. Maintenance: Audit des worktrees (depuis main ou develop)
/gitflow cleanup</code></pre>
                        </div>

                        <div class="alert alert-info">
                            <span class="alert-icon">&#128161;</span>
                            <div class="alert-content">
                                <h5 data-lang="fr">Astuce</h5>
                                <h5 data-lang="en">Tip</h5>
                                <p data-lang="fr">
                                    Utilisez <code>/gitflow</code> sans argument pour obtenir une analyse du contexte et des suggestions d'actions basees sur l'etat actuel du projet.
                                </p>
                                <p data-lang="en">
                                    Use <code>/gitflow</code> without arguments to get a context analysis and action suggestions based on the current project state.
                                </p>
                            </div>
                        </div>
                    </section>
