refactor(ui) : improve styling, layout and responsive across all components

Rework CSS theme (app.css), navbar layout, dashboard page, machine detail,
catalog pages, and various form/display components for better consistency
and mobile responsiveness.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

app/components/layout/AppNavbar.vue

@@ -1,18 +1,18 @@
 <template>
-  <div class="navbar bg-base-100 shadow-lg">
+  <div class="navbar navbar-glass sticky top-0 z-50 px-4 lg:px-6">
     <div class="navbar-start">
       <!-- Mobile hamburger menu -->
       <div class="dropdown">
-        <div tabindex="0" role="button" class="btn btn-ghost lg:hidden">
+        <div tabindex="0" role="button" class="btn btn-ghost btn-sm lg:hidden">
           <IconLucideMenu class="w-5 h-5" aria-hidden="true" />
         </div>
         <ul
           tabindex="0"
-          class="menu menu-sm dropdown-content mt-3 z-[1] p-2 shadow bg-base-100 rounded-box w-52"
+          class="menu menu-sm dropdown-content mt-3 z-[1] p-3 shadow-lg bg-base-100 rounded-xl w-60 border border-base-300/50"
         >
           <li class="pt-1 pb-2 lg:hidden">
             <button
-              class="w-full flex items-center gap-2 rounded-md px-2 py-1 transition-colors text-base-content hover:bg-primary/10 hover:text-primary"
+              class="w-full flex items-center gap-2 rounded-lg px-3 py-2 transition-colors text-base-content/70 hover:bg-primary/8 hover:text-primary"
               @click="$emit('open-settings')"
             >
               <IconLucideSettings class="w-4 h-4" aria-hidden="true" />
@@ -24,7 +24,7 @@
           <li v-for="link in simpleLinks" :key="link.to">
             <NuxtLink
               :to="link.to"
-              class="rounded-md px-2 py-1 transition-colors flex items-center gap-2"
+              class="rounded-lg px-3 py-2 transition-all flex items-center gap-2"
               :class="linkClass(link)"
             >
               <component :is="link.icon" v-if="link.icon" class="w-4 h-4" aria-hidden="true" />
@@ -40,7 +40,7 @@
           >
             <button
               type="button"
-              class="flex w-full items-center justify-between rounded-md px-2 py-1 text-left transition-colors"
+              class="flex w-full items-center justify-between rounded-lg px-3 py-2 text-left transition-all"
               :class="groupClass(group)"
               :aria-expanded="openDropdown === group.id + '-mobile'"
               @click="toggleDropdown(group.id + '-mobile')"
@@ -52,7 +52,7 @@
                 {{ group.label }}
               </span>
               <IconLucideChevronRight
-                class="h-4 w-4 transition-transform"
+                class="h-3.5 w-3.5 transition-transform duration-200"
                 :class="openDropdown === group.id + '-mobile' ? 'rotate-90' : ''"
                 aria-hidden="true"
               />
@@ -60,12 +60,12 @@
             <Transition name="nav-dropdown-mobile">
               <ul
                 v-if="openDropdown === group.id + '-mobile'"
-                class="mt-2 space-y-1 rounded-md border border-base-200 bg-base-100 p-2 shadow-sm overflow-hidden"
+                class="mt-1 space-y-0.5 rounded-lg bg-base-200/50 p-2 overflow-hidden"
               >
                 <li v-for="child in group.children" :key="child.to">
                   <NuxtLink
                     :to="child.to"
-                    class="rounded-md px-2 py-1 transition-colors block"
+                    class="rounded-md px-3 py-1.5 transition-colors block text-sm"
                     :class="childLinkClass(child)"
                   >
                     {{ child.label }}
@@ -81,30 +81,28 @@
       </div>
 
       <!-- Logo -->
-      <div class="flex items-center space-x-3">
-        <div class="avatar">
-          <div class="w-14">
-            <img
-              :src="logoSrc"
-              alt="Logo Malio"
-              class="h-full w-full object-contain"
-            />
-          </div>
+      <NuxtLink to="/" class="flex items-center gap-2.5 group">
+        <div class="w-9 h-9 rounded-lg overflow-hidden ring-1 ring-base-300/50 transition-all group-hover:ring-primary/30 group-hover:shadow-md">
+          <img
+            :src="logoSrc"
+            alt="Logo Malio"
+            class="h-full w-full object-contain"
+          />
         </div>
-        <NuxtLink to="/" class="btn btn-ghost text-xl">
+        <span class="text-lg font-bold tracking-tight text-base-content hidden sm:inline" style="font-family: var(--font-heading)">
           Inventory
