Improve layout responsiveness by hiding horizontal scrollbars

Adjust CSS in layout components and global styles to prevent horizontal overflow and hide scrollbars across the application, ensuring a cleaner user interface, especially on smaller screens.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: d43bd811-9372-45a7-8ac9-4a954c0538e1
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/1957c339-2757-4d1f-8e92-e9f71a1ce58e/d43bd811-9372-45a7-8ac9-4a954c0538e1/IhbIRSa

client/src/index.css

@@ -59,10 +59,16 @@
   * {
     @apply border-border;
   }
-
-  body {
+  
+  html, body {
     @apply font-sans antialiased bg-surface text-foreground;
-    overflow-x: hidden;
+    overflow-x: hidden !important;
+    max-width: 100vw;
+  }
+  
+  #root {
+    overflow-x: hidden !important;
+    max-width: 100vw;
   }
 }
 
@@ -109,6 +115,24 @@
     display: none;
   }
   
+  /* Solution simple et directe pour masquer l'ascenseur horizontal */
+  ::-webkit-scrollbar:horizontal {
+    display: none !important;
+  }
+  
+  html {
+    overflow-x: hidden !important;
+    scrollbar-width: none;
+  }
+  
+  body {
+    overflow-x: hidden !important;
+  }
+  
+  #root {
+    overflow-x: hidden !important;
+  }
+  
   .bg-secondary {
     background-color: var(--secondary);
   }