From 716b32e4edd0e8f544a51cf985d517e9c62281a9 Mon Sep 17 00:00:00 2001
From: KONE SOREL <skone@ebene.info>
Date: Mon, 5 Jan 2026 11:48:06 +0000
Subject: [PATCH] f

---
 Bootstrap_new/css/style_office.css | 22 ++++++++++++++++++++++
 Vue/gabarit.php                    | 29 +++++++++++++++++------------
 2 files changed, 39 insertions(+), 12 deletions(-)

diff --git a/Bootstrap_new/css/style_office.css b/Bootstrap_new/css/style_office.css
index 363ef1f..777fcab 100644
--- a/Bootstrap_new/css/style_office.css
+++ b/Bootstrap_new/css/style_office.css
@@ -352,6 +352,28 @@ body {
     background: #97999B;
 }
 
+/* État fermé via body.sidebar-collapsed */
+body.sidebar-collapsed .app-sidebar {
+  width: var(--sidebar-collapsed);
+}
+
+body.sidebar-collapsed .app-main {
+  margin-left: var(--sidebar-collapsed);
+}
+
+body.sidebar-collapsed .nav-bar {
+  left: var(--sidebar-collapsed);
+}
+
+/* Accessibilité et clickabilité du bouton */
+.toggle-sidebar-btn {
+  cursor: pointer;
+}
+.toggle-sidebar-btn[role="button"] {
+  outline: none;
+}
+
+
 /* Content card */
 .content-card {
     background: var(--office-card);
diff --git a/Vue/gabarit.php b/Vue/gabarit.php
index 961a3ea..e621172 100755
--- a/Vue/gabarit.php
+++ b/Vue/gabarit.php
@@ -123,7 +123,7 @@ $photoAssureCrypte = $_SESSION['photoAssureCrypte'];
         <link rel="manifest" href="<?= $racineWeb ?>manifest.json">
         
         <!-- 4. VOS STYLES PERSONNALISÉS (en dernier pour qu'ils dominent) -->
-        <link href="<?= $racineWeb ?>Bootstrap_new/css/style_office.css?ver=2026.01.05.01" rel="stylesheet">
+        <link href="<?= $racineWeb ?>Bootstrap_new/css/style_office.css?ver=2026.01.05.03" rel="stylesheet">
         <link href="<?= $racineWeb ?>Bootstrap_new/css/ux_enhancements.css?ver=2025.12.21.02" rel="stylesheet">
 
         <!-- ============================================
@@ -754,20 +754,25 @@ $photoAssureCrypte = $_SESSION['photoAssureCrypte'];
         <script>
             document.addEventListener("DOMContentLoaded", function () {
                 const toggleBtn = document.querySelector(".toggle-sidebar-btn");
-                const sidebar   = document.querySelector(".app-sidebar");
-                const main      = document.querySelector(".app-main");
-                const navBar    = document.querySelector(".nav-bar");
+                if (!toggleBtn) {
+                    console.warn("Toggle button .toggle-sidebar-btn introuvable");
+                    return;
+                }
 
-                toggleBtn.addEventListener("click", function () {
-                    // Toggle sidebar
-                    sidebar.classList.toggle("collapsed");
+                // Rendez le bouton accessible aux clics clavier
+                toggleBtn.setAttribute("role", "button");
+                toggleBtn.setAttribute("tabindex", "0");
+                toggleBtn.setAttribute("aria-label", "Basculer le menu latéral");
 
-                    // Ajuster le main
-                    main.classList.toggle("collapsed");
+                const toggle = () => {
+                    document.body.classList.toggle("sidebar-collapsed");
+                };
 
-                    // Ajuster la nav-bar si elle existe
-                    if (navBar) {
-                        navBar.classList.toggle("collapsed");
+                toggleBtn.addEventListener("click", toggle);
+                toggleBtn.addEventListener("keydown", (e) => {
+                    if (e.key === "Enter" || e.key === " ") {
+                    e.preventDefault();
+                    toggle();
                     }
                 });
             });