-        </NuxtLink>
-      </div>
+        </span>
+      </NuxtLink>
     </div>
 
     <!-- Desktop navbar -->
     <div class="navbar-center hidden lg:flex">
-      <ul class="menu menu-horizontal px-1">
+      <ul class="menu menu-horizontal gap-0.5 px-1">
         <!-- Desktop: simple links -->
         <li v-for="link in simpleLinks" :key="link.to">
           <NuxtLink
             :to="link.to"
-            class="transition-colors px-3 py-2 rounded-md flex items-center gap-1.5"
+            class="transition-all px-3 py-2 rounded-lg flex items-center gap-1.5 text-sm font-medium"
             :class="linkClass(link)"
           >
             <component :is="link.icon" v-if="link.icon" class="w-4 h-4" aria-hidden="true" />
@@ -124,7 +122,7 @@
         >
           <button
             type="button"
-            class="inline-flex items-center gap-1.5 rounded-md px-3 py-2 transition-colors"
+            class="inline-flex items-center gap-1.5 rounded-lg px-3 py-2 transition-all text-sm font-medium"
             :class="groupClass(group)"
             :aria-expanded="openDropdown === group.id + '-desktop'"
             @click="toggleDropdown(group.id + '-desktop')"
@@ -133,21 +131,21 @@
           >
             <component :is="group.icon" v-if="group.icon" class="w-4 h-4" aria-hidden="true" />
             {{ group.label }}
-            <IconLucideChevronRight
-              class="h-4 w-4 transition-transform"
-              :class="openDropdown === group.id + '-desktop' ? 'rotate-90' : ''"
+            <IconLucideChevronDown
+              class="h-3.5 w-3.5 transition-transform duration-200"
+              :class="openDropdown === group.id + '-desktop' ? 'rotate-180' : ''"
               aria-hidden="true"
             />
           </button>
           <Transition name="nav-dropdown-desktop">
             <ul
               v-if="openDropdown === group.id + '-desktop'"
-              class="absolute left-0 top-full mt-2 w-64 rounded-lg border border-base-200 bg-base-100 p-2 shadow-lg z-50"
+              class="absolute left-0 top-full mt-1.5 w-56 rounded-xl border border-base-300/50 bg-base-100 p-1.5 shadow-lg shadow-base-content/5 z-50"
             >
               <li v-for="child in group.children" :key="child.to">
                 <NuxtLink
                   :to="child.to"
-                  class="block rounded-md px-2 py-1 transition-colors"
+                  class="block rounded-lg px-3 py-2 transition-all text-sm"
                   :class="childLinkClass(child)"
                 >
                   {{ child.label }}
@@ -164,13 +162,13 @@
 
     <!-- Navbar end -->
     <div class="navbar-end">
-      <div class="flex items-center gap-2">
+      <div class="flex items-center gap-1.5">
         <button
-          class="btn btn-ghost btn-circle hidden lg:inline-flex"
+          class="btn btn-ghost btn-sm btn-circle hidden lg:inline-flex text-base-content/50 hover:text-base-content"
           title="Paramètres d'affichage"
           @click="$emit('open-settings')"
         >
-          <IconLucideSettings class="w-5 h-5" aria-hidden="true" />
+          <IconLucideSettings class="w-4 h-4" aria-hidden="true" />
         </button>
 
         <ClientOnly>
@@ -178,7 +176,7 @@
             <div
               tabindex="0"
               role="button"
-              class="btn btn-ghost btn-circle avatar placeholder indicator"
+              class="btn btn-ghost btn-circle btn-sm avatar placeholder indicator"
             >
               <span
                 v-if="unresolvedCount > 0"
@@ -187,47 +185,49 @@
                 {{ unresolvedCount }}
               </span>
               <div
-                class="bg-secondary text-secondary-content rounded-full w-10 h-10 grid place-items-center"
+                class="bg-primary text-primary-content rounded-full w-8 h-8 grid place-items-center"
               >
-                <span
-                  class="flex h-full w-full items-center justify-center text-sm font-semibold leading-none tracking-tight"
-                >
+                <span class="text-xs font-semibold leading-none tracking-tight">
                   {{ activeProfileInitials }}
                 </span>
               </div>
             </div>
             <ul
               tabindex="0"
-              class="menu dropdown-content mt-3 p-2 shadow bg-base-100 rounded-box w-64"
+              class="menu dropdown-content mt-3 p-2 shadow-lg bg-base-100 rounded-xl w-60 border border-base-300/50"
             >
