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>
2026-03-09 00:14:32 +01:00
parent 6b5eb7bcd6
commit 5b9c4ca09d
38 changed files with 522 additions and 569 deletions
--- a/app/app.vue
+++ b/app/app.vue
@@ -1,11 +1,16 @@
 <template>
-  <div class="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100">
+  <div class="min-h-screen flex flex-col bg-base-200/40">
+    <!-- Subtle dot pattern background -->
+    <div class="fixed inset-0 -z-10 bg-[radial-gradient(oklch(85%_0.02_260)_1px,transparent_1px)] bg-[size:24px_24px] opacity-40" />
+
    <AppNavbar
      @open-settings="displaySettingsOpen = true"
      @logout="handleLogout"
    />

-    <NuxtPage />
+    <main class="flex-1">
+      <NuxtPage :transition="{ name: 'page', mode: 'out-in' }" />
+    </main>

    <ToastContainer />

@@ -17,11 +22,17 @@
      @update-settings="handleSettingsUpdate"
    />

-    <footer class="footer p-4 bg-neutral text-neutral-content">
-      <div class="items-center grid-flow-col">
-        <p>
-          @Malio 2025 · <NuxtLink to="/changelog" class="link link-hover">v{{ appVersion }}</NuxtLink>
+    <footer class="border-t border-base-300/50 bg-base-100/60 backdrop-blur-sm">
+      <div class="container mx-auto flex items-center justify-between px-6 py-3">
+        <p class="text-xs text-base-content/40 font-medium tracking-wide">
+          &copy; Malio {{ new Date().getFullYear() }}
        </p>
+        <NuxtLink
+          to="/changelog"
+          class="text-xs text-base-content/40 hover:text-primary transition-colors font-medium"
+        >
+          v{{ appVersion }}
+        </NuxtLink>
      </div>
    </footer>
  </div>
--- a/app/assets/app.css
+++ b/app/assets/app.css
@@ -1,55 +1,85 @@
+/* ─── Fonts ─── */
+@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,400&display=swap');
+
@import "tailwindcss";
@plugin "daisyui";
+
+/* ─── Theme ─── */
@plugin "daisyui/theme" {
  name: "mytheme";
-  default: true; /* set as default */
-  prefersdark: false; /* set as default dark mode (prefers-color-scheme:dark) */
-  color-scheme: light; /* color of browser-provided UI */
+  default: true;
+  prefersdark: false;
+  color-scheme: light;

-  /* #FBFAFA — gris clair */
-  --color-base-100: oklch(98% 0.003 0);
-  --color-base-200: oklch(94% 0.01 262);
-  --color-base-300: oklch(90% 0.02 262);
-  --color-base-content: oklch(20% 0.03 262);
-  /* #304998 — bleu Malio */
-  --color-primary: oklch(37% 0.15 262);
+  /* Surfaces — warm gray with a hint of blue */
+  --color-base-100: oklch(98.5% 0.004 260);
+  --color-base-200: oklch(95% 0.008 260);
+  --color-base-300: oklch(91% 0.015 260);
+  --color-base-content: oklch(22% 0.025 260);
+
+  /* Primary — Malio blue, slightly richer */
+  --color-primary: oklch(40% 0.16 262);
  --color-primary-content: oklch(98% 0.005 262);
-  /* #A5ACD0 — lavande */
-  --color-secondary: oklch(75% 0.055 270);
-  --color-secondary-content: oklch(20% 0.03 270);
-  /* #ED8521 — orange */
-  --color-accent: oklch(71% 0.17 58);
-  --color-accent-content: oklch(98% 0.005 58);
-  /* neutral dérivé du bleu Malio */
-  --color-neutral: oklch(37% 0.08 262);
-  --color-neutral-content: oklch(98% 0.005 262);
-  --color-info: oklch(55% 0.12 262);
-  --color-info-content: oklch(98% 0.005 262);
-  --color-success: oklch(65% 0.2 145);
-  --color-success-content: oklch(98% 0.005 145);
+
+  /* Secondary — refined lavender */
+  --color-secondary: oklch(72% 0.06 275);
+  --color-secondary-content: oklch(22% 0.03 275);
+
+  /* Accent — warm amber-orange */
+  --color-accent: oklch(72% 0.17 55);
+  --color-accent-content: oklch(20% 0.04 55);
+
+  /* Neutral — deep slate */
+  --color-neutral: oklch(28% 0.04 260);
+  --color-neutral-content: oklch(95% 0.005 260);
+
+  /* Semantic */
+  --color-info: oklch(58% 0.14 255);
+  --color-info-content: oklch(98% 0.005 255);
+  --color-success: oklch(62% 0.19 150);
+  --color-success-content: oklch(98% 0.005 150);
  --color-warning: oklch(78% 0.15 70);
-  --color-warning-content: oklch(20% 0.05 70);
-  --color-error: oklch(60% 0.25 25);
+  --color-warning-content: oklch(22% 0.05 70);
+  --color-error: oklch(58% 0.22 25);
  --color-error-content: oklch(98% 0.005 25);

-  /* border radius */
-  --radius-selector: 1rem;
-  --radius-field: 0.25rem;
-  --radius-box: 0.5rem;
+  /* Geometry */
+  --radius-selector: 0.75rem;
+  --radius-field: 0.375rem;
+  --radius-box: 0.625rem;

-  /* base sizes */
  --size-selector: 0.25rem;
  --size-field: 0.25rem;

-  /* border size */
  --border: 1px;
-
-  /* effects */
  --depth: 1;
  --noise: 0;
 }

-/* Styles pour l'accessibilité et les paramètres d'affichage */
+/* ─── Typography ─── */
+:root {
+  --font-heading: 'Outfit', system-ui, sans-serif;
+  --font-body: 'DM Sans', system-ui, sans-serif;
+}
+
+body {
+  font-family: var(--font-body);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  letter-spacing: -0.01em;
+}
+
+h1, h2, h3, h4, h5, h6,
+.card-title,
+.stat-value,
+.text-2xl,
+.text-3xl,
+.text-4xl {
+  font-family: var(--font-heading);
+  letter-spacing: -0.025em;
+}
+
+/* ─── Density variables ─── */
 :root {
  --spacing-xs: 0.5rem;
  --spacing-sm: 0.75rem;
@@ -58,7 +88,6 @@
  --spacing-xl: 2rem;
 }

-/* Densité compacte */
 .density-compact {
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
@@ -67,7 +96,6 @@
  --spacing-xl: 1.25rem;
 }

-/* Densité confortable (défaut) */
 .density-comfortable {
  --spacing-xs: 0.5rem;
  --spacing-sm: 0.75rem;
@@ -76,7 +104,6 @@
  --spacing-xl: 2rem;
 }

-/* Densité espacée */
 .density-spacious {
  --spacing-xs: 0.75rem;
  --spacing-sm: 1rem;
@@ -85,251 +112,183 @@
  --spacing-xl: 3rem;
 }

-/* Contraste élevé avec DaisyUI */
-.contrast-high .btn {
-  @apply border-2;
-}
+/* ─── High contrast mode ─── */
+.contrast-high .btn { @apply border-2; }
+.contrast-high .input { @apply border-2; }
+.contrast-high .select { @apply border-2; }
+.contrast-high .textarea { @apply border-2; }
+.contrast-high .modal-box { @apply border-2 border-base-content; }

