                <!-- 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>
