delete device mocked ok

public/style/account.css

@@ -427,24 +427,43 @@ body {
 
 /* Style pour la modal de confirmation */
 .confirm-delete-modal {
-    display: none;
     position: fixed;
-    top: 50%;
+    top: 0;
-    left: 50%;
+    left: 0;
-    transform: translate(-50%, -50%);
+    width: 100%;
-    background: white;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.5);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 1000;
+}
+
+.confirm-delete-content {
+    background-color: white;
     padding: 20px;
     border-radius: 8px;
     box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
-    z-index: 1100;
+    max-width: 400px;
+    width: 90%;
     text-align: center;
 }
 
+.confirm-delete-content h3 {
+    margin-top: 0;
+    color: #333;
+}
+
+.confirm-delete-content p {
+    margin: 15px 0;
+    color: #666;
+}
+
 .confirm-delete-buttons {
-    margin-top: 20px;
     display: flex;
     justify-content: center;
     gap: 10px;
+    margin-top: 20px;
 }
 
 .confirm-delete-buttons button {
@@ -452,25 +471,27 @@ body {
     border: none;
     border-radius: 4px;
     cursor: pointer;
+    transition: background-color 0.3s;
 }
 
-.confirm-btn {
+.confirm-delete-buttons .confirm-btn {
     background-color: #dc3545;
     color: white;
 }
 
-.cancel-btn {
+.confirm-delete-buttons .confirm-btn:hover {
+    background-color: #c82333;
+}
+
+.confirm-delete-buttons .cancel-btn {
     background-color: #6c757d;
     color: white;
 }
 
-.delete-account-section {
+.confirm-delete-buttons .cancel-btn:hover {
-    border-top: 1px solid #eee;
+    background-color: #5a6268;
-    padding-top: 15px;
-    margin-top: 15px;
 }
 
-
 /*-------------------------------------- Export--------------------------------------*/
 .export-section {
     margin: 20px 0;

src/pages/account/account.ts

@@ -686,21 +686,53 @@ private deleteRowPairing(button: HTMLButtonElement): void {
         return;
     }
 
+    // Créer la modal de confirmation
+    const modal = document.createElement('div');
+    modal.className = 'confirm-delete-modal';
+    modal.innerHTML = `
+        <div class="confirm-delete-content">
+            <h3>Confirm Deletion</h3>
+            <p>Are you sure you want to delete this device?</p>
+            <div class="confirm-delete-buttons">
+                <button class="cancel-btn">Cancel</button>
+                <button class="confirm-btn">Delete</button>
+            </div>
+        </div>
+    `;
+
+    this.shadowRoot?.appendChild(modal);
+
+    // Gérer les boutons de la modal
+    const confirmBtn = modal.querySelector('.confirm-btn');
+    const cancelBtn = modal.querySelector('.cancel-btn');
+
+    confirmBtn?.addEventListener('click', () => {
+        // Calculer l'index AVANT de supprimer la ligne du DOM
         const index = Array.from(table.children).indexOf(row);
+        const storageKey = STORAGE_KEYS[currentMode];
+        const rows = JSON.parse(localStorage.getItem(storageKey) || '[]');
+        
+        // Supprimer du localStorage
+        if (index > -1) {
+            rows.splice(index, 1);
+            localStorage.setItem(storageKey, JSON.stringify(rows));
+        }
+
+        // Animation et suppression du DOM
         row.style.transition = 'opacity 0.3s, transform 0.3s';
         row.style.opacity = '0';
         row.style.transform = 'translateX(-100%)';
 
         setTimeout(() => {
             row.remove();
-
-        const storageKey = STORAGE_KEYS[currentMode];
-        const rows = JSON.parse(localStorage.getItem(storageKey) || '[]');
-        if (index > -1) {
-            rows.splice(index, 1);
-            localStorage.setItem(storageKey, JSON.stringify(rows));
-        }
         }, 300);
+
+        modal.remove();
+    });
+
+    cancelBtn?.addEventListener('click', () => {
+        modal.remove();
+    });
 }
 
 private editDeviceName(cell: HTMLTableCellElement): void {