UI: fix drawer display with backdrop and auto-close on view switch

app.js

@@ -46,6 +46,7 @@ const toolsCloseBtn = document.getElementById("toolsCloseBtn");
 const gamesDrawer = document.getElementById("gamesDrawer");
 const gamesToggleBtn = document.getElementById("gamesToggleBtn");
 const gamesCloseBtn = document.getElementById("gamesCloseBtn");
+const drawerBackdrop = document.getElementById("drawerBackdrop");
 const totalGamesCount = document.getElementById("totalGamesCount");
 const totalGamesValue = document.getElementById("totalGamesValue");
 const migrateBtn = document.getElementById("migrateBtn");
@@ -151,19 +152,23 @@ coverFileInput.addEventListener("change", async (event) => {
 toolsToggleBtn.addEventListener("click", () => {
   gamesDrawer.classList.remove("open");
   toolsDrawer.classList.toggle("open");
+  syncDrawersUi();
 });
 
 toolsCloseBtn.addEventListener("click", () => {
   toolsDrawer.classList.remove("open");
+  syncDrawersUi();
 });
 
 gamesToggleBtn.addEventListener("click", () => {
   toolsDrawer.classList.remove("open");
   gamesDrawer.classList.toggle("open");
+  syncDrawersUi();
 });
 
 gamesCloseBtn.addEventListener("click", () => {
   gamesDrawer.classList.remove("open");
+  syncDrawersUi();
 });
 
 document.addEventListener("click", (event) => {
@@ -182,18 +187,28 @@ document.addEventListener("click", (event) => {
   }
   toolsDrawer.classList.remove("open");
   gamesDrawer.classList.remove("open");
+  syncDrawersUi();
 });
 
 document.addEventListener("keydown", (event) => {
   if (event.key === "Escape") {
     toolsDrawer.classList.remove("open");
     gamesDrawer.classList.remove("open");
+    syncDrawersUi();
     if (scannerRunning) {
       stopScanner("Camera arretee.");
     }
   }
 });
 
+if (drawerBackdrop) {
+  drawerBackdrop.addEventListener("click", () => {
+    toolsDrawer.classList.remove("open");
+    gamesDrawer.classList.remove("open");
+    syncDrawersUi();
+  });
+}
+
 googleConnectBtn.addEventListener("click", async () => {
   try {
     const payload = await apiRequest("/api/google/connect-url");
@@ -922,9 +937,20 @@ function setCurrentView(view) {
   showLoanedOnly = view === "loans";
   resetPaging();
   selectedGameIds.clear();
+  toolsDrawer.classList.remove("open");
+  gamesDrawer.classList.remove("open");
+  syncDrawersUi();
   render();
 }
 
+function syncDrawersUi() {
+  if (!drawerBackdrop) {
+    return;
+  }
+  const anyDrawerOpen = toolsDrawer.classList.contains("open") || gamesDrawer.classList.contains("open");
+  drawerBackdrop.classList.toggle("hidden", !anyDrawerOpen);
+}
+
 function renderViewChrome() {
   const isStats = currentView === "stats";
   const isLoans = currentView === "loans";

index.html

@@ -26,6 +26,7 @@
       </nav>
     </header>
     <button id="gamesToggleBtn" type="button" class="games-toggle-btn">Jeux</button>
+    <div id="drawerBackdrop" class="drawer-backdrop hidden" aria-hidden="true"></div>
     <aside id="toolsDrawer" class="tools-drawer" aria-label="Menu outils">
       <div class="tools-header">
         <h2>Outils</h2>

styles.css

@@ -108,6 +108,13 @@ body {
   transform: translateX(0);
 }
 
+.drawer-backdrop {
+  position: fixed;
+  inset: 0;
+  background: rgba(6, 12, 22, 0.42);
+  z-index: 35;
+}
+
 .games-drawer {
   position: fixed;
   top: 0;