main

index.html

@@ -88,6 +88,15 @@
             width: 100%;
         }
 
+        .btn-secondary {
+            background-color: #9ca3af;
+            color: white;
+        }
+
+        .btn-secondary:hover {
+            background-color: #6b7280;
+        }
+
         .btn-success {
             background-color: #16a34a;
             color: white;
@@ -382,7 +391,7 @@
         <div class="modal-content">
             <h3 id="modalTitle">Définitions</h3>
             <div id="definitionList" class="definition-list"></div>
-            <button class="btn-primary" onclick="closeModal()">Fermer</button>
+            <button class="btn-secondary" onclick="closeModal()">Fermer</button>
         </div>
     </div>
 
@@ -1069,6 +1078,15 @@
             if (e.ctrlKey || e.altKey || e.metaKey) return;
             if (document.getElementById('gridScreen').style.display === 'none') return;
             
+            if (e.key === 'Escape') {
+                e.preventDefault();
+                const modal = document.getElementById('definitionModal');
+                if (modal.classList.contains('show')) {
+                    closeModal();
+                }
+                return;
+            }
+
             // If modal is open, do not interact with grid via keyboard
             const modal = document.getElementById('definitionModal');
             if (modal.classList.contains('show')) return;
@@ -1202,6 +1220,8 @@
                 renderGrid();
             }
         });
+
+
     </script>
 </body>
 </html>