-.contrast-high .input {
-  @apply border-2;
-}
-
-.contrast-high .select {
-  @apply border-2;
-}
-
-.contrast-high .textarea {
-  @apply border-2;
-}
-
-.contrast-high .modal-box {
-  @apply border-2 border-base-content;
-}
-
-/* Amélioration de l'accessibilité */
+/* ─── Accessibility ─── */
@media (prefers-reduced-motion: reduce) {
-  *,
-  *::before,
-  *::after {
+  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
 }

-/* Focus visible pour l'accessibilité */
 *:focus-visible {
-  outline: 2px solid #304998;
+  outline: 2px solid oklch(40% 0.16 262);
  outline-offset: 2px;
 }

-/* Styles pour les boutons de paramètres */
+/* ─── Cards ─── */
+.card {
+  border: 1px solid oklch(91% 0.015 260 / 0.6);
+  transition: box-shadow 0.2s ease, transform 0.2s ease;
+}
+
+.card:hover {
+  box-shadow:
+    0 4px 6px -1px oklch(22% 0.025 260 / 0.06),
+    0 2px 4px -2px oklch(22% 0.025 260 / 0.04);
+}
+
+/* ─── Navbar glass effect ─── */
+.navbar-glass {
+  background: oklch(98.5% 0.004 260 / 0.82);
+  backdrop-filter: blur(12px) saturate(1.5);
+  -webkit-backdrop-filter: blur(12px) saturate(1.5);
+  border-bottom: 1px solid oklch(91% 0.015 260 / 0.5);
+}
+
+/* ─── Buttons ─── */
+.btn {
+  font-family: var(--font-heading);
+  font-weight: 500;
+  letter-spacing: -0.01em;
+  transition: all 0.15s ease;
+}
+
 .btn-circle {
  transition: all 0.2s ease-in-out;
 }
-
 .btn-circle:hover {
  transform: scale(1.05);
 }
-
 .btn-circle:active {
  transform: scale(0.95);
 }

-/* Animation pour le modal */
+/* ─── Inputs ─── */
+.input, .select, .textarea {
+  font-family: var(--font-body);
+  transition: border-color 0.15s ease, box-shadow 0.15s ease;
+}
+
+.input:focus, .select:focus, .textarea:focus {
+  box-shadow: 0 0 0 3px oklch(40% 0.16 262 / 0.1);
+}
+
+/* ─── Tables ─── */
+.table thead th {
+  font-family: var(--font-heading);
+  font-weight: 600;
+  letter-spacing: 0.01em;
+  text-transform: uppercase;
+  font-size: 0.7rem;
+  color: oklch(45% 0.03 260);
+}
+
+.table tbody tr {
+  transition: background-color 0.1s ease;
+}
+
+/* ─── Badges ─── */
+.badge {
+  font-family: var(--font-heading);
+  font-weight: 500;
+  letter-spacing: 0;
+}
+
+/* ─── Stats ─── */
+.stat-title {
+  font-family: var(--font-body);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  font-size: 0.7rem;
+  font-weight: 500;
+  opacity: 0.6;
+}
+
+.stat-value {
+  font-weight: 700;
+}
+
+/* ─── Modals ─── */
 .modal {
-  transition: opacity 0.3s ease-in-out;
-  font-size: 100% !important; /* Force la taille normale pour le modal */
-  transform: none !important; /* Empêche les transformations */
-  scale: 1 !important; /* Force l'échelle à 1 */
+  transition: opacity 0.25s ease;
 }

-.modal.modal-open {
-  animation: modalFadeIn 0.3s ease-in-out;
-}
-
-/* S'assurer que le contenu du modal garde une taille normale */
 .modal-box {
-  font-size: 100% !important;
-  transform: none !important;
-  scale: 1 !important;
-  width: auto !important;
-  max-width: 500px !important;
+  font-family: var(--font-body);
+  border-radius: 0.75rem;
+  border: 1px solid oklch(91% 0.015 260 / 0.5);
 }

-.modal .form-control {
-  font-size: 100% !important;
-  transform: none !important;
+@keyframes modalSlideUp {
+  from { opacity: 0; transform: translateY(0.5rem); }
+  to { opacity: 1; transform: translateY(0); }
 }

-.modal .btn {
-  font-size: 100% !important;
-  transform: none !important;
-  padding: 0.5rem 1rem !important;
-  height: auto !important;
-  min-height: 2.5rem !important;
+.modal.modal-open .modal-box {
+  animation: modalSlideUp 0.25s ease-out;
 }

-.modal .input {
-  font-size: 100% !important;
-  transform: none !important;
-  height: auto !important;
-  min-height: 2.5rem !important;
+/* ─── Page transitions ─── */
+.page-enter-active {
+  transition: opacity 0.2s ease, transform 0.2s ease;
+}
+.page-leave-active {
+  transition: opacity 0.15s ease;
+}
+.page-enter-from {
+  opacity: 0;
+  transform: translateY(4px);
+}
+.page-leave-to {
+  opacity: 0;
 }

-.modal .select {
-  font-size: 100% !important;
-  transform: none !important;
-  height: auto !important;
-  min-height: 2.5rem !important;
+/* ─── Scrollbar styling ─── */
+::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+::-webkit-scrollbar-thumb {
+  background: oklch(75% 0.02 260);
+  border-radius: 3px;
+}
+::-webkit-scrollbar-thumb:hover {
+  background: oklch(60% 0.03 260);
 }

-.modal .textarea {
-  font-size: 100% !important;
-  transform: none !important;
-  min-height: 4rem !important;
-}
+/* ─── Readability ─── */
+.text-sm { line-height: 1.5; }
+.text-xs { line-height: 1.4; }

-.modal .range {
-  font-size: 100% !important;
-  transform: none !important;
-  height: auto !important;
-  min-height: 1.5rem !important;
-}
+/* ─── Adaptive spacing ─── */
+.p-1 { padding: var(--spacing-xs); }
+.p-2 { padding: var(--spacing-sm); }
+.p-3 { padding: var(--spacing-md); }
+.p-4 { padding: var(--spacing-lg); }
+.p-5 { padding: var(--spacing-xl); }

-.modal .label {
-  font-size: 100% !important;
-  transform: none !important;
-}
+.m-1 { margin: var(--spacing-xs); }
+.m-2 { margin: var(--spacing-sm); }
+.m-3 { margin: var(--spacing-md); }
+.m-4 { margin: var(--spacing-lg); }
+.m-5 { margin: var(--spacing-xl); }

-.modal .label-text {
-  font-size: 100% !important;
-  transform: none !important;
-}
-
-.modal .label-text-alt {
-  font-size: 100% !important;
-  transform: none !important;
-}
-
-.modal .checkbox {
-  font-size: 100% !important;
-  transform: none !important;
-  width: 1rem !important;
-  height: 1rem !important;
-}
-
-.modal .text-xs {
-  font-size: 0.75rem !important;
-  transform: none !important;
-}
-
-.modal .text-sm {
-  font-size: 0.875rem !important;
-  transform: none !important;
-}
-
-.modal .text-lg {
-  font-size: 1.125rem !important;
-  transform: none !important;
-}
-
-.modal .font-bold {
-  font-weight: 700 !important;
-  transform: none !important;
-}
-
-.modal .font-medium {
-  font-weight: 500 !important;
-  transform: none !important;
-}
-
-/* Empêcher les héritages de taille */
-.modal * {
-  font-size: inherit !important;
-  transform: none !important;
-  scale: 1 !important;
-}
-
-@keyframes modalFadeIn {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-
-/* Styles pour les contrôles de zoom */
-.range {
-  transition: all 0.2s ease-in-out;
-}
-
-.range::-webkit-slider-thumb {
-  transition: all 0.2s ease-in-out;
-}
-
-.range::-webkit-slider-thumb:hover {
-  transform: scale(1.1);
-}
-
-/* Amélioration de la lisibilité */
-.text-sm {
-  line-height: 1.5;
-}
-
-.text-xs {
-  line-height: 1.4;
-}
-
-/* Espacement adaptatif */
-.p-1 {
-  padding: var(--spacing-xs);
-}
-.p-2 {
-  padding: var(--spacing-sm);
-}
-.p-3 {
-  padding: var(--spacing-md);
-}
-.p-4 {
-  padding: var(--spacing-lg);
-}
-.p-5 {
-  padding: var(--spacing-xl);
-}
-
-.m-1 {
-  margin: var(--spacing-xs);
-}
-.m-2 {
-  margin: var(--spacing-sm);
-}
-.m-3 {
-  margin: var(--spacing-md);
-}
-.m-4 {
-  margin: var(--spacing-lg);
-}
-.m-5 {
-  margin: var(--spacing-xl);
-}
-
-.gap-1 {
-  gap: var(--spacing-xs);
-}
-.gap-2 {
-  gap: var(--spacing-sm);
-}
-.gap-3 {
-  gap: var(--spacing-md);
-}
-.gap-4 {
-  gap: var(--spacing-lg);
-}
-.gap-5 {
-  gap: var(--spacing-xl);
-}
+.gap-1 { gap: var(--spacing-xs); }
+.gap-2 { gap: var(--spacing-sm); }
+.gap-3 { gap: var(--spacing-md); }
+.gap-4 { gap: var(--spacing-lg); }
+.gap-5 { gap: var(--spacing-xl); }

@layer components {
  .form-control .label {
@@ -337,7 +296,6 @@
    padding-bottom: 0;
    margin-right: 15px;
  }
-
  .form-control .label + * {
    margin-top: var(--spacing-xs);
  }
--- a/app/components/ComponentItem.vue
+++ b/app/components/ComponentItem.vue
@@ -50,7 +50,7 @@

    <div v-show="!isCollapsed" class="space-y-4">
      <!-- Component Info Display - Editable or Read-only -->
-      <div class="p-4 bg-base-100 border border-gray-200 rounded-lg">
+      <div class="p-4 bg-base-100 border border-base-200 rounded-lg">
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
          <div class="form-control">
            <label class="label"><span class="label-text font-medium">Nom</span></label>
@@ -111,7 +111,7 @@
                  <span class="font-medium">{{ constructeur.name }}</span>
                  <span
                    v-if="formatConstructeurContact(constructeur)"
-                    class="text-xs text-gray-500"
+                    class="text-xs text-base-content/50"
                  >
                    {{ formatConstructeurContact(constructeur) }}
                  </span>
@@ -220,9 +220,9 @@
        @field-blur="updateComponentCustomField"
      />

-      <div class="mt-4 pt-4 border-t border-gray-200 space-y-3">
+      <div class="mt-4 pt-4 border-t border-base-200 space-y-3">
        <div class="flex items-center justify-between">
-          <h4 class="font-semibold text-sm text-gray-700">
+          <h4 class="font-semibold text-sm text-base-content/80">
            Documents
          </h4>
          <span v-if="isEditMode && selectedFiles.length" class="badge badge-outline">
@@ -230,7 +230,7 @@
          </span>
        </div>

-        <p v-if="loadingDocuments" class="text-xs text-gray-500">
+        <p v-if="loadingDocuments" class="text-xs text-base-content/50">
          Chargement des documents...
        </p>

@@ -254,7 +254,7 @@

      <!-- Component Pieces -->
      <div v-if="component.pieces && component.pieces.length > 0" class="space-y-2">
-        <h4 class="font-semibold text-gray-700">
+        <h4 class="font-semibold text-base-content/80">
          Pièces du composant
        </h4>
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
@@ -272,10 +272,10 @@

      <!-- Sub Components -->
      <div v-if="childComponents.length > 0" class="space-y-3">
-        <h4 class="font-semibold text-gray-700">
+        <h4 class="font-semibold text-base-content/80">
          Sous-composants
        </h4>
-        <div class="space-y-3 pl-4 border-l-2 border-gray-200">
+        <div class="space-y-3 pl-4 border-l-2 border-base-200">
          <ComponentItem
            v-for="subComponent in childComponents"
            :key="subComponent.id"
--- a/app/components/CustomFieldsDisplay.vue
+++ b/app/components/CustomFieldsDisplay.vue
@@ -1,6 +1,6 @@
 <template>
  <div v-if="customFields && customFields.length > 0" class="space-y-4">
-    <h4 class="font-semibold text-gray-700 mb-3">
+    <h4 class="font-semibold text-base-content/80 mb-3">
      Champs personnalisés
    </h4>
    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
--- a/app/components/DocumentPreviewModal.vue
+++ b/app/components/DocumentPreviewModal.vue
@@ -10,11 +10,11 @@
          <div class="min-w-0">
            <h3 class="font-bold text-xl truncate">
              Prévisualisation
-              <span v-if="navTotal > 1" class="text-base font-normal text-gray-500">
+              <span v-if="navTotal > 1" class="text-base font-normal text-base-content/50">
                {{ activeIndex + 1 }} / {{ navTotal }}
              </span>
            </h3>
-            <p class="text-sm text-gray-500 truncate">
+            <p class="text-sm text-base-content/50 truncate">
              {{ activeDoc?.name || activeDoc?.filename }}<span v-if="documentDescription"> &bull; {{ documentDescription }}</span>
            </p>
          </div>
@@ -68,7 +68,7 @@

            <template v-else-if="previewType === 'text'">
              <div class="w-full h-full overflow-auto">
-                <div v-if="textLoading" class="flex items-center justify-center py-10 text-sm text-gray-500">
+                <div v-if="textLoading" class="flex items-center justify-center py-10 text-sm text-base-content/50">
                  <span class="loading loading-spinner loading-md mr-2" />
                  Chargement du document...
                </div>
@@ -82,7 +82,7 @@
            </template>

            <template v-else>
-              <div class="text-sm text-gray-500 text-center px-6">
+              <div class="text-sm text-base-content/50 text-center px-6">
                Prévisualisation non disponible pour ce type de document.
              </div>
            </template>
--- a/app/components/DocumentUpload.vue
+++ b/app/components/DocumentUpload.vue
@@ -13,7 +13,7 @@
        <h3 class="font-semibold">
          {{ title }}
        </h3>
-        <p class="text-sm text-gray-500">
+        <p class="text-sm text-base-content/50">
          {{ subtitle }}
        </p>
      </div>
@@ -22,7 +22,7 @@
        <button type="button" class="btn btn-primary btn-sm" @click="triggerFileDialog">
          Sélectionner des fichiers
        </button>
-        <span class="text-xs text-gray-500">ou glisser-déposer ici</span>
+        <span class="text-xs text-base-content/50">ou glisser-déposer ici</span>
      </div>

      <input
@@ -54,7 +54,7 @@
            </div>
            <div class="flex flex-col">
              <span class="font-medium">{{ file.name }}</span>
-              <span class="text-xs text-gray-500">{{ formatSize(file.size) }} • {{ file.type || 'Type inconnu' }}</span>
+              <span class="text-xs text-base-content/50">{{ formatSize(file.size) }} • {{ file.type || 'Type inconnu' }}</span>
            </div>
          </div>
          <button type="button" class="btn btn-ghost btn-xs" @click="removeFile(file)">
--- a/app/components/ModelStructureViewer.vue
+++ b/app/components/ModelStructureViewer.vue
@@ -1,10 +1,10 @@
 <template>
  <div class="space-y-4">
-    <div class="flex flex-wrap items-center gap-2 text-sm text-gray-600">
+    <div class="flex flex-wrap items-center gap-2 text-sm text-base-content/60">
      <span v-if="stats.customFields" class="badge badge-outline badge-sm">{{ stats.customFields }} champ(s)</span>
      <span v-if="stats.pieces" class="badge badge-outline badge-sm">{{ stats.pieces }} pièce(s)</span>
      <span v-if="stats.subcomponents" class="badge badge-outline badge-sm">{{ stats.subcomponents }} sous-composant(s)</span>
-      <span v-if="!stats.customFields && !stats.pieces && !stats.subcomponents" class="text-xs text-gray-500">
+      <span v-if="!stats.customFields && !stats.pieces && !stats.subcomponents" class="text-xs text-base-content/50">
        Structure vide
      </span>
    </div>
--- a/app/components/PageHero.vue
+++ b/app/components/PageHero.vue
@@ -1,11 +1,11 @@
 <template>
  <section :class="sectionClasses">
    <div :class="contentClasses">
-      <div :class="['space-y-4', maxWidthClass]">
-        <component :is="headingTag" v-if="title" class="text-4xl font-bold">
+      <div :class="['space-y-3', maxWidthClass]">
+        <component :is="headingTag" v-if="title" class="text-4xl font-bold tracking-tight">
          {{ title }}
        </component>
-        <p v-if="subtitle" class="text-sm opacity-90">
+        <p v-if="subtitle" class="text-sm opacity-80 leading-relaxed">
          {{ subtitle }}
        </p>
        <slot />
@@ -58,9 +58,9 @@ const props = defineProps({
 })

 const sectionClasses = computed(() => {
-  const classes = ['hero', 'bg-gradient-to-r', props.gradientFrom, props.gradientTo, props.minHeight]
+  const classes = ['hero', 'bg-gradient-to-br', props.gradientFrom, props.gradientTo, props.minHeight]
  if (props.rounded) {
-    classes.push('rounded-lg')
+    classes.push('rounded-xl', 'overflow-hidden')
  }
  return classes
 })
--- a/app/components/PieceItem.vue
+++ b/app/components/PieceItem.vue
@@ -52,7 +52,7 @@
    </div>

    <div v-show="!isCollapsed" class="space-y-4">
-      <div class="p-4 bg-base-100 border border-gray-200 rounded-lg">
+      <div class="p-4 bg-base-100 border border-base-200 rounded-lg">
        <div class="space-y-2 text-sm">
      <div>
        <span class="font-medium">Référence:</span>
@@ -82,7 +82,7 @@
              </span>
              <span
                v-if="formatConstructeurContact(constructeur)"
-                class="text-xs text-gray-500"
+                class="text-xs text-base-content/50"
              >
                {{ formatConstructeurContact(constructeur) }}
              </span>
@@ -186,9 +186,9 @@
      @field-blur="handleCustomFieldBlur"
    />

-    <div class="mt-4 pt-4 border-t border-gray-200 space-y-3">
+    <div class="mt-4 pt-4 border-t border-base-200 space-y-3">
      <div class="flex items-center justify-between">
-        <h5 class="text-sm font-medium text-gray-700">Documents</h5>
+        <h5 class="text-sm font-medium text-base-content/80">Documents</h5>
        <span
          v-if="isEditMode && selectedFiles.length"
          class="badge badge-outline"
@@ -200,7 +200,7 @@
        </span>
      </div>

-      <p v-if="loadingDocuments" class="text-xs text-gray-500">
+      <p v-if="loadingDocuments" class="text-xs text-base-content/50">
        Chargement des documents...
      </p>

--- a/app/components/PieceModelStructureEditor.vue
+++ b/app/components/PieceModelStructureEditor.vue
@@ -10,7 +10,7 @@
        </p>
      </header>

-      <p v-if="!products.length" class="text-xs text-gray-500">
+      <p v-if="!products.length" class="text-xs text-base-content/50">
        Aucun produit défini.
      </p>

@@ -76,7 +76,7 @@
        Champs personnalisés
      </h3>

-      <p v-if="!fields.length" class="text-xs text-gray-500">
+      <p v-if="!fields.length" class="text-xs text-base-content/50">
        Aucun champ personnalisé n'a encore été défini.
      </p>

--- a/app/components/StructureNodeEditor.vue
+++ b/app/components/StructureNodeEditor.vue
@@ -9,7 +9,7 @@
            </span>
          </label>
          <template v-if="isRoot">
-            <p class="text-[11px] text-gray-500">
+            <p class="text-[11px] text-base-content/50">
              Le composant racine correspond à la catégorie que vous éditez. Sélectionnez uniquement les familles pour les sous-composants.
            </p>
          </template>
@@ -31,7 +31,7 @@
                {{ formatComponentTypeOption(type) }}
              </option>
            </select>
-            <p class="text-[11px] text-gray-500">
+            <p class="text-[11px] text-base-content/50">
              {{ node.typeComposantId ? `Sélection : ${getComponentTypeLabel(node.typeComposantId) || 'Inconnue'}` : 'Aucune famille sélectionnée' }}
            </p>
            <div v-if="!isRoot" class="form-control mt-2">
@@ -73,7 +73,7 @@
          <h4 :class="headingClass">
            {{ isRoot ? 'Champs personnalisés du composant' : 'Champs personnalisés' }}
          </h4>
-          <p v-if="!(node.customFields?.length)" class="text-xs text-gray-500">
+          <p v-if="!(node.customFields?.length)" class="text-xs text-base-content/50">
            Aucun champ n'a encore été défini.
          </p>
          <div v-else class="space-y-2">
@@ -159,7 +159,7 @@
          <h4 :class="headingClass">
            {{ isRoot ? 'Produits inclus par défaut' : 'Produits' }}
          </h4>
-          <p v-if="!(node.products?.length)" class="text-xs text-gray-500">
+          <p v-if="!(node.products?.length)" class="text-xs text-base-content/50">
            Aucun produit défini.
          </p>
          <div v-else class="space-y-2">
@@ -230,7 +230,7 @@
          <h4 :class="headingClass">
            {{ isRoot ? 'Pièces incluses par défaut' : 'Pièces' }}
          </h4>
-          <p v-if="!(node.pieces?.length)" class="text-xs text-gray-500">
+          <p v-if="!(node.pieces?.length)" class="text-xs text-base-content/50">
            Aucune pièce définie.
          </p>
          <div v-else class="space-y-2">
@@ -276,7 +276,7 @@
                        </option>
                      </select>
                    </div>
-                    <p class="mt-1 text-[11px] text-gray-500">
+                    <p class="mt-1 text-[11px] text-base-content/50">
                      {{ piece.typePieceId ? `Sélection : ${getPieceTypeLabel(piece.typePieceId) || 'Inconnue'}` : 'Aucune famille sélectionnée' }}
                    </p>
                  </div>
@@ -300,10 +300,10 @@

        <section v-if="canManageSubcomponents || hasSubcomponents" class="space-y-3">
          <h4 :class="headingClass">Sous-composants</h4>
-          <p v-if="!isRoot && canManageSubcomponents" class="text-[11px] text-gray-500">
+          <p v-if="!isRoot && canManageSubcomponents" class="text-[11px] text-base-content/50">
            Sélectionnez uniquement la famille de ce sous-composant ; il sera configuré via son propre modèle.
          </p>
-          <p v-if="!hasSubcomponents" class="text-xs text-gray-500">
+          <p v-if="!hasSubcomponents" class="text-xs text-base-content/50">
            Aucun sous-composant défini.
          </p>
          <div v-else class="space-y-3">
--- a/app/components/common/CustomFieldDisplay.vue
+++ b/app/components/common/CustomFieldDisplay.vue
@@ -1,9 +1,9 @@
 <template>
  <div
    v-if="fields.length"
-    class="mt-4 pt-4 border-t border-gray-200"
+    class="mt-4 pt-4 border-t border-base-200"
  >
-    <h5 class="text-sm font-medium text-gray-700 mb-3">
+    <h5 class="text-sm font-medium text-base-content/80 mb-3">
      Champs personnalisés
    </h5>
    <div :class="layoutClass">
--- a/app/components/common/DataTable.vue
+++ b/app/components/common/DataTable.vue
@@ -63,13 +63,13 @@

    <!-- Table (always shown when there are filterable columns, even during loading or with 0 rows) -->
    <template v-else>
-      <div class="overflow-x-auto overflow-y-clip relative">
+      <div class="overflow-x-auto overflow-y-clip relative rounded-lg border border-base-300/40">
        <!-- Loading overlay (keeps table & filter inputs visible) -->
        <div
          v-if="loading && hasFilterableColumns"
-          class="absolute inset-0 bg-base-100/50 z-10 flex items-center justify-center"
+          class="absolute inset-0 bg-base-100/60 backdrop-blur-[1px] z-10 flex items-center justify-center"
        >
-          <span class="loading loading-spinner" aria-hidden="true" />
+          <span class="loading loading-spinner text-primary" aria-hidden="true" />
        </div>
        <table :class="['table table-sm md:table-md', tableClass]">
          <thead>
@@ -175,7 +175,7 @@
              </tr>
              <!-- Expanded row -->
              <tr v-if="expandable && isExpanded(row)">
-                <td :colspan="columns.length + 1" class="bg-base-200/50 p-4">
+                <td :colspan="columns.length + 1" class="bg-base-200/30 p-4 border-t border-base-200/80">
                  <slot name="row-expanded" :row="row" :index="idx" />
                </td>
              </tr>
--- a/app/components/common/RequirementListEditor.vue
+++ b/app/components/common/RequirementListEditor.vue
@@ -9,11 +9,11 @@
        </button>
      </div>

-      <p class="text-sm text-gray-500">
+      <p class="text-sm text-base-content/50">
        {{ labels.description }}
      </p>

-      <div v-if="requirements.length === 0" class="text-sm text-gray-500 bg-base-200/60 rounded-md p-4">
+      <div v-if="requirements.length === 0" class="text-sm text-base-content/50 bg-base-200/60 rounded-md p-4">
        {{ labels.emptyState }}
      </div>

--- a/app/components/common/SearchSelect.vue
+++ b/app/components/common/SearchSelect.vue
@@ -41,11 +41,11 @@
          v-if="openDropdown"
          class="absolute z-30 mt-1 w-full max-h-60 overflow-y-auto bg-base-100 border border-base-200 rounded-box shadow-lg"
        >
-          <div v-if="loading" class="flex items-center gap-2 px-3 py-2 text-xs text-gray-500">
+          <div v-if="loading" class="flex items-center gap-2 px-3 py-2 text-xs text-base-content/50">
            <span class="loading loading-spinner loading-xs" />
            Recherche en cours…
          </div>
-          <div v-else-if="displayedOptions.length === 0" class="px-3 py-2 text-xs text-gray-500">
+          <div v-else-if="displayedOptions.length === 0" class="px-3 py-2 text-xs text-base-content/50">
            {{ emptyText }}
          </div>
          <ul v-else class="flex flex-col">
@@ -69,7 +69,7 @@
                    {{ resolveLabel(option) }}
                  </slot>
                </span>
-                <span v-if="resolveDescription(option)" class="text-xs text-gray-500">
+                <span v-if="resolveDescription(option)" class="text-xs text-base-content/50">
                  <slot name="option-description" :option="option">
                    {{ resolveDescription(option) }}
                  </slot>
--- a/app/components/common/StructureSkeletonPreview.vue
+++ b/app/components/common/StructureSkeletonPreview.vue
@@ -93,7 +93,7 @@
        <!-- Empty state: component variant -->
        <p
          v-if="variant === 'component' && showEmptyState && !customFields.length && !pieces.length && !products.length && !subcomponents.length"
-          class="text-xs text-gray-500"
+          class="text-xs text-base-content/50"
        >
          Ce squelette ne définit pas encore de pièces, sous-composants ou valeurs par défaut.
        </p>
--- a/app/components/form/FieldPhone.vue
+++ b/app/components/form/FieldPhone.vue
@@ -23,7 +23,7 @@
      @blur="onBlur"
      @focus="(event) => emit('focus', event)"
    />
-    <p v-if="help" :id="helpId" class="mt-2 text-xs text-gray-500">
+    <p v-if="help" :id="helpId" class="mt-2 text-xs text-base-content/50">
      {{ help }}
    </p>
    <p v-if="errorMessage" :id="errorId" class="mt-2 text-xs text-error">
--- a/app/components/layout/AppNavbar.vue
+++ b/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,
--- a/app/components/machine/MachineComponentsCard.vue
+++ b/app/components/machine/MachineComponentsCard.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="card bg-base-100 shadow-lg">
+  <div class="card bg-base-100 shadow-sm">
    <div class="card-body">
      <div class="flex justify-between items-center mb-4">
        <h2 class="card-title">Composants</h2>
--- a/app/components/machine/MachineDocumentsCard.vue
+++ b/app/components/machine/MachineDocumentsCard.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="card bg-base-100 shadow-lg mt-6">
+  <div class="card bg-base-100 shadow-sm mt-6">
    <div class="card-body space-y-4">
      <div class="flex items-center justify-between">
        <div>
--- a/app/components/machine/MachineInfoCard.vue
+++ b/app/components/machine/MachineInfoCard.vue
@@ -1,7 +1,7 @@
 <template>
-  <div class="card bg-base-100 shadow-lg">
+  <div class="card bg-base-100 shadow-sm">
    <div class="card-body">
-      <h2 class="card-title">Informations de la machine</h2>
+      <h2 class="card-title tracking-tight">Informations de la machine</h2>
      <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
        <div class="form-control">
          <label class="label">
@@ -59,7 +59,7 @@
                <span class="font-medium">{{ constructeur.name }}</span>
                <span
                  v-if="formatConstructeurContactSummary(constructeur)"
-                  class="text-xs text-gray-500"
+                  class="text-xs text-base-content/50"
                >
                  {{ formatConstructeurContactSummary(constructeur) }}
                </span>
@@ -71,8 +71,8 @@
      </div>

      <!-- Champs personnalisés -->
-      <div v-if="visibleCustomFields.length" class="mt-6 pt-4 border-t border-gray-200">
-        <h4 class="font-semibold text-gray-700 mb-3">Champs personnalisés de la machine</h4>
+      <div v-if="visibleCustomFields.length" class="mt-6 pt-4 border-t border-base-200">
+        <h4 class="font-semibold text-base-content/80 mb-3">Champs personnalisés de la machine</h4>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
          <div
            v-for="field in visibleCustomFields"
--- a/app/components/machine/MachinePiecesCard.vue
+++ b/app/components/machine/MachinePiecesCard.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="card bg-base-100 shadow-lg">
+  <div class="card bg-base-100 shadow-sm">
    <div class="card-body">
      <div class="flex justify-between items-center mb-4">
        <h2 class="card-title">Pièces de la machine</h2>
--- a/app/components/machine/MachineProductsCard.vue
+++ b/app/components/machine/MachineProductsCard.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="card bg-base-100 shadow-lg">
+  <div class="card bg-base-100 shadow-sm">
    <div class="card-body space-y-4">
      <DocumentPreviewModal
        :document="previewDocument"
--- a/app/components/sites/SiteCard.vue
+++ b/app/components/sites/SiteCard.vue
@@ -11,17 +11,17 @@
      </div>

      <div class="space-y-3 text-sm">
-        <div class="flex items-center gap-2 text-gray-700">
+        <div class="flex items-center gap-2 text-base-content/80">
          <IconLucideUser class="w-4 h-4 text-primary" aria-hidden="true" />
          <span class="font-medium">{{ site.contactName }}</span>
        </div>

-        <div class="flex items-center gap-2 text-gray-600">
+        <div class="flex items-center gap-2 text-base-content/60">
          <IconLucidePhone class="w-4 h-4 text-secondary" aria-hidden="true" />
          <span>{{ formattedContactPhone }}</span>
        </div>

-        <div class="flex items-start gap-2 text-gray-600">
+        <div class="flex items-start gap-2 text-base-content/60">
          <IconLucideMapPin class="w-4 h-4 text-accent mt-1" aria-hidden="true" />
          <span>
            {{ site.contactAddress }}<br>
@@ -29,7 +29,7 @@
          </span>
        </div>

-        <div class="flex items-center gap-2 text-gray-600">
+        <div class="flex items-center gap-2 text-base-content/60">
          <IconLucideFactory class="w-4 h-4 text-blue-500" aria-hidden="true" />
          <span>{{ machineCount }} machine(s)</span>
        </div>
--- a/app/components/sites/SiteEditModal.vue
+++ b/app/components/sites/SiteEditModal.vue
@@ -3,7 +3,7 @@
    <div class="modal-box max-w-md">
      <h3 class="font-bold text-lg mb-4">
        {{ disabled ? 'Détails du site' : 'Modifier le site' }}
-        <span v-if="siteName" class="block text-sm font-normal text-gray-500">{{ siteName }}</span>
+        <span v-if="siteName" class="block text-sm font-normal text-base-content/50">{{ siteName }}</span>
      </h3>
      <form class="space-y-4" @submit.prevent="emit('submit')">
        <div class="form-control">
@@ -28,7 +28,7 @@
              <h4 class="font-semibold text-sm">
                Documents liés
              </h4>
-              <p class="text-xs text-gray-500">
+              <p class="text-xs text-base-content/50">
                Ajoutez des documents (PDF, images...) relatifs à ce site.
              </p>
            </div>
@@ -74,7 +74,7 @@
                    <div class="font-medium">
                      {{ document.name }}
                    </div>
-                    <div class="text-xs text-gray-500">
+                    <div class="text-xs text-base-content/50">
                      {{ document.mimeType || 'Inconnu' }} • {{ formatSize(document.size) }}
                    </div>
                  </div>
--- a/app/pages/comments.vue
+++ b/app/pages/comments.vue
@@ -4,7 +4,7 @@
      <h1 class="text-3xl font-semibold text-base-content">
        Commentaires
      </h1>
-      <p class="text-sm text-gray-500">
+      <p class="text-sm text-base-content/50">
        Liste de tous les commentaires et tickets ouverts sur les fiches.
      </p>
    </header>
--- a/app/pages/component-catalog.vue
+++ b/app/pages/component-catalog.vue
@@ -1,9 +1,9 @@
 <template>
  <main class="container mx-auto px-6 py-10 space-y-8">
-    <header class="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
+    <header class="flex flex-col gap-3 md:flex-row md:items-end md:justify-between">
      <div>
-        <h1 class="text-3xl font-semibold text-base-content">Catalogue des composants</h1>
-        <p class="text-sm text-gray-500">
+        <h1 class="text-3xl font-bold text-base-content tracking-tight">Catalogue des composants</h1>
+        <p class="text-sm text-base-content/50 mt-1">
          Consultez et gérez tous les composants existants.
        </p>
      </div>
@@ -11,17 +11,17 @@
        <NuxtLink to="/component/create" class="btn btn-primary btn-sm md:btn-md">
          Ajouter un composant
        </NuxtLink>
-        <NuxtLink to="/component-category" class="btn btn-outline btn-sm md:btn-md">
+        <NuxtLink to="/component-category" class="btn btn-ghost btn-sm md:btn-md">
          Gérer les catégories
        </NuxtLink>
      </div>
    </header>

-    <section class="card border border-base-200 bg-base-100 shadow-sm">
+    <section class="card bg-base-100 shadow-sm">
      <div class="card-body space-y-4">
-        <header class="flex flex-col gap-2">
-          <h2 class="text-xl font-semibold text-base-content">Composants créés</h2>
-          <p class="text-sm text-base-content/70">
+        <header class="flex flex-col gap-1">
+          <h2 class="text-xl font-bold text-base-content tracking-tight">Composants créés</h2>
+          <p class="text-sm text-base-content/50">
            Retrouvez ici tous les composants enregistrés, indépendamment de leur catégorie.
          </p>
        </header>
--- a/app/pages/component/[id]/edit.vue
+++ b/app/pages/component/[id]/edit.vue
@@ -1,11 +1,12 @@
 <template>
-  <DocumentPreviewModal
-    :document="previewDocument"
-    :visible="previewVisible"
-    :documents="componentDocuments"
-    @close="closePreview"
-  />
-  <main class="container mx-auto px-6 py-10">
+  <div>
+    <DocumentPreviewModal
+      :document="previewDocument"
+      :visible="previewVisible"
+      :documents="componentDocuments"
+      @close="closePreview"
+    />
+    <main class="container mx-auto px-6 py-10">
    <div v-if="loading" class="flex flex-col items-center gap-4 py-20 text-center">
      <span class="loading loading-spinner loading-lg" aria-hidden="true" />
      <p class="text-sm text-base-content/70">Chargement du composant…</p>
@@ -269,7 +270,8 @@
        </div>
      </div>
    </section>
-  </main>
+    </main>
+  </div>
 </template>

 <script setup lang="ts">
--- a/app/pages/constructeurs.vue
+++ b/app/pages/constructeurs.vue
@@ -15,7 +15,7 @@
      </button>
    </div>

-    <div class="card bg-base-100 shadow-lg">
+    <div class="card bg-base-100 shadow-sm">
      <div class="card-body space-y-4">
        <DataTable
          :columns="columns"
--- a/app/pages/documents.vue
+++ b/app/pages/documents.vue
@@ -7,7 +7,7 @@
      @close="closePreview"
    />

-    <section class="card bg-base-100 shadow-lg">
+    <section class="card bg-base-100 shadow-sm">
      <div class="card-body space-y-6">
        <DataTable
          :columns="columns"
@@ -68,7 +68,7 @@
              </span>
              <div>
                <div class="font-semibold">{{ row.name }}</div>
-                <div class="text-xs text-gray-500">{{ row.filename }}</div>
+                <div class="text-xs text-base-content/50">{{ row.filename }}</div>
              </div>
            </div>
          </template>
@@ -88,7 +88,7 @@
              <span v-else-if="row.composant">Composant &middot; {{ row.composant.name }}</span>
              <span v-else-if="row.piece">Pi&egrave;ce &middot; {{ row.piece.name }}</span>
              <span v-else-if="row.product">Produit &middot; {{ row.product.name }}</span>
-              <span v-else class="text-gray-400">Non d&eacute;fini</span>
+              <span v-else class="text-base-content/30">Non d&eacute;fini</span>
            </div>
          </template>

--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -1,55 +1,49 @@
 <template>
  <main class="container mx-auto px-6 py-8">
-    <!-- Hierarchical View -->
    <div class="my-8">
      <!-- Header with Stats -->
-      <div class="flex justify-between items-center mb-6">
+      <div class="flex flex-col gap-6 md:flex-row md:items-end md:justify-between mb-8">
        <div>
-          <h2 class="text-2xl font-bold text-gray-800">
+          <h2 class="text-3xl font-bold text-base-content tracking-tight">
            Vue d'ensemble
          </h2>
-          <p class="text-gray-600">
+          <p class="text-base-content/50 mt-1">
            Machines organisées par site
          </p>
        </div>
-        <div class="stats shadow">
-          <div class="stat">
-            <div class="stat-title">
-              Sites
-            </div>
-            <div class="stat-value text-primary">
-              {{ sites.length }}
-            </div>
+        <div class="flex gap-3">
+          <div class="bg-base-100 rounded-xl border border-base-300/50 px-5 py-3 shadow-sm">
+            <p class="text-[0.65rem] font-semibold uppercase tracking-widest text-base-content/40 mb-0.5">Sites</p>
+            <p class="text-2xl font-bold text-primary tracking-tight">{{ sites.length }}</p>
          </div>
-          <div class="stat">
-            <div class="stat-title">
-              Machines
-            </div>
-            <div class="stat-value text-secondary">
-              {{ totalMachines }}
-            </div>
+          <div class="bg-base-100 rounded-xl border border-base-300/50 px-5 py-3 shadow-sm">
+            <p class="text-[0.65rem] font-semibold uppercase tracking-widest text-base-content/40 mb-0.5">Machines</p>
+            <p class="text-2xl font-bold text-secondary tracking-tight">{{ totalMachines }}</p>
          </div>
        </div>
      </div>

      <!-- Filters -->
-      <div class="card bg-base-100 shadow-lg mb-6">
-        <div class="card-body">
+      <div class="card bg-base-100 shadow-sm mb-8">
+        <div class="card-body py-4">
          <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
            <div class="form-control">
              <label class="label">
-                <span class="label-text">Rechercher</span>
+                <span class="label-text text-xs font-semibold uppercase tracking-wide text-base-content/50">Rechercher</span>
              </label>
-              <input
-                v-model="searchTerm"
-                type="text"
-                placeholder="Nom de machine ou site..."
-                class="input input-bordered"
-              >
+              <div class="relative">
+                <IconLucideSearch class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-base-content/30" aria-hidden="true" />
+                <input
+                  v-model="searchTerm"
+                  type="text"
+                  placeholder="Nom de machine ou site..."
+                  class="input input-bordered pl-10 w-full"
+                >
+              </div>
            </div>
            <div class="form-control">
              <label class="label">
-                <span class="label-text">Site</span>
+                <span class="label-text text-xs font-semibold uppercase tracking-wide text-base-content/50">Site</span>
              </label>
              <select v-model="selectedSiteFilter" class="select select-bordered">
                <option value="">
@@ -69,30 +63,32 @@
      </div>

      <!-- Loading State -->
-      <div v-if="loading" class="flex justify-center items-center py-12">
-        <span class="loading loading-spinner loading-lg" />
+      <div v-if="loading" class="flex justify-center items-center py-16">
+        <span class="loading loading-spinner loading-lg text-primary" />
      </div>

-      <!-- Hierarchical Machines View -->
-      <div v-else-if="filteredSites.length === 0" class="text-center py-12">
-        <div class="max-w-md mx-auto">
-          <IconLucideFactory
-            class="w-16 h-16 mx-auto text-gray-400 mb-4"
-            aria-hidden="true"
-          />
-          <h3 class="text-lg font-medium text-gray-900 mb-2">
+      <!-- Empty State -->
+      <div v-else-if="filteredSites.length === 0" class="text-center py-16">
+        <div class="max-w-sm mx-auto">
+          <div class="w-16 h-16 rounded-2xl bg-base-200 grid place-items-center mx-auto mb-5">
+            <IconLucideFactory
+              class="w-8 h-8 text-base-content/30"
+              aria-hidden="true"
+            />
+          </div>
+          <h3 class="text-lg font-semibold text-base-content mb-1">
            Aucune machine trouvée
          </h3>
-          <p class="text-gray-500 mb-4">
+          <p class="text-sm text-base-content/50 mb-6">
            Commencez par ajouter des sites et des machines.
          </p>
          <div class="flex gap-2 justify-center">
-            <button v-if="canEdit" class="btn btn-primary" @click="showAddSiteModal = true">
+            <button v-if="canEdit" class="btn btn-primary btn-sm" @click="showAddSiteModal = true">
              Ajouter un site
            </button>
            <button
              v-if="canEdit"
-              class="btn btn-secondary"
+              class="btn btn-ghost btn-sm"
              @click="showAddMachineModal = true"
            >
              Ajouter une machine
@@ -101,130 +97,108 @@
        </div>
      </div>

-      <div v-else class="space-y-6">
+      <!-- Sites List -->
+      <div v-else class="space-y-5">
        <div
          v-for="site in filteredSites"
          :key="site.id"
-          class="card bg-base-100 shadow-lg"
+          class="card bg-base-100 shadow-sm overflow-hidden"
        >
-          <!-- Site Header -->
          <div class="card-body">
-            <div class="flex items-center justify-between mb-4">
-              <div class="flex items-center gap-3">
-                <div class="avatar placeholder">
-                  <div
-                    class="bg-primary text-primary-content rounded-lg w-12 grid place-items-center"
-                  >
-                    <IconLucideMapPin class="w-6 h-6" aria-hidden="true" />
-                  </div>
+            <!-- Site Header -->
+            <div class="flex items-start justify-between gap-4">
+              <div class="flex items-start gap-4">
+                <div
+                  class="w-11 h-11 rounded-xl bg-primary/10 grid place-items-center shrink-0"
+                >
+                  <IconLucideMapPin class="w-5 h-5 text-primary" aria-hidden="true" />
                </div>
-                <div>
-                  <h3 class="text-xl font-bold">
+                <div class="min-w-0">
+                  <h3 class="text-lg font-bold text-base-content tracking-tight">
                    {{ site.name }}
                  </h3>
-                  <div class="text-sm text-gray-600 space-y-1">
-                    <div class="flex items-center gap-2">
-                      <IconLucideUser
-                        class="w-4 h-4 text-primary"
-                        aria-hidden="true"
-                      />
-                      <span class="font-medium">{{ site.contactName }}</span>
-                    </div>
-                    <div class="flex items-center gap-2">
-                      <IconLucidePhone
-                        class="w-4 h-4 text-secondary"
-                        aria-hidden="true"
-                      />
-                      <span>{{ formatPhoneDisplay(site.contactPhone) }}</span>
-                    </div>
-                    <div class="flex items-start gap-2">
-                      <IconLucideMapPinned
-                        class="w-4 h-4 text-accent mt-1"
-                        aria-hidden="true"
-                      />
-                      <span>
-                        {{ site.contactAddress }}<br>
-                        {{ site.contactPostalCode }} {{ site.contactCity }}
-                      </span>
-                    </div>
+                  <div class="flex flex-wrap gap-x-4 gap-y-1 mt-1.5 text-sm text-base-content/50">
+                    <span v-if="site.contactName" class="flex items-center gap-1.5">
+                      <IconLucideUser class="w-3.5 h-3.5" aria-hidden="true" />
+                      {{ site.contactName }}
+                    </span>
+                    <span v-if="site.contactPhone" class="flex items-center gap-1.5">
+                      <IconLucidePhone class="w-3.5 h-3.5" aria-hidden="true" />
+                      {{ formatPhoneDisplay(site.contactPhone) }}
+                    </span>
+                    <span v-if="site.contactCity" class="flex items-center gap-1.5">
+                      <IconLucideMapPinned class="w-3.5 h-3.5" aria-hidden="true" />
+                      {{ site.contactPostalCode }} {{ site.contactCity }}
+                    </span>
                  </div>
                </div>
              </div>
-              <div class="flex items-center gap-2">
-                <div class="badge badge-primary badge-lg">
-                  {{ site.machines?.length || 0 }} machines
-                </div>
+              <div class="flex items-center gap-2 shrink-0">
+                <span class="badge badge-primary badge-sm font-semibold">
+                  {{ site.machines?.length || 0 }}
+                </span>
                <button
-                  class="btn btn-ghost btn-sm"
+                  class="btn btn-ghost btn-xs btn-circle"
                  @click="toggleSiteCollapse(site.id)"
                >
                  <IconLucideChevronDown
-                    class="w-5 h-5 transition-transform"
-                    :class="
-                      collapsedSites.includes(site.id) ? 'rotate-180' : ''
-                    "
+                    class="w-4 h-4 transition-transform duration-200"
+                    :class="collapsedSites.includes(site.id) ? 'rotate-180' : ''"
                    aria-hidden="true"
                  />
                </button>
              </div>
            </div>

-            <!-- Machines List -->
+            <!-- Machines Grid -->
            <div
              v-if="
                !collapsedSites.includes(site.id) &&
                  site.machines &&
                  site.machines.length > 0
              "
-              class="space-y-3"
+              class="mt-4 pt-4 border-t border-base-200/80"
            >
-              <div class="divider" />
-              <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+              <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
                <div
                  v-for="machine in site.machines"
                  :key="machine.id"
-                  class="card bg-base-200 hover:bg-base-300 transition-colors cursor-pointer"
+                  class="group rounded-xl border border-base-300/40 bg-base-200/30 hover:bg-base-200/60 hover:border-primary/20 transition-all cursor-pointer p-4"
                  @click="viewMachineDetails(machine)"
                >
-                  <div class="card-body p-4">
-                    <div class="flex items-center justify-between mb-2">
-                      <h4 class="font-semibold text-sm">
-                        {{ machine.name }}
-                      </h4>
-                    </div>
+                  <div class="flex items-center justify-between mb-2">
+                    <h4 class="font-semibold text-sm text-base-content group-hover:text-primary transition-colors truncate">
+                      {{ machine.name }}
+                    </h4>
+                  </div>

-                    <div class="space-y-1 text-xs text-gray-600">
-                      <div
-                        v-if="machine.reference"
-                        class="flex items-center gap-1"
-                      >
-                        <IconLucideTag class="w-3 h-3" aria-hidden="true" />
-                        <span>{{ machine.reference }}</span>
-                      </div>
-                    </div>
+                  <div v-if="machine.reference" class="flex items-center gap-1.5 text-xs text-base-content/40 mb-3">
+                    <IconLucideTag class="w-3 h-3" aria-hidden="true" />
+                    <span>{{ machine.reference }}</span>
+                  </div>

-                    <div class="card-actions justify-end mt-3">
-                      <button
-                        v-if="canEdit"
-                        class="btn btn-xs btn-outline"
-                        @click.stop="editMachine(machine)"
-                      >
-                        Modifier
-                      </button>
-                      <button
-                        v-if="canEdit"
-                        class="btn btn-xs btn-error"
-                        @click.stop="confirmDeleteMachine(machine)"
-                      >
-                        Supprimer
-                      </button>
-                      <NuxtLink
-                        :to="`/machine/${machine.id}`"
-                        class="btn btn-xs btn-primary"
-                      >
-                        Détails
-                      </NuxtLink>
-                    </div>
+                  <div class="flex items-center gap-1.5 justify-end">
+                    <button
+                      v-if="canEdit"
+                      class="btn btn-xs btn-ghost text-base-content/40 hover:text-base-content opacity-0 group-hover:opacity-100 transition-opacity"
+                      @click.stop="editMachine(machine)"
+                    >
+                      Modifier
+                    </button>
+                    <button
+                      v-if="canEdit"
+                      class="btn btn-xs btn-ghost text-error/50 hover:text-error opacity-0 group-hover:opacity-100 transition-opacity"
+                      @click.stop="confirmDeleteMachine(machine)"
+                    >
+                      Supprimer
+                    </button>
+                    <NuxtLink
+                      :to="`/machine/${machine.id}`"
+                      class="btn btn-xs btn-primary btn-outline opacity-0 group-hover:opacity-100 transition-opacity"
+                      @click.stop
+                    >
+                      Détails
+                    </NuxtLink>
                  </div>
                </div>
              </div>
@@ -236,17 +210,17 @@
                !collapsedSites.includes(site.id) &&
                  (!site.machines || site.machines.length === 0)
              "
-              class="text-center py-6"
+              class="text-center py-8 mt-4 border-t border-base-200/80"
            >
-              <div class="text-gray-400 mb-2">
-                <IconLucideFactory class="w-8 h-8 mx-auto" aria-hidden="true" />
+              <div class="w-10 h-10 rounded-xl bg-base-200 grid place-items-center mx-auto mb-3">
+                <IconLucideFactory class="w-5 h-5 text-base-content/25" aria-hidden="true" />
              </div>
-              <p class="text-sm text-gray-500 mb-3">
+              <p class="text-sm text-base-content/40 mb-3">
                Aucune machine dans ce site
              </p>
              <button
                v-if="canEdit"
-                class="btn btn-sm btn-primary"
+                class="btn btn-sm btn-primary btn-outline"
                @click="addMachineToSite(site)"
              >
                Ajouter une machine
@@ -290,6 +264,7 @@ import IconLucidePhone from '~icons/lucide/phone'
 import IconLucideMapPinned from '~icons/lucide/map-pinned'
 import IconLucideChevronDown from '~icons/lucide/chevron-down'
 import IconLucideTag from '~icons/lucide/tag'
+import IconLucideSearch from '~icons/lucide/search'
 import { formatPhone } from '~/utils/formatters/phone'
 import { extractRelationId } from '~/shared/apiRelations'

@@ -410,12 +385,10 @@ const toggleSiteCollapse = (siteId) => {
 }

 const viewMachineDetails = (machine) => {
-  // Navigation vers la page de détails de la machine
  navigateTo(`/machine/${machine.id}`)
 }

 const editMachine = (machine) => {
-  // Rediriger vers la page d'édition de la machine
  navigateTo(`/machine/${machine.id}?edit=true`)
 }

--- a/app/pages/machine/[id].vue
+++ b/app/pages/machine/[id].vue
@@ -1,8 +1,9 @@
 <template>
-  <main class="container mx-auto px-6 py-8">
+  <div>
+    <main class="container mx-auto px-6 py-8">
    <!-- Loading State -->
-    <div v-if="d.loading.value" class="flex justify-center items-center py-12">
-      <span class="loading loading-spinner loading-lg"></span>
+    <div v-if="d.loading.value" class="flex justify-center items-center py-16">
+      <span class="loading loading-spinner loading-lg text-primary"></span>
    </div>

    <!-- Machine Details -->
@@ -139,26 +140,29 @@
    <!-- Error State -->
    <div v-else class="text-center py-12">
      <div class="max-w-md mx-auto">
-        <IconLucideAlertTriangle class="w-16 h-16 mx-auto text-gray-400 mb-4" aria-hidden="true" />
-        <h3 class="text-lg font-medium text-gray-900 mb-2">Machine non trouvée</h3>
-        <p class="text-gray-500 mb-4">La machine avec l'ID "{{ machineId }}" n'existe pas ou a été supprimée.</p>
+        <div class="w-16 h-16 rounded-2xl bg-base-200 grid place-items-center mx-auto mb-5">
+          <IconLucideAlertTriangle class="w-8 h-8 text-base-content/30" aria-hidden="true" />
+        </div>
+        <h3 class="text-lg font-semibold text-base-content mb-1">Machine non trouvée</h3>
+        <p class="text-sm text-base-content/50 mb-6">La machine avec l'ID "{{ machineId }}" n'existe pas ou a été supprimée.</p>
        <NuxtLink to="/machines" class="btn btn-primary">
          Retour aux machines
        </NuxtLink>
      </div>
    </div>
-  </main>
+    </main>

-  <MachinePrintSelectionModal
-    :open="d.printModalOpen.value"
-    :selection="d.printSelection"
-    :components="d.components.value"
-    :pieces="d.machinePieces.value"
-    @close="d.closePrintModal"
-    @confirm="d.handlePrintConfirm"
-    @select-all="d.setAllPrintSelection(true)"
-    @deselect-all="d.setAllPrintSelection(false)"
-  />
+    <MachinePrintSelectionModal
+      :open="d.printModalOpen.value"
+      :selection="d.printSelection"
+      :components="d.components.value"
+      :pieces="d.machinePieces.value"
+      @close="d.closePrintModal"
+      @confirm="d.handlePrintConfirm"
+      @select-all="d.setAllPrintSelection(true)"
+      @deselect-all="d.setAllPrintSelection(false)"
+    />
+  </div>
 </template>

 <script setup>
--- a/app/pages/machines/index.vue
+++ b/app/pages/machines/index.vue
@@ -11,7 +11,7 @@
        </NuxtLink>
      </div>

-      <div class="card bg-base-100 shadow-lg mb-6">
+      <div class="card bg-base-100 shadow-sm mb-6">
        <div class="card-body">
          <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div class="form-control">
@@ -65,7 +65,7 @@
        <div
          v-for="machine in filteredMachines"
          :key="machine.id"
-          class="card bg-base-100 shadow-lg hover:shadow-xl transition-shadow cursor-pointer"
+          class="card bg-base-100 shadow-sm hover:shadow-xl transition-shadow cursor-pointer"
          @click="viewMachineDetails(machine)"
        >
          <div class="card-body">
--- a/app/pages/machines/new.vue
+++ b/app/pages/machines/new.vue
@@ -20,7 +20,7 @@
      </div>

      <form v-else class="space-y-6" @submit.prevent="c.finalizeMachineCreation">
-        <div class="card bg-base-100 shadow-lg">
+        <div class="card bg-base-100 shadow-sm">
          <div class="card-body space-y-6">
            <!-- Basic fields -->
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
--- a/app/pages/pieces-catalog.vue
+++ b/app/pages/pieces-catalog.vue
@@ -72,7 +72,7 @@
          <template #cell-description="{ row }">
            <div v-if="row.piece.description" class="group relative">
              <span class="block cursor-help truncate">{{ row.piece.description }}</span>
-              <div class="pointer-events-none invisible absolute left-0 top-full z-50 mt-1 max-w-sm overflow-hidden rounded-lg border border-base-300 bg-base-100 p-3 text-sm shadow-lg group-hover:pointer-events-auto group-hover:visible">
+              <div class="pointer-events-none invisible absolute left-0 top-full z-50 mt-1 max-w-sm overflow-hidden rounded-lg border border-base-300 bg-base-100 p-3 text-sm shadow-sm group-hover:pointer-events-auto group-hover:visible">
                <p class="break-words whitespace-pre-wrap">{{ row.piece.description }}</p>
              </div>
            </div>
--- a/app/pages/pieces/[id]/edit.vue
+++ b/app/pages/pieces/[id]/edit.vue
@@ -1,11 +1,12 @@
 <template>
-  <DocumentPreviewModal
-    :document="previewDocument"
-    :visible="previewVisible"
-    :documents="pieceDocuments"
-    @close="closePreview"
-  />
-  <main class="container mx-auto px-6 py-10">
+  <div>
+    <DocumentPreviewModal
+      :document="previewDocument"
+      :visible="previewVisible"
+      :documents="pieceDocuments"
+      @close="closePreview"
+    />
+    <main class="container mx-auto px-6 py-10">
    <div v-if="loading" class="flex flex-col items-center gap-4 py-20 text-center">
      <span class="loading loading-spinner loading-lg" aria-hidden="true" />
      <p class="text-sm text-base-content/70">Chargement de la pièce…</p>
@@ -265,7 +266,8 @@
        </div>
      </div>
    </section>
-  </main>
+    </main>
+  </div>
 </template>

 <script setup lang="ts">
--- a/app/pages/product/[id]/edit.vue
+++ b/app/pages/product/[id]/edit.vue
@@ -1,11 +1,12 @@
 <template>
-  <DocumentPreviewModal
-    :document="previewDocument"
-    :visible="previewVisible"
-    :documents="productDocuments"
-    @close="closePreview"
-  />
-  <main class="container mx-auto px-6 py-10">
+  <div>
+    <DocumentPreviewModal
+      :document="previewDocument"
+      :visible="previewVisible"
+      :documents="productDocuments"
+      @close="closePreview"
+    />
+    <main class="container mx-auto px-6 py-10">
    <div v-if="loading" class="flex flex-col items-center gap-4 py-16 text-center">
      <span class="loading loading-spinner loading-lg" aria-hidden="true" />
      <p class="text-sm text-base-content/70">Chargement du produit…</p>
@@ -204,7 +205,8 @@
        </div>
      </div>
    </section>
-  </main>
+    </main>
+  </div>
 </template>

 <script setup lang="ts">
--- a/app/pages/sites.vue
+++ b/app/pages/sites.vue
@@ -24,11 +24,11 @@

      <div v-else-if="sites.length === 0" class="text-center py-12">
        <div class="max-w-md mx-auto">
-          <IconLucideMapPin class="w-16 h-16 mx-auto text-gray-400 mb-4" aria-hidden="true" />
-          <h3 class="text-lg font-medium text-gray-900 mb-2">
+          <IconLucideMapPin class="w-16 h-16 mx-auto text-base-content/30 mb-4" aria-hidden="true" />
+          <h3 class="text-lg font-medium text-base-content mb-2">
            Aucun site trouvé
          </h3>
-          <p class="text-gray-500 mb-4">
+          <p class="text-base-content/50 mb-4">
            Commencez par ajouter votre premier site.
          </p>
          <button v-if="canEdit" class="btn btn-primary" @click="openCreateSiteModal">