Refine mobile styles and improve search, sidebar, and layout

frontend/style.css

@@ -2754,47 +2754,46 @@ body.resizing-v {
   }
 
   .search-input-wrapper input {
-    padding: 10px 80px 10px 40px;
+    padding: 10px 40px 10px 40px;
-    font-size: 0.95rem; /* Plus grand pour mobile */
+    font-size: 1rem;
-    border-radius: 12px; /* Plus moderne */
+    border-radius: 12px;
   }
 
   .search-wrapper .search-icon {
     left: 14px;
+    top: 14px;
     width: 18px !important;
     height: 18px !important;
   }
 
-  .search-actions {
+  /* Mobile: hide advanced search toggles by default, show only clear */
-    gap: 2px;
+  .search-actions .tog,
-  }
+  .search-actions .icon-only:not(#search-clear-btn),
-
+  .search-actions .search-sep,
-  .search-btn {
+  .search-actions .search-count { display: none; }
-    min-width: 28px;
+  .search-actions { gap: 0; }
-    height: 28px;
+  .search-actions .search-btn#search-clear-btn { display: flex; }
-    font-size: 0.65rem;
-    padding: 0 3px;
-  }
 
   .search-dropdown {
     position: fixed;
-    top: 105px; /* Ajusté pour la nouvelle position du header */
+    top: 100px;
-    left: 10px;
+    left: 8px;
-    right: 10px;
+    right: 8px;
-    width: calc(100vw - 20px);
+    width: calc(100vw - 16px);
     max-height: calc(100vh - 120px);
     border-radius: 12px;
     box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
   }
 
   .search-dropdown__item {
-    padding: 12px 16px; /* Plus d'espace pour le tactile */
+    padding: 14px 16px;
-    font-size: 0.9rem;
+    font-size: 0.95rem;
   }
 
   .search-dropdown__icon {
-    width: 16px;
+    width: 18px;
-    height: 16px;
+    height: 18px;
+    margin-right: 8px;
   }
 
   .header-menu-btn {
@@ -2855,6 +2854,16 @@ body.resizing-v {
     box-shadow: 4px 0 20px rgba(0, 0, 0, 0.3);
   }
 
+  /* Mobile sidebar overlay */
+  .sidebar-overlay {
+    display: none;
+    position: fixed;
+    inset: 0;
+    background: rgba(0,0,0,0.4);
+    z-index: 199;
+  }
+  .sidebar-overlay.active { display: block; }
+
   /* Right Sidebar handling on mobile */
   .right-sidebar {
     position: fixed;
@@ -2925,15 +2934,102 @@ body.resizing-v {
   }
 
   .content-area {
-    padding: 16px 12px 60px;
+    padding: 12px 8px 24px;
+    width: 100%;
   }
 
   .file-title {
-    font-size: 1.2rem;
+    font-size: 1.15rem;
   }
 
   .file-actions {
     flex-wrap: wrap;
+    gap: 4px;
+  }
+
+  .file-actions .btn-action {
+    padding: 6px 8px;
+    font-size: 0.75rem;
+  }
+
+  /* Full-width search results */
+  .search-result-item {
+    padding: 12px 14px;
+    border-radius: 8px;
+    margin-bottom: 8px;
+  }
+
+  .search-result-title {
+    font-size: 0.9rem;
+    padding-right: 40px;
+  }
+
+  .search-result-ext {
+    top: 6px;
+    right: 8px;
+    font-size: 0.6rem;
+  }
+
+  .search-results-header {
+    flex-wrap: wrap;
+    gap: 6px;
+  }
+
+  /* Full-width dashboard */
+  .dashboard-stats-grid {
+    grid-template-columns: repeat(2, 1fr);
+    gap: 8px;
+  }
+
+  .stat-card {
+    padding: 12px 8px;
+  }
+
+  .dashboard-tab {
+    padding: 8px 8px;
+    font-size: 0.7rem;
+    gap: 3px;
+  }
+
+  .dashboard-tab i, .dashboard-tab svg {
+    width: 12px !important;
+    height: 12px !important;
+  }
+
+  .breadcrumb {
+    font-size: 0.75rem;
+    flex-wrap: wrap;
+  }
+
+  /* Mobile tab bar */
+  .tab-bar {
+    padding: 0 4px;
+  }
+  .tab-item {
+    padding: 6px 10px;
+    font-size: 0.7rem;
+  }
+  .tab-item .tab-name { max-width: 80px; }
+  .tab-item .tab-close { opacity: 0.6; width: 14px; height: 14px; }
+
+  .md-content {
+    padding: 0 4px;
+  }
+
+  .md-content h1 { font-size: 1.4rem; }
+  .md-content h2 { font-size: 1.15rem; }
+  .md-content h3 { font-size: 1rem; }
+
+  .md-content pre {
+    margin: 8px -4px;
+    border-radius: 6px;
+    padding: 10px 12px;
+    font-size: 0.8rem;
+  }
+
+  /* Full-width content wrapper */
+  .content-wrapper {
+    margin-left: 0 !important;
   }
 }