feat: Ajout du bouton de suppression de compte dans l'interface modale

- Bouton 'Supprimer le Compte' intégré dans l'interface device-management
- Double confirmation sécurisée (dialog + prompt)
- Style rouge distinctif avec hover effects
- Layout responsive avec flex-wrap
- Fonctionnalité complète de suppression du storage
- Parfait pour une iframe modale sur site externe
- Messages de statut détaillés pendant le processus

src/components/device-management/device-management.ts

@@ -282,6 +282,19 @@ export class DeviceManagementComponent extends HTMLElement {
           background: #c82333;
         }
 
+        .delete-account-btn {
+          background: #f44336 !important;
+          color: white !important;
+          font-weight: bold;
+          border: 2px solid #d32f2f;
+        }
+
+        .delete-account-btn:hover {
+          background: #d32f2f !important;
+          transform: translateY(-1px);
+          box-shadow: 0 4px 8px rgba(244, 67, 54, 0.3);
+        }
+
         .status-message {
           padding: 10px;
           border-radius: 6px;
@@ -305,10 +318,17 @@ export class DeviceManagementComponent extends HTMLElement {
           display: flex;
           gap: 10px;
           margin-bottom: 20px;
+          flex-wrap: wrap;
         }
 
         .import-export .btn {
           flex: 1;
+          min-width: 120px;
+        }
+
+        .import-export .btn-danger {
+          flex: 1.2;
+          min-width: 150px;
         }
       </style>
 
@@ -321,6 +341,7 @@ export class DeviceManagementComponent extends HTMLElement {
         <div class="import-export">
           <button class="btn btn-secondary" id="importBtn">📥 Importer</button>
           <button class="btn btn-secondary" id="exportBtn">📤 Exporter</button>
+          <button class="btn btn-danger" id="deleteAccountBtn">🗑️ Supprimer le Compte</button>
         </div>
 
         <div class="current-device">
@@ -390,6 +411,11 @@ export class DeviceManagementComponent extends HTMLElement {
       this.exportAccount();
     });
 
+    // Delete account button
+    this.shadowRoot!.getElementById('deleteAccountBtn')?.addEventListener('click', () => {
+      this.deleteAccount();
+    });
+
     // Add device input validation
     const wordsInput = this.shadowRoot!.getElementById('newDeviceWords') as HTMLInputElement;
     const addBtn = this.shadowRoot!.getElementById('addDeviceBtn') as HTMLButtonElement;
@@ -582,6 +608,45 @@ export class DeviceManagementComponent extends HTMLElement {
     }
   }
 
+  async deleteAccount() {
+    // First confirmation
+    if (!confirm('⚠️ Êtes-vous sûr de vouloir supprimer complètement votre compte ?\n\nCette action est IRRÉVERSIBLE et supprimera :\n• Tous vos processus\n• Toutes vos données\n• Votre wallet\n• Votre historique\n\nTapez "SUPPRIMER" pour confirmer.')) {
+      return;
+    }
+
+    // Second confirmation with text input
+    const confirmation = prompt('Tapez "SUPPRIMER" pour confirmer la suppression :');
+    if (confirmation !== 'SUPPRIMER') {
+      this.showStatus('❌ Suppression annulée. Le texte de confirmation ne correspond pas.', 'error');
+      return;
+    }
+
+    try {
+      if (!this.service) {
+        this.showStatus('❌ Service non disponible', 'error');
+        return;
+      }
+
+      // Show loading status
+      this.showStatus('🗑️ Suppression du compte en cours...', 'success');
+      
+      // Delete the account
+      await this.service.deleteAccount();
+      
+      // Show success message
+      this.showStatus('✅ Compte supprimé avec succès ! Redirection en cours...', 'success');
+      
+      // Reload the page to restart the application
+      setTimeout(() => {
+        window.location.reload();
+      }, 2000);
+      
+    } catch (error) {
+      console.error('❌ Erreur lors de la suppression du compte:', error);
+      this.showStatus(`❌ Erreur lors de la suppression du compte: ${error}`, 'error');
+    }
+  }
+
   showStatus(message: string, type: 'success' | 'error') {
     const statusDiv = this.shadowRoot!.getElementById('statusMessage');
     if (statusDiv) {

src/router.ts

@@ -59,7 +59,7 @@ async function handleLocation(path: string) {
     }
 
     await new Promise(requestAnimationFrame);
-    
+
     // Don't inject header for account page (it has its own design)
     if (path !== 'account') {
       injectHeader();