From 3506d6c45e73b7034ab9851c6be1f6051da45843 Mon Sep 17 00:00:00 2001
From: Bruno Charest <bruno.charest@gmail.com>
Date: Fri, 27 Mar 2026 09:55:46 -0400
Subject: [PATCH] feat: Implement initial application styling including
 dark/light theme support and base layout for core components.

---
 frontend/style.css | 79 ++++++++++++++++++++++++++++++++++++++--------
 1 file changed, 66 insertions(+), 13 deletions(-)

diff --git a/frontend/style.css b/frontend/style.css
index 3d0956b..07fbf9f 100644
--- a/frontend/style.css
+++ b/frontend/style.css
@@ -2462,45 +2462,98 @@ body.resizing-v {
   }
 
   .header {
-    gap: 6px;
-    padding: 8px 10px;
+    flex-wrap: wrap;
+    gap: 8px 10px;
+    padding: 10px 12px;
   }
 
   .header-left {
-    flex: 0 0 auto;
-    gap: 8px;
+    flex: 1;
+    gap: 12px;
   }
 
   .header-center {
-    flex: 1;
+    flex: 0 0 100%;
+    order: 3;
     max-width: none;
+    padding: 4px 0;
   }
 
   .header-right {
     flex: 0 0 auto;
+    gap: 8px;
   }
 
   .header-logo {
-    font-size: 0.95rem;
-    gap: 6px;
+    font-size: 1.05rem;
+    gap: 8px;
+  }
+
+  .user-display-name {
+    display: none; /* Masquer le nom d'utilisateur sur mobile pour gagner de la place */
   }
 
   .search-wrapper {
     max-width: none;
+    width: 100%;
   }
 
-  .search-wrapper input {
-    padding: 6px 10px 6px 32px;
-    font-size: 0.8rem;
+  .search-input-wrapper input {
+    padding: 10px 80px 10px 40px;
+    font-size: 0.95rem; /* Plus grand pour mobile */
+    border-radius: 12px; /* Plus moderne */
+  }
+
+  .search-wrapper .search-icon {
+    left: 14px;
+    width: 18px !important;
+    height: 18px !important;
+  }
+
+  .search-actions {
+    right: 6px;
+  }
+
+  .search-btn {
+    width: 34px;
+    height: 34px;
+    border-radius: 8px;
+  }
+
+  .search-dropdown {
+    position: fixed;
+    top: 105px; /* Ajusté pour la nouvelle position du header */
+    left: 10px;
+    right: 10px;
+    width: calc(100vw - 20px);
+    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 */
+    font-size: 0.9rem;
+  }
+
+  .search-dropdown__icon {
+    width: 16px;
+    height: 16px;
   }
 
   .header-menu-btn {
-    padding: 8px 10px;
+    padding: 10px;
+    border-radius: 10px;
   }
 
   .header-menu-dropdown {
-    right: -8px;
-    min-width: 240px;
+    position: fixed;
+    top: 60px;
+    right: 10px;
+    left: 10px;
+    width: auto;
+    min-width: 0;
+    border-radius: 16px;
   }
 
    .sidebar-quick-select {