<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{APPLICATION_NAME}} - Analyse metier</title>
    <style>
<!-- CSS_PLACEHOLDER -->
    </style>
</head>
<body>
    <div class="app">
        <!-- ============================================
             HEADER
             ============================================ -->
        <header class="header">
            <div class="header-logo">BA</div>
            <span class="header-title">Analyse metier</span>
            <div class="header-sep"></div>
            <span class="header-app-name" id="appName">{{APPLICATION_NAME}}</span>
            <div class="header-spacer"></div>
            <div class="header-actions">
                <button class="btn btn-sm" onclick="resetToEmbedded()" title="Reinitialiser depuis les donnees d'origine (supprime les modifications locales)">Reset</button>
                <button class="btn btn-sm" onclick="saveToLocalStorage()" title="Sauvegarder les modifications dans le navigateur">Sauvegarder</button>
                <button class="btn btn-sm btn-review" onclick="saveReviewJSON()" title="Sauvegarder les corrections pour creer une nouvelle version">Sauvegarder corrections</button>
                <button class="btn btn-sm btn-primary" onclick="exportJSON()" title="Exporter les donnees au format JSON pour l'extraction">Exporter JSON</button>
                <button class="btn btn-sm review-toggle-btn" id="reviewToggleBtn" onclick="toggleReviewPanel()" title="Ouvrir/fermer le panneau de review">
                    Review
                    <span class="review-badge hidden" id="reviewBadge">0</span>
                </button>
            </div>
        </header>

        <div class="body" id="appBody">
            <!-- ============================================
                 SIDEBAR - Navigation hierarchique
                 ============================================ -->
            <aside class="sidebar">
                <!-- Application Name -->
                <div class="sidebar-header">
                    <span class="sidebar-app-name" id="sidebarAppName">{{APPLICATION_NAME}}</span>
                </div>
                <!-- Dynamic Tree Navigation -->
                <div id="sidebarNav">
                    <!-- Populated by buildNavTree() -->
                </div>
            </aside>

            <!-- ============================================
                 MAIN CONTENT
                 ============================================ -->
            <main class="main" id="mainContent">

                <!-- SECTION: Contexte (merged: problem + current + vision) -->
                <div class="section" id="cadrage-context">
                    <h2 class="section-title">Contexte du projet</h2>
                    <p class="section-subtitle">Vue synthetique du besoin : probleme, situation actuelle et objectif vise.</p>

                    <div style="display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-bottom:1.5rem;">
                        <div class="card" style="border-left:3px solid #f87171;">
                            <div class="card-label" style="color:#f87171;">Probleme identifie</div>
                            <div class="editable" contenteditable="true" data-field="context.problem" data-placeholder="Quel probleme ce projet doit-il resoudre ?"></div>
                            <div style="margin-top:0.75rem;font-size:0.8rem;color:var(--text-muted);">
                                <strong>Declencheur :</strong>
                                <div class="editable" contenteditable="true" data-field="context.trigger" data-placeholder="Evenement declencheur" style="display:inline;"></div>
                            </div>
                        </div>

                        <div class="card" style="border-left:3px solid #facc15;">
                            <div class="card-label" style="color:#facc15;">Aujourd'hui</div>
                            <div class="editable" contenteditable="true" data-field="context.currentSituation" data-placeholder="Comment les choses fonctionnent actuellement ?"></div>
                            <div style="margin-top:0.75rem;font-size:0.8rem;color:var(--text-muted);">
                                <strong>Points douleur :</strong>
                                <div class="editable" contenteditable="true" data-field="context.painPoints" data-placeholder="Problemes recurrents" style="display:inline;"></div>
                            </div>
                        </div>

                        <div class="card" style="border-left:3px solid #4ade80;">
                            <div class="card-label" style="color:#4ade80;">Objectif</div>
                            <div class="editable" contenteditable="true" data-field="context.desiredSituation" data-placeholder="Que doit permettre le systeme cible ?"></div>
                            <div style="margin-top:0.75rem;font-size:0.8rem;color:var(--text-muted);">
                                <strong>Criteres :</strong>
                                <div class="editable" contenteditable="true" data-field="context.acceptanceCriteria" data-placeholder="Criteres de succes" style="display:inline;"></div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- SECTION: Parties prenantes -->
                <div class="section" id="cadrage-stakeholders" style="display:none;">
                    <h2 class="section-title">Parties prenantes</h2>
                    <p class="section-subtitle">Toutes les personnes concernees par ce projet et leurs besoins.</p>

                    <div class="stakeholder-grid" id="stakeholderGrid">
                        <!-- Populated dynamically -->
                    </div>

                    <button class="add-btn" onclick="toggleForm('addStakeholderForm')">+ Ajouter un profil utilisateur</button>

                    <div class="inline-form" id="addStakeholderForm">
                        <div class="inline-form-title">Nouveau profil utilisateur</div>
                        <div class="form-group">
                            <label class="form-label">Titre du profil (exemple : Responsable de production)</label>
                            <input type="text" class="form-input" id="sh-role" placeholder="Titre ou description du profil">
                        </div>
                        <div class="form-group">
                            <label class="form-label">Fonction dans l'entreprise</label>
                            <input type="text" class="form-input" id="sh-function" placeholder="Ce qu'il fait dans l'organisation">
                        </div>
                        <div class="form-group">
                            <label class="form-label">Taches principales (une par ligne)</label>
                            <textarea class="form-textarea" id="sh-tasks" placeholder="Tache 1&#10;Tache 2&#10;Tache 3"></textarea>
                        </div>
                        <div class="form-row">
                            <div class="form-group">
                                <label class="form-label">Frequence d'utilisation</label>
                                <select class="form-select" id="sh-frequency">
                                    <option value="daily">Quotidienne</option>
                                    <option value="weekly">Hebdomadaire</option>
                                    <option value="monthly">Mensuelle</option>
                                    <option value="occasional">Occasionnelle</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <label class="form-label">Niveau d'acces</label>
                                <select class="form-select" id="sh-access">
                                    <option value="admin">Administration complete</option>
                                    <option value="manager">Supervision et validation</option>
                                    <option value="contributor">Saisie et modification</option>
                                    <option value="viewer">Consultation seule</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="form-label">Frustrations actuelles</label>
                            <textarea class="form-textarea" id="sh-frustrations" placeholder="Quelles sont les 2-3 plus grandes frustrations de ce profil avec la facon de travailler actuelle ?"></textarea>
                        </div>
                        <div class="form-actions">
                            <button class="btn" onclick="toggleForm('addStakeholderForm')">Annuler</button>
                            <button class="btn btn-primary" onclick="addStakeholder()">Ajouter ce profil</button>
                        </div>
                    </div>
                </div>

                <!-- SECTION: Perimetre fonctionnel -->
                <div class="section" id="cadrage-scope" style="display:none;">
                    <h2 class="section-title">Perimetre fonctionnel</h2>
                    <p class="section-subtitle">Ce que le systeme doit faire et ne pas faire, par ordre de priorite.</p>

                    <h3 style="color: var(--text-bright); font-size: 1rem; margin-bottom: 0.75rem;">
                        <span style="color: #f87171;">&#9632;</span> Fonctionnalites indispensables
                    </h3>
                    <div id="scopeVital" class="uc-list"></div>
                    <button class="add-btn" onclick="toggleForm('addScopeForm-vital')">+ Ajouter une fonctionnalite indispensable</button>
                    <div class="inline-form" id="addScopeForm-vital">
                        <div class="form-group"><label class="form-label">Nom de la fonctionnalite</label><input type="text" class="form-input" id="scope-name-vital" placeholder="Ex: Gestion des commandes"></div>
                        <div class="form-group"><label class="form-label">Description (optionnel)</label><input type="text" class="form-input" id="scope-desc-vital" placeholder="Courte description"></div>
                        <div class="form-actions"><button class="btn" onclick="toggleForm('addScopeForm-vital')">Annuler</button><button class="btn btn-primary" onclick="addScopeItem('vital')">Ajouter</button></div>
                    </div>

                    <h3 style="color: var(--text-bright); font-size: 1rem; margin: 1.5rem 0 0.75rem;">
                        <span style="color: #facc15;">&#9632;</span> Fonctionnalites importantes
                    </h3>
                    <div id="scopeImportant" class="uc-list"></div>
                    <button class="add-btn" onclick="toggleForm('addScopeForm-important')">+ Ajouter une fonctionnalite importante</button>
                    <div class="inline-form" id="addScopeForm-important">
                        <div class="form-group"><label class="form-label">Nom de la fonctionnalite</label><input type="text" class="form-input" id="scope-name-important" placeholder="Ex: Export PDF"></div>
                        <div class="form-group"><label class="form-label">Description (optionnel)</label><input type="text" class="form-input" id="scope-desc-important" placeholder="Courte description"></div>
                        <div class="form-actions"><button class="btn" onclick="toggleForm('addScopeForm-important')">Annuler</button><button class="btn btn-primary" onclick="addScopeItem('important')">Ajouter</button></div>
                    </div>

                    <h3 style="color: var(--text-bright); font-size: 1rem; margin: 1.5rem 0 0.75rem;">
                        <span style="color: #4ade80;">&#9632;</span> Fonctionnalites optionnelles
                    </h3>
                    <div id="scopeOptional" class="uc-list"></div>
                    <button class="add-btn" onclick="toggleForm('addScopeForm-optional')">+ Ajouter une fonctionnalite optionnelle</button>
                    <div class="inline-form" id="addScopeForm-optional">
                        <div class="form-group"><label class="form-label">Nom de la fonctionnalite</label><input type="text" class="form-input" id="scope-name-optional" placeholder="Ex: Calendrier partage"></div>
                        <div class="form-group"><label class="form-label">Description (optionnel)</label><input type="text" class="form-input" id="scope-desc-optional" placeholder="Courte description"></div>
                        <div class="form-actions"><button class="btn" onclick="toggleForm('addScopeForm-optional')">Annuler</button><button class="btn btn-primary" onclick="addScopeItem('optional')">Ajouter</button></div>
                    </div>

                    <h3 style="color: var(--text-bright); font-size: 1rem; margin: 1.5rem 0 0.75rem;">
                        <span style="color: #94a3b8;">&#9632;</span> Hors perimetre
                    </h3>
                    <div id="scopeExcluded" class="uc-list"></div>
                    <button class="add-btn" onclick="toggleForm('addScopeForm-excluded')">+ Ajouter une exclusion</button>
                    <div class="inline-form" id="addScopeForm-excluded">
                        <div class="form-group"><label class="form-label">Element hors perimetre</label><input type="text" class="form-input" id="scope-name-excluded" placeholder="Ex: Gestion de la paie"></div>
                        <div class="form-group"><label class="form-label">Raison (optionnel)</label><input type="text" class="form-input" id="scope-desc-excluded" placeholder="Pourquoi hors perimetre"></div>
                        <div class="form-actions"><button class="btn" onclick="toggleForm('addScopeForm-excluded')">Annuler</button><button class="btn btn-primary" onclick="addScopeItem('excluded')">Ajouter</button></div>
                    </div>
                </div>

                <!-- SECTION: Criteres de reussite -->
                <div class="section" id="cadrage-success" style="display:none;">
                    <h2 class="section-title">Criteres de reussite</h2>
                    <p class="section-subtitle">Comment mesurer objectivement que le projet est un succes.</p>

                    <div class="card">
                        <div class="card-label">Definition du succes</div>
                        <div class="editable" contenteditable="true" data-field="success.definition" data-placeholder="Comment saurez-vous que le projet est un succes ? Quel changement concret observerez-vous ?"></div>
                    </div>

                    <div class="card" data-vibe-hide>
                        <div class="card-label">Objectifs mesurables</div>
                        <div class="editable" contenteditable="true" data-field="success.metrics" data-placeholder="Quels chiffres presenteriez-vous a votre direction pour prouver le succes ? (temps, erreurs, satisfaction...)"></div>
                    </div>

                    <div class="card" data-vibe-hide>
                        <div class="card-label">Delai d'evaluation</div>
                        <div class="editable" contenteditable="true" data-field="success.timeline" data-placeholder="Au bout de combien de temps pourrez-vous juger si ca fonctionne ? 1 semaine ? 1 mois ? 3 mois ?"></div>
                    </div>

                    <div class="card" data-vibe-hide>
                        <div class="card-label">Conditions minimales de mise en service</div>
                        <div class="editable" contenteditable="true" data-field="success.minimumConditions" data-placeholder="Quelles conditions minimales pour mettre le systeme en service ? (fonctionnalites presentes, donnees migrees, formation faite...)"></div>
                    </div>

                    <h3 style="color: var(--text-bright); font-size: 1rem; margin: 2rem 0 0.75rem;">Criteres d'acceptation</h3>
                    <p style="font-size:0.85rem;color:var(--text-muted);margin-bottom:1rem;">Criteres concrets et mesurables pour valider le succes du projet.</p>
                    <div id="criteriaList" class="uc-list"></div>
                    <button class="add-btn" onclick="toggleForm('addCriterionForm')">+ Ajouter un critere d'acceptation</button>
                    <div class="inline-form" id="addCriterionForm">
                        <div class="form-group"><label class="form-label">Critere (mesurable)</label><input type="text" class="form-input" id="criterion-text" placeholder="Ex: 80% des employes saisissent leurs heures chaque semaine"></div>
                        <div class="form-actions"><button class="btn" onclick="toggleForm('addCriterionForm')">Annuler</button><button class="btn btn-primary" onclick="addCriterion()">Ajouter</button></div>
                    </div>
                </div>

                <!-- ================================================================
                     PHASE 2 : DECOMPOSITION
                     ================================================================ -->

                <!-- SECTION: Domaines fonctionnels -->
                <div class="section" id="decomp-modules" style="display:none;">
                    <h2 class="section-title">Domaines fonctionnels</h2>
                    <p class="section-subtitle">Identifiez les grands domaines de votre application. Chaque domaine regroupe des fonctionnalites coherentes et independantes.</p>

                    <div class="module-grid" id="moduleGrid">
                        <!-- Populated dynamically -->
                    </div>

                    <button class="add-btn" onclick="toggleForm('addModuleForm')" style="margin-top:1rem;">+ Ajouter un domaine fonctionnel</button>

                    <div class="inline-form" id="addModuleForm">
                        <div class="inline-form-title">Nouveau domaine fonctionnel</div>
                        <div class="form-group">
                            <label class="form-label">Nom du domaine (exemple : Gestion des commandes)</label>
                            <input type="text" class="form-input" id="mod-name" placeholder="Nom clair et explicite">
                        </div>
                        <div class="form-group">
                            <label class="form-label">Description en une ou deux phrases</label>
                            <textarea class="form-textarea" id="mod-desc" placeholder="A quoi sert ce domaine ? Quel probleme resout-il ?"></textarea>
                        </div>
                        <div class="form-row">
                            <div class="form-group">
                                <label class="form-label">Type de domaine</label>
                                <select class="form-select" id="mod-type">
                                    <option value="data-centric">Gestion de donnees (listes, fiches, formulaires)</option>
                                    <option value="workflow">Processus metier (etapes, validations, approbations)</option>
                                    <option value="reporting">Tableaux de bord et rapports</option>
                                    <option value="integration">Integration avec des systemes externes</option>
                                    <option value="full-module">Domaine complet (donnees + processus + rapports)</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <label class="form-label">Priorite</label>
                                <select class="form-select" id="mod-priority">
                                    <option value="must">Indispensable</option>
                                    <option value="should">Important</option>
                                    <option value="could">Optionnel</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="form-label">Principales donnees gerees (une par ligne)</label>
                            <textarea class="form-textarea" id="mod-entities" placeholder="Commande&#10;Ligne de commande&#10;Facture"></textarea>
                        </div>
                        <div class="form-actions">
                            <button class="btn" onclick="toggleForm('addModuleForm')">Annuler</button>
                            <button class="btn btn-primary" onclick="addModule()">Ajouter ce domaine</button>
                        </div>
                    </div>
                </div>

                <!-- SECTION: Dependances -->
                <div class="section" id="decomp-dependencies" style="display:none;">
                    <h2 class="section-title">Dependances entre domaines</h2>
                    <p class="section-subtitle">Indiquez quels domaines dependent d'autres domaines. Par exemple, les Commandes dependent des Clients et des Produits.</p>

                    <div id="depGraphContainer">
                        <div class="dep-graph" id="depGraph">
                            <p style="color:var(--text-muted);text-align:center;padding:2rem;">Ajoutez des domaines fonctionnels pour visualiser les dependances.</p>
                        </div>
                    </div>

                    <div style="margin-top:1.5rem;">
                        <h3 style="color:var(--text-bright);font-size:1rem;margin-bottom:0.75rem;">Ajouter une dependance</h3>
                        <div class="form-row">
                            <div class="form-group">
                                <label class="form-label">Ce domaine...</label>
                                <select class="form-select" id="dep-from"></select>
                            </div>
                            <div class="form-group">
                                <label class="form-label">...depend de</label>
                                <select class="form-select" id="dep-to"></select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="form-label">Nature de la dependance</label>
                            <input type="text" class="form-input" id="dep-desc" placeholder="Exemple : La commande reference un client existant">
                        </div>
                        <button class="btn btn-primary" onclick="addDependency()" style="margin-top:0.5rem;">Ajouter cette dependance</button>
                    </div>

                    <div id="depList" style="margin-top:1.5rem;"></div>

                    <div style="margin-top:2rem;">
                        <h3 style="color:var(--text-bright);font-size:1rem;margin-bottom:0.75rem;">Ordre de traitement propose</h3>
                        <p class="section-subtitle">Les domaines sont traites dans l'ordre de leurs dependances : les fondations d'abord, puis les domaines qui en dependent.</p>
                        <div id="processingOrder" class="process-flow"></div>
                    </div>
                </div>

                <!-- ================================================================
                     PHASE 3 : SPECIFICATION PAR MODULE
                     ================================================================ -->

                <!-- Container dynamique pour les specs de chaque module -->
                <div id="moduleSpecContainer">
                    <!-- Generated dynamically by renderModuleSpec() -->
                </div>

                <!-- ================================================================
                     PHASE 4 : CONSOLIDATION
                     ================================================================ -->

                <!-- SECTION: Modele de donnees -->
                <div class="section" id="consol-datamodel" style="display:none;">
                    <h2 class="section-title">Modele de donnees</h2>
                    <p class="section-subtitle">Vue d'ensemble de toutes les entites metier, leurs attributs et leurs relations entre domaines.</p>
                    <div id="dataModelContainer">
                        <p style="color:var(--text-muted);text-align:center;padding:2rem;">Le modele de donnees sera genere a partir des specifications de chaque domaine.</p>
                    </div>
                </div>

                <!-- SECTION: Interactions cross-module -->
                <div class="section" id="consol-interactions" style="display:none;">
                    <h2 class="section-title">Interactions entre domaines</h2>
                    <p class="section-subtitle">Vue d'ensemble de la facon dont les domaines communiquent et partagent des donnees.</p>
                    <div id="consolInteractions">
                        <p style="color:var(--text-muted);text-align:center;padding:2rem;">Les interactions seront calculees automatiquement a partir des dependances et des donnees partagees entre domaines.</p>
                    </div>
                </div>

                <!-- SECTION: Coherence des acces -->
                <div class="section" id="consol-permissions" style="display:none;">
                    <h2 class="section-title">Coherence des droits d'acces</h2>
                    <p class="section-subtitle">Verification que les profils utilisateurs ont des droits coherents dans tous les domaines.</p>
                    <div id="consolPermissions">
                        <p style="color:var(--text-muted);text-align:center;padding:2rem;">La coherence sera verifiee quand les permissions de chaque domaine seront definies.</p>
                    </div>
                </div>

                <!-- SECTION: Parcours bout en bout -->
                <div class="section" id="consol-flows" style="display:none;">
                    <h2 class="section-title">Parcours bout en bout</h2>
                    <p class="section-subtitle">Les processus metier qui traversent plusieurs domaines, de bout en bout.</p>

                    <div id="e2eFlowsList"></div>

                    <button class="add-btn" onclick="toggleForm('addFlowForm')">+ Ajouter un parcours</button>

                    <div class="inline-form" id="addFlowForm">
                        <div class="inline-form-title">Nouveau parcours bout en bout</div>
                        <div class="form-group">
                            <label class="form-label">Nom du parcours (exemple : De la commande a la facture)</label>
                            <input type="text" class="form-input" id="flow-name" placeholder="Nom descriptif du parcours">
                        </div>
                        <div class="form-group">
                            <label class="form-label">Etapes du parcours (une par ligne : Domaine - Action)</label>
                            <textarea class="form-textarea" id="flow-steps" placeholder="Clients - Le client existe dans le systeme&#10;Commandes - Creer la commande&#10;Commandes - Valider la commande&#10;Factures - Generer la facture"></textarea>
                        </div>
                        <div class="form-group">
                            <label class="form-label">Qui intervient dans ce parcours ?</label>
                            <input type="text" class="form-input" id="flow-actors" placeholder="Exemple : Contributeur (creation), Responsable (validation)">
                        </div>
                        <div class="form-actions">
                            <button class="btn" onclick="toggleForm('addFlowForm')">Annuler</button>
                            <button class="btn btn-primary" onclick="addE2EFlow()">Ajouter ce parcours</button>
                        </div>
                    </div>
                </div>

                <!-- ================================================================
                     PHASE 5 : SYNTHESE
                     ================================================================ -->

                <div class="section" id="handoff-summary" style="display:none;">
                    <h2 class="section-title">Synthese de l'analyse</h2>
                    <p class="section-subtitle">Vue d'ensemble de toute l'analyse metier, prete pour le developpement.</p>

                    <div class="stat-grid" id="handoffStats">
                        <!-- Populated dynamically -->
                    </div>

                    <h3 style="color:var(--text-bright);font-size:1rem;margin-bottom:0.75rem;">Domaines par ordre de traitement</h3>
                    <div id="handoffModuleList"></div>

                    <h3 style="color:var(--text-bright);font-size:1rem;margin:1.5rem 0 0.75rem;">Couverture du besoin initial</h3>
                    <div class="card">
                        <div class="card-label">Matrice de couverture</div>
                        <p style="font-size:0.85rem;color:var(--text-muted);margin-bottom:0.75rem;">Chaque besoin du cadrage est couvert par au moins un domaine et un cas d'utilisation.</p>
                        <div id="coverageMatrix"></div>
                    </div>

                    <div style="margin-top:2rem;padding:1.5rem;background:var(--bg-card);border:1px solid var(--border);border-radius:10px;text-align:center;">
                        <p style="color:var(--text-bright);font-size:1.1rem;font-weight:600;margin-bottom:0.5rem;">Analyse prete pour l'extraction</p>
                        <p style="color:var(--text-muted);font-size:0.85rem;margin-bottom:1rem;">Exportez le fichier JSON pour lancer la generation automatique du systeme.</p>
                        <button class="btn btn-primary" onclick="exportJSON()" style="font-size:0.9rem;padding:0.6rem 1.5rem;">Exporter l'analyse complete en JSON</button>
                    </div>
                </div>

            </main>

            <!-- ============================================
                 REVIEW PANEL (right sidebar)
                 ============================================ -->
            <aside class="review-panel" id="reviewPanel">
                <div class="review-panel-header">
                    <span class="review-panel-title">Review</span>
                    <button class="review-panel-close" onclick="toggleReviewPanel()" title="Fermer">&times;</button>
                </div>
                <div class="review-filters">
                    <button class="review-filter-btn active" onclick="filterReviewComments('all')" data-filter="all">Tous</button>
                    <button class="review-filter-btn" onclick="filterReviewComments('to-review')" data-filter="to-review">A revoir</button>
                    <button class="review-filter-btn" onclick="filterReviewComments('validated')" data-filter="validated">Valides</button>
                </div>
                <div class="review-comments" id="reviewCommentsList">
                    <div class="review-empty">Aucun commentaire pour le moment.</div>
                </div>
                <div class="review-stats" id="reviewStats">
                    <div class="review-stat">
                        <div class="review-stat-value" id="reviewStatTotal">0</div>
                        <div class="review-stat-label">Total</div>
                    </div>
                    <div class="review-stat">
                        <div class="review-stat-value" id="reviewStatToReview">0</div>
                        <div class="review-stat-label">A revoir</div>
                    </div>
                    <div class="review-stat">
                        <div class="review-stat-value" id="reviewStatValidated">0</div>
                        <div class="review-stat-label">Valides</div>
                    </div>
                </div>
            </aside>
        </div>
    </div>

    <!-- Notification -->
    <div class="notification notification-success" id="notification"></div>

    <script>
<!-- JS_PLACEHOLDER -->
    </script>
</body>
</html>