-              <li class="px-2 py-1 text-sm text-base-content/70">
-                Connecté en tant que<br />
-                <span class="font-semibold text-base-content">{{ activeProfileLabel }}</span>
-                <span class="badge badge-sm" :class="roleBadgeClass">{{ roleLabel }}</span>
+              <li class="px-3 py-2">
+                <div class="flex flex-col gap-1 pointer-events-none">
+                  <span class="text-xs text-base-content/50">Connecté en tant que</span>
+                  <span class="font-semibold text-sm text-base-content">{{ activeProfileLabel }}</span>
+                  <span class="badge badge-sm" :class="roleBadgeClass">{{ roleLabel }}</span>
+                </div>
               </li>
+              <div class="divider my-0.5 px-2" />
               <li v-if="isAdmin">
-                <NuxtLink to="/admin" class="justify-between">
+                <NuxtLink to="/admin" class="rounded-lg justify-between text-sm">
                   Administration
-                  <IconLucideChevronRight class="w-4 h-4" aria-hidden="true" />
+                  <IconLucideChevronRight class="w-3.5 h-3.5 text-base-content/30" aria-hidden="true" />
                 </NuxtLink>
               </li>
               <li>
-                <NuxtLink to="/comments" class="justify-between">
+                <NuxtLink to="/comments" class="rounded-lg justify-between text-sm">
                   Commentaires
                   <span v-if="unresolvedCount > 0" class="badge badge-warning badge-xs">
                     {{ unresolvedCount }}
                   </span>
-                  <IconLucideChevronRight v-else class="w-4 h-4" aria-hidden="true" />
+                  <IconLucideChevronRight v-else class="w-3.5 h-3.5 text-base-content/30" aria-hidden="true" />
                 </NuxtLink>
               </li>
+              <div class="divider my-0.5 px-2" />
               <li>
                 <button
                   type="button"
-                  class="text-error justify-between"
+                  class="rounded-lg text-error/80 hover:text-error hover:bg-error/5 justify-between text-sm"
                   @click="$emit('logout')"
                 >
                   Déconnexion
-                  <IconLucideLogOut class="w-4 h-4" aria-hidden="true" />
+                  <IconLucideLogOut class="w-3.5 h-3.5" aria-hidden="true" />
                 </button>
               </li>
             </ul>
@@ -248,6 +248,7 @@ import { useComments } from '~/composables/useComments'
 import IconLucideMenu from '~icons/lucide/menu'
 import IconLucideSettings from '~icons/lucide/settings'
 import IconLucideChevronRight from '~icons/lucide/chevron-right'
+import IconLucideChevronDown from '~icons/lucide/chevron-down'
 import IconLucideLogOut from '~icons/lucide/log-out'
 import IconLucideLayoutDashboard from '~icons/lucide/layout-dashboard'
 import IconLucideFactory from '~icons/lucide/factory'
@@ -365,19 +366,19 @@ const isGroupActive = (group: NavGroup) => {
 const linkClass = (link: NavLink) => {
   return isActive(link.to)
     ? 'bg-primary text-primary-content font-semibold shadow-sm'
-    : 'text-base-content hover:bg-primary/10 hover:text-primary'
+    : 'text-base-content/70 hover:bg-base-content/5 hover:text-base-content'
 }
 
 const groupClass = (group: NavGroup) => {
   return isGroupActive(group)
     ? 'bg-primary text-primary-content font-semibold shadow-sm'
-    : 'text-base-content hover:bg-primary/10 hover:text-primary'
+    : 'text-base-content/70 hover:bg-base-content/5 hover:text-base-content'
 }
 
 const childLinkClass = (child: NavLink) => {
   return isActive(child.to)
     ? 'bg-primary/10 text-primary font-semibold'
-    : 'text-base-content hover:bg-primary/10 hover:text-primary'
+    : 'text-base-content/70 hover:bg-base-content/5 hover:text-base-content'
 }
 
 const roleLabel = computed(() => {
@@ -418,12 +419,12 @@ const activeProfileInitials = computed(() => {
 .nav-dropdown-desktop-enter-from,
 .nav-dropdown-desktop-leave-to {
   opacity: 0;
-  transform: translateY(0.25rem);
+  transform: translateY(4px) scale(0.98);
 }
 .nav-dropdown-desktop-enter-to,
 .nav-dropdown-desktop-leave-from {
   opacity: 1;
-  transform: translateY(0);
+  transform: translateY(0) scale(1);
 }
 
 .nav-dropdown-mobile-enter-active,