feat(ui) : add site colors, dark mode toggle and card styling improvements

- Site color field with color picker in create/edit modals
- Dark mode theme (mytheme-dark) with toggle in navbar
- Stronger site color visibility on cards (gradient, top border, badges)
- Bigger action buttons (btn-sm) on machine cards
- White card backgrounds with proper dark mode support

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

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">
+    <footer class="border-t border-base-300/50 bg-base-100/60 backdrop-blur-sm">
-      <div class="items-center grid-flow-col">
+      <div class="container mx-auto flex items-center justify-between px-6 py-3">
-        <p>
+        <p class="text-xs text-base-content/40 font-medium tracking-wide">
-          @Malio 2025 · <NuxtLink to="/changelog" class="link link-hover">v{{ appVersion }}</NuxtLink>
+          &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>

app/assets/app.css

@@ -1,55 +1,136 @@
+/* ─── 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 */
+  default: true;
-  prefersdark: false; /* set as default dark mode (prefers-color-scheme:dark) */
+  prefersdark: false;
-  color-scheme: light; /* color of browser-provided UI */
+  color-scheme: light;
 
-  /* #FBFAFA — gris clair */
+  /* Surfaces — warm gray with a hint of blue */
-  --color-base-100: oklch(98% 0.003 0);
+  --color-base-100: oklch(98.5% 0.004 260);
-  --color-base-200: oklch(94% 0.01 262);
+  --color-base-200: oklch(95% 0.008 260);
-  --color-base-300: oklch(90% 0.02 262);
+  --color-base-300: oklch(91% 0.015 260);
-  --color-base-content: oklch(20% 0.03 262);
+  --color-base-content: oklch(22% 0.025 260);
-  /* #304998 — bleu Malio */
+
-  --color-primary: oklch(37% 0.15 262);
+  /* 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);
+  /* Secondary — refined lavender */
-  --color-secondary-content: oklch(20% 0.03 270);
+  --color-secondary: oklch(72% 0.06 275);
-  /* #ED8521 — orange */
+  --color-secondary-content: oklch(22% 0.03 275);
-  --color-accent: oklch(71% 0.17 58);
+
-  --color-accent-content: oklch(98% 0.005 58);
+  /* Accent — warm amber-orange */
-  /* neutral dérivé du bleu Malio */
+  --color-accent: oklch(72% 0.17 55);
-  --color-neutral: oklch(37% 0.08 262);
+  --color-accent-content: oklch(20% 0.04 55);
-  --color-neutral-content: oklch(98% 0.005 262);
+
-  --color-info: oklch(55% 0.12 262);
+  /* Neutral — deep slate */
-  --color-info-content: oklch(98% 0.005 262);
+  --color-neutral: oklch(28% 0.04 260);
-  --color-success: oklch(65% 0.2 145);
+  --color-neutral-content: oklch(95% 0.005 260);
-  --color-success-content: oklch(98% 0.005 145);
+
+  /* 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-warning-content: oklch(22% 0.05 70);
-  --color-error: oklch(60% 0.25 25);
+  --color-error: oklch(58% 0.22 25);
   --color-error-content: oklch(98% 0.005 25);
 
-  /* border radius */
+  /* Geometry */
-  --radius-selector: 1rem;
+  --radius-selector: 0.75rem;
-  --radius-field: 0.25rem;
+  --radius-field: 0.375rem;
-  --radius-box: 0.5rem;
+  --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 */
+@plugin "daisyui/theme" {
+  name: "mytheme-dark";
+  default: false;
+  prefersdark: true;
+  color-scheme: dark;
+
+  /* Surfaces — dark blue-gray */
+  --color-base-100: oklch(22% 0.015 260);
+  --color-base-200: oklch(18% 0.012 260);
+  --color-base-300: oklch(28% 0.018 260);
+  --color-base-content: oklch(92% 0.005 260);
+
+  /* Primary — Malio blue, brighter for dark */
+  --color-primary: oklch(55% 0.18 262);
+  --color-primary-content: oklch(98% 0.005 262);
+
+  /* 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 — lighter slate for dark mode */
+  --color-neutral: oklch(75% 0.02 260);
+  --color-neutral-content: oklch(18% 0.01 260);
+
+  /* Semantic */
+  --color-info: oklch(62% 0.14 255);
+  --color-info-content: oklch(98% 0.005 255);
+  --color-success: oklch(65% 0.19 150);
+  --color-success-content: oklch(98% 0.005 150);
+  --color-warning: oklch(78% 0.15 70);
+  --color-warning-content: oklch(22% 0.05 70);
+  --color-error: oklch(62% 0.22 25);
+  --color-error-content: oklch(98% 0.005 25);
+
+  /* Geometry — same as light */
+  --radius-selector: 0.75rem;
+  --radius-field: 0.375rem;
+  --radius-box: 0.625rem;
+
+  --size-selector: 0.25rem;
+  --size-field: 0.25rem;
+
+  --border: 1px;
+  --depth: 1;
+  --noise: 0;
+}
+
+/* ─── 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 +139,6 @@
   --spacing-xl: 2rem;
 }
 
-/* Densité compacte */
 .density-compact {
   --spacing-xs: 0.25rem;
   --spacing-sm: 0.5rem;
@@ -67,7 +147,6 @@
   --spacing-xl: 1.25rem;
 }
 
-/* Densité confortable (défaut) */
 .density-comfortable {
   --spacing-xs: 0.5rem;
   --spacing-sm: 0.75rem;
@@ -76,7 +155,6 @@
   --spacing-xl: 2rem;
 }
 
-/* Densité espacée */
 .density-spacious {
   --spacing-xs: 0.75rem;
   --spacing-sm: 1rem;
@@ -85,251 +163,200 @@
   --spacing-xl: 3rem;
 }
 
-/* Contraste élevé avec DaisyUI */
+/* ─── High contrast mode ─── */
-.contrast-high .btn {
+.contrast-high .btn { @apply border-2; }
-  @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 {
+/* ─── Accessibility ─── */
-  @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é */
 @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;
+}
+
+.site-card {
+  background-color: oklch(100% 0 0);
+}
+
+[data-theme="mytheme-dark"] .site-card {
+  background-color: oklch(24% 0.015 260);
+}
+
+[data-theme="mytheme-dark"] .card {
+  border-color: oklch(30% 0.02 260 / 0.6);
+}
+
+.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);
+}
+
+[data-theme="mytheme-dark"] .navbar-glass {
+  background: oklch(22% 0.015 260 / 0.85);
+  border-bottom-color: oklch(30% 0.02 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;
+  transition: opacity 0.25s ease;
-  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 */
 }
 
-.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;
+  font-family: var(--font-body);
-  transform: none !important;
+  border-radius: 0.75rem;
-  scale: 1 !important;
+  border: 1px solid oklch(91% 0.015 260 / 0.5);
-  width: auto !important;
-  max-width: 500px !important;
 }
 
-.modal .form-control {
+@keyframes modalSlideUp {
-  font-size: 100% !important;
+  from { opacity: 0; transform: translateY(0.5rem); }
-  transform: none !important;
+  to { opacity: 1; transform: translateY(0); }
 }
 
-.modal .btn {
+.modal.modal-open .modal-box {
-  font-size: 100% !important;
+  animation: modalSlideUp 0.25s ease-out;
-  transform: none !important;
-  padding: 0.5rem 1rem !important;
-  height: auto !important;
-  min-height: 2.5rem !important;
 }
 
-.modal .input {
+/* ─── Page transitions ─── */
-  font-size: 100% !important;
+.page-enter-active {
-  transform: none !important;
+  transition: opacity 0.2s ease, transform 0.2s ease;
-  height: auto !important;
+}
-  min-height: 2.5rem !important;
+.page-leave-active {
+  transition: opacity 0.15s ease;
+}
+.page-enter-from {
+  opacity: 0;
+  transform: translateY(4px);
+}
+.page-leave-to {
+  opacity: 0;
 }
 
-.modal .select {
+/* ─── Scrollbar styling ─── */
-  font-size: 100% !important;
+::-webkit-scrollbar {
-  transform: none !important;
+  width: 6px;
-  height: auto !important;
+  height: 6px;
-  min-height: 2.5rem !important;
+}
+::-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 {
+/* ─── Readability ─── */
-  font-size: 100% !important;
+.text-sm { line-height: 1.5; }
-  transform: none !important;
+.text-xs { line-height: 1.4; }
-  min-height: 4rem !important;
-}
 
-.modal .range {
+/* ─── Adaptive spacing ─── */
-  font-size: 100% !important;
+.p-1 { padding: var(--spacing-xs); }
-  transform: none !important;
+.p-2 { padding: var(--spacing-sm); }
-  height: auto !important;
+.p-3 { padding: var(--spacing-md); }
-  min-height: 1.5rem !important;
+.p-4 { padding: var(--spacing-lg); }
-}
+.p-5 { padding: var(--spacing-xl); }
 
-.modal .label {
+.m-1 { margin: var(--spacing-xs); }
-  font-size: 100% !important;
+.m-2 { margin: var(--spacing-sm); }
-  transform: none !important;
+.m-3 { margin: var(--spacing-md); }
-}
+.m-4 { margin: var(--spacing-lg); }
+.m-5 { margin: var(--spacing-xl); }
 
-.modal .label-text {
+.gap-1 { gap: var(--spacing-xs); }
-  font-size: 100% !important;
+.gap-2 { gap: var(--spacing-sm); }
-  transform: none !important;
+.gap-3 { gap: var(--spacing-md); }
-}
+.gap-4 { gap: var(--spacing-lg); }
-
+.gap-5 { gap: var(--spacing-xl); }
-.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);
-}
 
 @layer components {
   .form-control .label {
@@ -337,7 +364,6 @@
     padding-bottom: 0;
     margin-right: 15px;
   }
-
   .form-control .label + * {
     margin-top: var(--spacing-xs);
   }

app/components/ComponentHierarchy.vue

@@ -5,11 +5,13 @@
       <ComponentItem
         :component="component"
         :is-edit-mode="isEditMode"
+        :show-delete="showDelete"
         :collapse-all="collapseAll"
         :toggle-token="toggleToken"
         @update="$emit('update', $event)"
         @edit-piece="$emit('edit-piece', $event)"
         @custom-field-update="$emit('custom-field-update', $event)"
+        @delete="$emit('delete')"
       />
     </div>
   </div>
@@ -27,6 +29,10 @@ defineProps({
     type: Boolean,
     default: false
   },
+  showDelete: {
+    type: Boolean,
+    default: false
+  },
   collapseAll: {
     type: Boolean,
     default: true
@@ -37,5 +43,5 @@ defineProps({
   }
 })
 
-defineEmits(['update', 'edit-piece', 'custom-field-update'])
+defineEmits(['update', 'edit-piece', 'custom-field-update', 'delete'])
 </script>

app/components/ComponentItem.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="space-y-4">
+  <div>
     <DocumentPreviewModal
       :document="previewDocument"
       :visible="previewVisible"
@@ -8,211 +8,175 @@
     />
 
     <!-- Component Header -->
-    <div class="flex items-start justify-between p-4 bg-base-200 rounded-lg">
+    <div class="flex items-center gap-3 p-3 bg-base-200 rounded-lg cursor-pointer" @click="toggleCollapse">
-      <div class="flex items-start gap-3 w-full">
+      <IconLucideChevronRight
-        <button
+        class="w-4 h-4 shrink-0 transition-transform text-base-content/50"
-          type="button"
+        :class="{ 'rotate-90': !isCollapsed }"
-          class="btn btn-ghost btn-sm btn-circle shrink-0 transition-transform"
+        aria-hidden="true"
-          :class="{ 'rotate-90': !isCollapsed }"
+      />
-          :aria-expanded="!isCollapsed"
+      <div class="flex-1 min-w-0">
-          :title="isCollapsed ? 'Déplier les détails du composant' : 'Replier les détails du composant'"
+        <div class="flex items-center gap-2 flex-wrap">
-          @click="toggleCollapse"
+          <h3 class="text-sm font-semibold text-base-content truncate">
-        >
-          <IconLucideChevronRight class="w-5 h-5 transition-transform" aria-hidden="true" />
-          <span class="sr-only">{{ isCollapsed ? 'Déplier' : 'Replier' }} le composant</span>
-        </button>
-        <div class="flex-1">
-          <h3 class="text-lg font-semibold">
             {{ component.name }}
           </h3>
-          <div class="flex flex-wrap gap-2 mt-2">
+          <span v-if="component.reference" class="badge badge-outline badge-xs">{{ component.reference }}</span>
-            <span v-if="component.reference" class="badge badge-outline badge-sm">{{ component.reference }}</span>
+          <span v-if="component.prix" class="badge badge-primary badge-xs">{{ component.prix }}€</span>
-            <template v-if="componentConstructeursDisplay.length">
+        </div>
-              <span
+        <div v-if="componentConstructeursDisplay.length || displayProductName" class="flex flex-wrap gap-1.5 mt-1">
-                v-for="constructeur in componentConstructeursDisplay"
+          <span
-                :key="constructeur.id"
+            v-for="constructeur in componentConstructeursDisplay"
-                class="badge badge-outline badge-sm"
+            :key="constructeur.id"
-              >
+            class="text-xs text-base-content/50"
-                {{ constructeur.name }}
+          >
-              </span>
+            {{ constructeur.name }}
-            </template>
+          </span>
-            <span v-if="component.prix" class="badge badge-primary badge-sm">{{ component.prix }}€</span>
+          <span v-if="displayProductName" class="badge badge-info badge-xs">
-            <span
+            {{ displayProductName }}
-              v-if="displayProductName"
+          </span>
-              class="badge badge-info badge-sm"
-            >
-              Produit&nbsp;: {{ displayProductName }}
-            </span>
-          </div>
         </div>
       </div>
+      <button
+        v-if="showDelete"
+        type="button"
+        class="btn btn-ghost btn-xs text-error shrink-0"
+        title="Supprimer ce composant"
+        @click.stop="$emit('delete')"
+      >
+        Supprimer
+      </button>
     </div>
 
-    <div v-show="!isCollapsed" class="space-y-4">
+    <!-- Expanded content -->
-      <!-- Component Info Display - Editable or Read-only -->
+    <div v-show="!isCollapsed" class="mt-3 space-y-4 pl-7">
-      <div class="p-4 bg-base-100 border border-gray-200 rounded-lg">
+      <!-- Info fields -->
-        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
+      <div v-if="isEditMode" class="grid grid-cols-1 md:grid-cols-2 gap-3">
-          <div class="form-control">
+        <div class="form-control">
-            <label class="label"><span class="label-text font-medium">Nom</span></label>
+          <label class="label py-1"><span class="label-text text-xs font-medium text-base-content/60">Nom</span></label>
-            <input
+          <input v-model="component.name" type="text" class="input input-bordered input-sm" @blur="updateComponent">
-              v-if="isEditMode"
+        </div>
-              v-model="component.name"
+        <div class="form-control">
-              type="text"
+          <label class="label py-1"><span class="label-text text-xs font-medium text-base-content/60">Référence</span></label>
-              class="input input-bordered input-sm"
+          <input v-model="component.reference" type="text" class="input input-bordered input-sm" @blur="updateComponent">
-              @blur="updateComponent"
+        </div>
+        <div class="form-control">
+          <label class="label py-1"><span class="label-text text-xs font-medium text-base-content/60">Prix</span></label>
+          <input v-model="component.prix" type="number" step="0.01" class="input input-bordered input-sm" @blur="updateComponent">
+        </div>
+        <div class="form-control">
+          <label class="label py-1"><span class="label-text text-xs font-medium text-base-content/60">Fournisseur</span></label>
+          <ConstructeurSelect
+            class="w-full"
+            :model-value="componentConstructeurIds"
+            :initial-options="componentConstructeursDisplay"
+            @update:model-value="handleConstructeurChange"
+          />
+        </div>
+      </div>
+
+      <!-- Read-only info -->
+      <div v-else class="grid grid-cols-2 md:grid-cols-4 gap-x-6 gap-y-3 text-sm">
+        <div>
+          <p class="text-xs text-base-content/40 mb-0.5">Nom</p>
+          <p class="text-base-content">{{ component.name }}</p>
+        </div>
+        <div>
+          <p class="text-xs text-base-content/40 mb-0.5">Référence</p>
+          <p class="text-base-content">{{ component.reference || '—' }}</p>
+        </div>
+        <div>
+          <p class="text-xs text-base-content/40 mb-0.5">Prix</p>
+          <p class="text-base-content">{{ component.prix ? `${component.prix} €` : '—' }}</p>
+        </div>
+        <div>
+          <p class="text-xs text-base-content/40 mb-0.5">Fournisseur</p>
+          <div v-if="componentConstructeursDisplay.length">
+            <p
+              v-for="constructeur in componentConstructeursDisplay"
+              :key="constructeur.id"
+              class="text-base-content"
             >
-            <div v-else class="input input-bordered input-sm bg-base-200">
+              {{ constructeur.name }}
-              {{ component.name }}
+              <span v-if="formatConstructeurContact(constructeur)" class="text-xs text-base-content/50 block">
-            </div>
+                {{ formatConstructeurContact(constructeur) }}
+              </span>
+            </p>
           </div>
-          <div class="form-control">
+          <p v-else class="text-base-content">—</p>
-            <label class="label"><span class="label-text font-medium">Référence</span></label>
+        </div>
-            <input
+      </div>
-              v-if="isEditMode"
+
-              v-model="component.reference"
+      <!-- Product -->
-              type="text"
+      <div v-if="displayProduct" class="rounded-lg border border-base-200 bg-base-100 p-3">
-              class="input input-bordered input-sm"
+        <div class="flex items-start justify-between gap-3">
-              @blur="updateComponent"
+          <div class="space-y-1">
+            <p class="text-xs text-base-content/40">Produit catalogue</p>
+            <p class="text-sm font-semibold text-base-content">{{ displayProductName }}</p>
+            <p
+              v-for="info in productInfoRows"
+              :key="info.label"
+              class="text-xs text-base-content/60"
             >
-            <div v-else class="input input-bordered input-sm bg-base-200">
+              {{ info.label }} : {{ info.value }}
-              {{ component.reference || 'Non définie' }}
+            </p>
-            </div>
           </div>
-          <div class="form-control">
+          <NuxtLink
-            <label class="label"><span class="label-text font-medium">Prix</span></label>
+            v-if="component.product?.id"
-            <input
+            :to="`/product/${component.product.id}/edit`"
-              v-if="isEditMode"
+            class="btn btn-ghost btn-xs shrink-0"
-              v-model="component.prix"
+          >
-              type="number"
+            Voir le produit
-              step="0.01"
+          </NuxtLink>
-              class="input input-bordered input-sm"
+        </div>
-              @blur="updateComponent"
+        <!-- Product documents -->
-            >
+        <div v-if="productDocuments.length" class="mt-3 pt-3 border-t border-base-200 space-y-2">
-            <div v-else class="input input-bordered input-sm bg-base-200">
+          <p class="text-xs font-medium text-base-content/50">Documents du produit</p>
-              {{ component.prix ? `${component.prix}€` : 'Non défini' }}
+          <div
-            </div>
+            v-for="document in productDocuments"
-          </div>
+            :key="document.id || document.path || document.name"
-          <div class="form-control">
+            class="flex items-center justify-between gap-3 text-xs"
-            <label class="label"><span class="label-text font-medium">Fournisseur</span></label>
+          >
-            <ConstructeurSelect
+            <div class="flex items-center gap-2 min-w-0">
-              v-if="isEditMode"
+              <div class="flex-shrink-0 overflow-hidden rounded border border-base-200 bg-base-200/70 flex items-center justify-center h-8 w-7">
-              class="w-full"
+                <img
-              :model-value="componentConstructeurIds"
+                  v-if="isImageDocument(document) && (document.fileUrl || document.path)"
-              :initial-options="componentConstructeursDisplay"
+                  :src="document.fileUrl || document.path"
-              @update:model-value="handleConstructeurChange"
+                  class="h-full w-full object-cover"
-            />
+                  :alt="`Aperçu de ${document.name}`"
-            <div v-else class="input input-bordered input-sm bg-base-200">
-              <div v-if="componentConstructeursDisplay.length" class="space-y-1">
-                <div
-                  v-for="constructeur in componentConstructeursDisplay"
-                  :key="constructeur.id"
-                  class="flex flex-col"
                 >
-                  <span class="font-medium">{{ constructeur.name }}</span>
+                <iframe
-                  <span
+                  v-else-if="shouldInlinePdf(document)"
-                    v-if="formatConstructeurContact(constructeur)"
+                  :src="documentPreviewSrc(document)"
-                    class="text-xs text-gray-500"
+                  class="h-full w-full border-0 bg-white"
-                  >
+                  title="Aperçu PDF"
-                    {{ formatConstructeurContact(constructeur) }}
+                />
-                  </span>
+                <component
-                </div>
+                  v-else
+                  :is="documentIcon(document).component"
+                  class="h-4 w-4"
+                  :class="documentIcon(document).colorClass"
+                  aria-hidden="true"
+                />
               </div>
-              <span v-else class="font-medium">Non défini</span>
+              <span class="truncate text-base-content">{{ document.name }}</span>
             </div>
-          </div>
+            <div class="flex items-center gap-1 shrink-0">
-          <div class="form-control md:col-span-2">
+              <button
-            <label class="label">
+                type="button"
-              <span class="label-text font-medium">Produit catalogue</span>
+                class="btn btn-ghost btn-xs"
-            </label>
+                :disabled="!canPreviewDocument(document)"
-            <div class="input input-bordered input-sm bg-base-200 min-h-[2.75rem] flex flex-col justify-center space-y-1">
+                @click="openPreview(document)"
-              <template v-if="displayProduct">
-                <span class="font-semibold text-base-content">
-                  {{ displayProductName || 'Produit catalogue' }}
-                </span>
-                <span
-                  v-for="info in productInfoRows"
-                  :key="info.label"
-                  class="text-xs text-base-content/70"
-                >
-                  {{ info.label }} : {{ info.value }}
-                </span>
-                <NuxtLink
-                  v-if="component.product?.id"
-                  :to="`/product/${component.product.id}/edit`"
-                  class="link link-primary text-xs"
-                >
-                  Ouvrir la fiche produit
-                </NuxtLink>
-              </template>
-              <span v-else class="font-medium">Non défini</span>
-            </div>
-            <div
-              v-if="productDocuments.length"
-              class="mt-2 space-y-2 rounded-md border border-base-200 bg-base-100 p-3 text-xs"
-            >
-              <h4 class="font-medium text-base-content">
-                Documents du produit
-              </h4>
-              <div
-                v-for="document in productDocuments"
-                :key="document.id || document.path || document.name"
-                class="flex items-center justify-between gap-3 rounded border border-base-200 bg-base-100 px-3 py-2"
               >
-                <div class="flex items-center gap-3">
+                Consulter
-                  <div
+              </button>
-                    class="flex-shrink-0 overflow-hidden rounded-md border border-base-200 bg-base-200/70 flex items-center justify-center h-12 w-10"
+              <button type="button" class="btn btn-ghost btn-xs" @click="downloadDocument(document)">
-                  >
+                Télécharger
-                    <img
+              </button>
-                      v-if="isImageDocument(document) && (document.fileUrl || document.path)"
-                      :src="document.fileUrl || document.path"
-                      class="h-full w-full object-cover"
-                      :alt="`Aperçu de ${document.name}`"
-                    >
-                    <iframe
-                      v-else-if="shouldInlinePdf(document)"
-                      :src="documentPreviewSrc(document)"
-                      class="h-full w-full border-0 bg-white"
-                      title="Aperçu PDF"
-                    />
-                    <component
-                      v-else
-                      :is="documentIcon(document).component"
-                      class="h-6 w-6"
-                      :class="documentIcon(document).colorClass"
-                      aria-hidden="true"
-                    />
-                  </div>
-                  <div>
-                    <div class="font-medium text-base-content">
-                      {{ document.name }}
-                    </div>
-                    <div class="text-xs text-base-content/70">
-                      {{ document.mimeType || 'Inconnu' }} • {{ formatSize(document.size) }}
-                    </div>
-                  </div>
-                </div>
-                <div class="flex items-center gap-2 text-xs">
-                  <button
-                    type="button"
-                    class="btn btn-ghost btn-xs"
-                    :disabled="!canPreviewDocument(document)"
-                    :title="canPreviewDocument(document) ? 'Consulter le document' : 'Aucun aperçu disponible pour ce type'"
-                    @click="openPreview(document)"
-                  >
-                    Consulter
-                  </button>
-                  <button type="button" class="btn btn-ghost btn-xs" @click="downloadDocument(document)">
-                    Télécharger
-                  </button>
-                </div>
-              </div>
             </div>
           </div>
         </div>
-
       </div>
 
-      <!-- Custom Fields Display - Editable or Read-only -->
+      <!-- Custom Fields -->
       <CustomFieldDisplay
         :fields="displayedCustomFields"
         :is-edit-mode="isEditMode"
@@ -220,18 +184,17 @@
         @field-blur="updateComponentCustomField"
       />
 
-      <div class="mt-4 pt-4 border-t border-gray-200 space-y-3">
+      <!-- Documents -->
+      <div class="space-y-2">
         <div class="flex items-center justify-between">
-          <h4 class="font-semibold text-sm text-gray-700">
+          <p class="text-xs font-semibold text-base-content/50 uppercase tracking-wide">Documents</p>
-            Documents
+          <span v-if="isEditMode && selectedFiles.length" class="badge badge-outline badge-xs">
-          </h4>
+            {{ selectedFiles.length }} fichier{{ selectedFiles.length > 1 ? 's' : '' }}
-          <span v-if="isEditMode && selectedFiles.length" class="badge badge-outline">
-            {{ selectedFiles.length }} fichier{{ selectedFiles.length > 1 ? 's' : '' }} sélectionné{{ selectedFiles.length > 1 ? 's' : '' }}
           </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...
+          Chargement...
         </p>
 
         <DocumentUpload
@@ -254,10 +217,10 @@
 
       <!-- Component Pieces -->
       <div v-if="component.pieces && component.pieces.length > 0" class="space-y-2">
-        <h4 class="font-semibold text-gray-700">
+        <p class="text-xs font-semibold text-base-content/50 uppercase tracking-wide">
           Pièces du composant
-        </h4>
+        </p>
-        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
+        <div class="space-y-2">
           <PieceItem
             v-for="piece in component.pieces"
             :key="piece.id"
@@ -271,11 +234,11 @@
       </div>
 
       <!-- Sub Components -->
-      <div v-if="childComponents.length > 0" class="space-y-3">
+      <div v-if="childComponents.length > 0" class="space-y-2">
-        <h4 class="font-semibold text-gray-700">
+        <p class="text-xs font-semibold text-base-content/50 uppercase tracking-wide">
           Sous-composants
-        </h4>
+        </p>
-        <div class="space-y-3 pl-4 border-l-2 border-gray-200">
+        <div class="space-y-2 pl-4 border-l-2 border-base-200">
           <ComponentItem
             v-for="subComponent in childComponents"
             :key="subComponent.id"
@@ -321,11 +284,12 @@ import { useEntityCustomFields } from '~/composables/useEntityCustomFields'
 const props = defineProps({
   component: { type: Object, required: true },
   isEditMode: { type: Boolean, default: false },
+  showDelete: { type: Boolean, default: false },
   collapseAll: { type: Boolean, default: true },
   toggleToken: { type: Number, default: 0 },
 })
 
-const emit = defineEmits(['update', 'edit-piece', 'custom-field-update'])
+const emit = defineEmits(['update', 'edit-piece', 'custom-field-update', 'delete'])
 
 // --- Shared composables ---
 const {

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">

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>

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)">

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>

app/components/PageHero.vue

@@ -1,11 +1,11 @@
 <template>
   <section :class="sectionClasses">
     <div :class="contentClasses">
-      <div :class="['space-y-4', maxWidthClass]">
+      <div :class="['space-y-3', maxWidthClass]">
-        <component :is="headingTag" v-if="title" class="text-4xl font-bold">
+        <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
 })

app/components/PieceItem.vue

@@ -9,7 +9,7 @@
 
     <!-- Piece Header (collapsible, same pattern as ComponentItem) -->
     <div class="flex items-start justify-between p-4 bg-base-200 rounded-lg">
-      <div class="flex items-start gap-3 w-full">
+      <div class="flex items-start gap-3 flex-1 min-w-0">
         <button
           type="button"
           class="btn btn-ghost btn-sm btn-circle shrink-0 transition-transform"
@@ -21,7 +21,7 @@
           <IconLucideChevronRight class="w-5 h-5 transition-transform" aria-hidden="true" />
           <span class="sr-only">{{ isCollapsed ? 'Déplier' : 'Replier' }} la pièce</span>
         </button>
-        <div class="flex-1">
+        <div class="flex-1 min-w-0">
           <h3 class="text-lg font-semibold">
             {{ pieceData.name }}
           </h3>
@@ -49,10 +49,19 @@
           </div>
         </div>
       </div>
+      <button
+        v-if="showDelete"
+        type="button"
+        class="btn btn-ghost btn-xs text-error shrink-0"
+        title="Supprimer cette pièce"
+        @click="$emit('delete')"
+      >
+        Supprimer
+      </button>
     </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 +91,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 +195,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 +209,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>
 
@@ -250,11 +259,12 @@ import { useEntityCustomFields } from '~/composables/useEntityCustomFields'
 const props = defineProps({
   piece: { type: Object, required: true },
   isEditMode: { type: Boolean, default: false },
+  showDelete: { type: Boolean, default: false },
   collapseAll: { type: Boolean, default: true },
   toggleToken: { type: Number, default: 0 },
 })
 
-const emit = defineEmits(['update', 'edit', 'custom-field-update'])
+const emit = defineEmits(['update', 'edit', 'custom-field-update', 'delete'])
 
 // --- Local reactive data for editing ---
 const pieceData = reactive({

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>
 

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">

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">

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>

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>
 

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>

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>

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">

app/components/layout/AppNavbar.vue

@@ -1,18 +1,28 @@
 <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="toggleDarkMode"
+            >
+              <IconLucideSun v-if="isDark" class="w-4 h-4" aria-hidden="true" />
+              <IconLucideMoon v-else class="w-4 h-4" aria-hidden="true" />
+              {{ isDark ? 'Mode clair' : 'Mode sombre' }}
+            </button>
+          </li>
+          <li class="pt-1 pb-2 lg:hidden">
+            <button
+              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 +34,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 +50,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 +62,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 +70,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 +91,28 @@
       </div>
 
       <!-- Logo -->
-      <div class="flex items-center space-x-3">
+      <NuxtLink to="/" class="flex items-center gap-2.5 group">
-        <div class="avatar">
+        <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">
-          <div class="w-14">
+          <img
-            <img
+            :src="logoSrc"
-              :src="logoSrc"
+            alt="Logo Malio"
-              alt="Logo Malio"
+            class="h-full w-full object-contain"
-              class="h-full w-full object-contain"
+          />
-            />
-          </div>
         </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>
+        </span>
-      </div>
+      </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 +132,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 +141,21 @@
           >
             <component :is="group.icon" v-if="group.icon" class="w-4 h-4" aria-hidden="true" />
             {{ group.label }}
-            <IconLucideChevronRight
+            <IconLucideChevronDown
-              class="h-4 w-4 transition-transform"
+              class="h-3.5 w-3.5 transition-transform duration-200"
-              :class="openDropdown === group.id + '-desktop' ? 'rotate-90' : ''"
+              :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 +172,21 @@
 
     <!-- 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="isDark ? 'Mode clair' : 'Mode sombre'"
+          @click="toggleDarkMode"
+        >
+          <IconLucideSun v-if="isDark" class="w-4 h-4" aria-hidden="true" />
+          <IconLucideMoon v-else class="w-4 h-4" aria-hidden="true" />
+        </button>
+        <button
+          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 +194,7 @@
             <div
               tabindex="0"
               role="button"
-              class="btn btn-ghost btn-circle avatar placeholder indicator"
+              class="indicator cursor-pointer"
             >
               <span
                 v-if="unresolvedCount > 0"
@@ -187,47 +203,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 flex items-center justify-center"
               >
-                <span
+                <span class="text-xs font-semibold">
-                  class="flex h-full w-full items-center justify-center text-sm 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">
+              <li class="px-3 py-2">
-                Connecté en tant que<br />
+                <div class="flex flex-col gap-1 pointer-events-none">
-                <span class="font-semibold text-base-content">{{ activeProfileLabel }}</span>
+                  <span class="text-xs text-base-content/50">Connecté en tant que</span>
-                <span class="badge badge-sm" :class="roleBadgeClass">{{ roleLabel }}</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 +266,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'
@@ -256,6 +275,8 @@ import IconLucideCpu from '~icons/lucide/cpu'
 import IconLucidePuzzle from '~icons/lucide/puzzle'
 import IconLucidePackage from '~icons/lucide/package'
 import IconLucideLink from '~icons/lucide/link'
+import IconLucideSun from '~icons/lucide/sun'
+import IconLucideMoon from '~icons/lucide/moon'
 import logoSrc from '~/assets/LOGO_CARRE_BLANC.png'
 
 defineEmits<{
@@ -333,6 +354,7 @@ const { openDropdown, setDropdown, scheduleDropdownClose, toggleDropdown } = use
 const { activeProfile } = useProfileSession()
 const { isAdmin, canEdit } = usePermissions()
 const { fetchUnresolvedCount } = useComments()
+const { isDark, toggle: toggleDarkMode, init: initDarkMode } = useDarkMode()
 
 const unresolvedCount = ref(0)
 let pollInterval: ReturnType<typeof setInterval> | null = null
@@ -343,6 +365,7 @@ const refreshUnresolvedCount = async () => {
 }
 
 onMounted(() => {
+  initDarkMode()
   refreshUnresolvedCount()
   pollInterval = setInterval(refreshUnresolvedCount, 60_000)
 })
@@ -365,19 +388,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 +441,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,

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>
@@ -25,22 +25,15 @@
       </div>
 
       <div v-else class="space-y-2">
-        <div v-for="component in components" :key="component.id" class="relative">
+        <div v-for="component in components" :key="component.id">
-          <button
-            v-if="isEditMode"
-            type="button"
-            class="btn btn-error btn-xs absolute top-2 right-2 z-10"
-            title="Supprimer ce composant"
-            @click="$emit('remove-component', component.linkId || component.id)"
-          >
-            Supprimer
-          </button>
           <ComponentHierarchy
             :components="[component]"
             :is-edit-mode="false"
+            :show-delete="isEditMode"
             :collapse-all="collapsed"
             :toggle-token="collapseToggleToken"
             @edit-piece="$emit('edit-piece', $event)"
+            @delete="$emit('remove-component', component.linkId || component.id)"
           />
         </div>
       </div>

app/components/machine/MachineCustomFieldDefEditor.vue

@@ -84,7 +84,7 @@
 
           <button
             type="button"
-            class="btn btn-error btn-xs btn-square"
+            class="btn btn-ghost btn-xs btn-square text-error"
             @click="$emit('remove-field', index)"
           >
             <IconLucideTrash class="w-4 h-4" aria-hidden="true" />

app/components/machine/MachineCustomFieldsCard.vue

@@ -0,0 +1,221 @@
+<template>
+  <div class="card bg-base-100 shadow-lg">
+    <div class="card-body space-y-4">
+      <div class="flex items-center justify-between">
+        <div>
+          <h2 class="card-title">Champs personnalisés</h2>
+          <p class="text-xs text-gray-500">
+            Champs personnalisés propres à cette machine.
+          </p>
+        </div>
+        <span v-if="visibleCustomFields.length" class="badge badge-outline">
+          {{ visibleCustomFields.length }} champ{{ visibleCustomFields.length > 1 ? 's' : '' }}
+        </span>
+      </div>
+
+      <!-- View mode: display values -->
+      <template v-if="!isEditMode">
+        <div v-if="visibleCustomFields.length" class="grid grid-cols-1 md:grid-cols-2 gap-4">
+          <div
+            v-for="field in visibleCustomFields"
+            :key="field.customFieldValueId || field.id || field.name"
+            class="form-control"
+          >
+            <label class="label">
+              <span class="label-text text-sm">{{ field.name }}</span>
+            </label>
+            <div class="input input-bordered input-sm bg-base-200">
+              {{ formatCustomFieldValue(field) }}
+            </div>
+          </div>
+        </div>
+        <p v-else class="text-xs text-gray-500">
+          Aucun champ personnalisé défini pour cette machine.
+        </p>
+      </template>
+
+      <!-- Edit mode: definition management + value editing -->
+      <template v-else>
+        <p v-if="!customFields.length" class="text-xs text-gray-500">
+          Aucun champ personnalisé défini.
+        </p>
+
+        <div v-else class="space-y-3">
+          <div
+            v-for="(field, index) in customFields"
+            :key="field.id || field.name || index"
+            class="border border-base-200 rounded-md p-3 space-y-2"
+          >
+            <div class="flex items-start justify-between gap-2">
+              <div class="flex-1 space-y-2">
+                <!-- Definition fields -->
+                <div class="grid grid-cols-1 md:grid-cols-3 gap-2">
+                  <input
+                    :value="field.name"
+                    type="text"
+                    class="input input-bordered input-sm"
+                    placeholder="Nom du champ"
+                    @blur="handleDefinitionUpdate(field, 'name', ($event.target as HTMLInputElement).value)"
+                  />
+                  <select
+                    :value="field.type || 'text'"
+                    class="select select-bordered select-sm"
+                    @change="handleDefinitionUpdate(field, 'type', ($event.target as HTMLSelectElement).value)"
+                  >
+                    <option value="text">Texte</option>
+                    <option value="number">Nombre</option>
+                    <option value="select">Liste</option>
+                    <option value="boolean">Oui/Non</option>
+                    <option value="date">Date</option>
+                  </select>
+                  <div class="flex items-center gap-2 text-sm">
+                    <input
+                      type="checkbox"
+                      class="checkbox checkbox-sm"
+                      :checked="!!field.required"
+                      @change="handleDefinitionUpdate(field, 'required', ($event.target as HTMLInputElement).checked)"
+                    />
+                    Obligatoire
+                  </div>
+                </div>
+
+                <!-- Options for select type -->
+                <textarea
+                  v-if="(field.type || 'text') === 'select'"
+                  :value="field.optionsText || (Array.isArray(field.options) ? field.options.join('\n') : '')"
+                  class="textarea textarea-bordered textarea-sm h-20 w-full"
+                  placeholder="Option 1&#10;Option 2"
+                  @blur="handleOptionsUpdate(field, ($event.target as HTMLTextAreaElement).value)"
+                ></textarea>
+
+                <!-- Value editing -->
+                <div class="pt-1 border-t border-base-200">
+                  <label class="label py-0">
+                    <span class="label-text text-xs text-base-content/60">Valeur</span>
+                  </label>
+                  <input
+                    v-if="!field.type || field.type === 'text'"
+                    :value="field.value ?? ''"
+                    type="text"
+                    class="input input-bordered input-sm w-full"
+                    placeholder="Valeur..."
+                    @input="$emit('set-custom-field-value', field, ($event.target as HTMLInputElement).value)"
+                    @blur="$emit('update-custom-field', field)"
+                  />
+                  <input
+                    v-else-if="field.type === 'number'"
+                    :value="field.value ?? ''"
+                    type="number"
+                    class="input input-bordered input-sm w-full"
+                    placeholder="Valeur..."
+                    @input="$emit('set-custom-field-value', field, ($event.target as HTMLInputElement).value)"
+                    @blur="$emit('update-custom-field', field)"
+                  />
+                  <select
+                    v-else-if="field.type === 'select'"
+                    :value="field.value ?? ''"
+                    class="select select-bordered select-sm w-full"
+                    @change="onSelectChange(field, ($event.target as HTMLSelectElement).value)"
+                  >
+                    <option value="">Sélectionner...</option>
+                    <option
+                      v-for="option in field.options"
+                      :key="option"
+                      :value="option"
+                    >
+                      {{ option }}
+                    </option>
+                  </select>
+                  <label
+                    v-else-if="field.type === 'boolean'"
+                    class="flex items-center gap-3 cursor-pointer py-1"
+                  >
+                    <input
+                      type="checkbox"
+                      class="toggle toggle-primary toggle-sm"
+                      :checked="String(field.value).toLowerCase() === 'true'"
+                      @change="onBooleanChange(field, ($event.target as HTMLInputElement).checked)"
+                    >
+                    <span
+                      class="text-sm"
+                      :class="String(field.value).toLowerCase() === 'true' ? 'text-success font-medium' : 'text-base-content/60'"
+                    >
+                      {{ String(field.value).toLowerCase() === 'true' ? 'Oui' : 'Non' }}
+                    </span>
+                  </label>
+                  <input
+                    v-else-if="field.type === 'date'"
+                    :value="field.value ?? ''"
+                    type="date"
+                    class="input input-bordered input-sm w-full"
+                    @input="$emit('set-custom-field-value', field, ($event.target as HTMLInputElement).value)"
+                    @blur="$emit('update-custom-field', field)"
+                  />
+                </div>
+              </div>
+
+              <button
+                type="button"
+                class="btn btn-ghost btn-sm btn-square flex-shrink-0 text-error"
+                title="Supprimer ce champ"
+                @click="$emit('delete-field', field.id || field.customFieldId)"
+              >
+                <IconLucideTrash class="w-4 h-4" aria-hidden="true" />
+              </button>
+            </div>
+          </div>
+        </div>
+
+        <button
+          type="button"
+          class="btn btn-sm md:btn-md btn-primary"
+          @click="$emit('add-field')"
+        >
+          Ajouter un champ personnalisé
+        </button>
+      </template>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import IconLucideTrash from '~icons/lucide/trash'
+import { formatCustomFieldValue } from '~/shared/utils/customFieldUtils'
+
+defineProps<{
+  customFields: any[]
+  visibleCustomFields: any[]
+  isEditMode: boolean
+}>()
+
+const emit = defineEmits<{
+  'set-custom-field-value': [field: any, value: unknown]
+  'update-custom-field': [field: any]
+  'add-field': []
+  'delete-field': [fieldId: string]
+  'update-field-definition': [fieldId: string, data: Record<string, unknown>]
+}>()
+
+const handleDefinitionUpdate = (field: any, key: string, value: unknown) => {
+  const fieldId = field.id || field.customFieldId
+  if (!fieldId) return
+  emit('update-field-definition', fieldId, { ...field, [key]: value })
+}
+
+const handleOptionsUpdate = (field: any, raw: string) => {
+  const fieldId = field.id || field.customFieldId
+  if (!fieldId) return
+  const options = raw.split('\n').map((o: string) => o.trim()).filter((o: string) => o.length > 0)
+  emit('update-field-definition', fieldId, { ...field, options })
+}
+
+const onSelectChange = (field: any, value: string) => {
+  emit('set-custom-field-value', field, value)
+  emit('update-custom-field', field)
+}
+
+const onBooleanChange = (field: any, checked: boolean) => {
+  emit('set-custom-field-value', field, checked ? 'true' : 'false')
+  emit('update-custom-field', field)
+}
+</script>

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>
@@ -74,7 +74,7 @@
             <button
               v-if="isEditMode"
               type="button"
-              class="btn btn-error btn-xs"
+              class="btn btn-ghost btn-xs text-error"
               :disabled="uploading"
               @click="$emit('remove', doc.id)"
             >

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">
@@ -20,6 +20,29 @@
             {{ machineName }}
           </div>
         </div>
+        <div class="form-control">
+          <label class="label">
+            <span class="label-text">Site</span>
+          </label>
+          <select
+            v-if="isEditMode"
+            :value="machineSiteId"
+            class="select select-bordered"
+            @change="$emit('update:machine-site-id', ($event.target as HTMLSelectElement).value); $emit('blur-field')"
+          >
+            <option value="">Sélectionner un site</option>
+            <option
+              v-for="site in sites"
+              :key="site.id"
+              :value="site.id"
+            >
+              {{ site.name }}
+            </option>
+          </select>
+          <div v-else class="input input-bordered bg-base-200">
+            {{ machineSiteName || 'Non défini' }}
+          </div>
+        </div>
         <div v-if="isEditMode || machineReference" class="form-control">
           <label class="label">
             <span class="label-text">Référence</span>
@@ -59,7 +82,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 +94,8 @@
       </div>
 
       <!-- Champs personnalisés -->
-      <div v-if="visibleCustomFields.length" class="mt-6 pt-4 border-t border-gray-200">
+      <div v-if="visibleCustomFields.length" class="mt-6 pt-4 border-t border-base-200">
-        <h4 class="font-semibold text-gray-700 mb-3">Champs personnalisés de la machine</h4>
+        <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"
@@ -184,6 +207,9 @@ const props = defineProps<{
   isEditMode: boolean
   machineName: string
   machineReference: string
+  machineSiteId: string
+  machineSiteName: string
+  sites: any[]
   machineConstructeurIds: string[]
   machineConstructeursDisplay: any[]
   hasMachineConstructeur: boolean
@@ -196,6 +222,7 @@ const props = defineProps<{
 const emit = defineEmits<{
   'update:machine-name': [value: string]
   'update:machine-reference': [value: string]
+  'update:machine-site-id': [value: string]
   'update:constructeur-ids': [ids: unknown]
   'blur-field': []
   'set-custom-field-value': [field: any, value: unknown]

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>
@@ -25,22 +25,15 @@
       </div>
 
       <div v-else class="space-y-2">
-        <div v-for="piece in pieces" :key="piece.id" class="relative">
+        <div v-for="piece in pieces" :key="piece.id">
-          <button
-            v-if="isEditMode"
-            type="button"
-            class="btn btn-error btn-xs absolute top-2 right-2 z-10"
-            title="Supprimer cette pièce"
-            @click="$emit('remove-piece', piece.linkId || piece.id)"
-          >
-            Supprimer
-          </button>
           <PieceItem
             :piece="piece"
             :is-edit-mode="false"
+            :show-delete="isEditMode"
             :collapse-all="collapsed"
             :toggle-token="collapseToggleToken"
             @edit="$emit('edit-piece', $event)"
+            @delete="$emit('remove-piece', piece.linkId || piece.id)"
           />
         </div>
       </div>

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"
@@ -24,24 +24,26 @@
         <div
           v-for="product in products"
           :key="product.id || product.name"
-          class="rounded border border-base-200 bg-base-200/60 p-3 text-sm space-y-2 relative"
+          class="rounded border border-base-200 bg-base-200/60 p-3 text-sm space-y-2"
         >
-          <button
-            v-if="isEditMode"
-            type="button"
-            class="btn btn-error btn-xs absolute top-2 right-2"
-            title="Supprimer ce produit"
-            @click="$emit('remove-product', (product.linkId || product.id) as string)"
-          >
-            Supprimer
-          </button>
           <div class="flex items-center justify-between flex-wrap gap-2">
             <p class="font-semibold text-base-content">
               {{ product.name }}
             </p>
-            <span v-if="product.groupLabel" class="badge badge-ghost badge-sm">
+            <div class="flex items-center gap-2">
-              {{ product.groupLabel }}
+              <span v-if="product.groupLabel" class="badge badge-ghost badge-sm">
-            </span>
+                {{ product.groupLabel }}
+              </span>
+              <button
+                v-if="isEditMode"
+                type="button"
+                class="btn btn-ghost btn-xs text-error"
+                title="Supprimer ce produit"
+                @click="$emit('remove-product', (product.linkId || product.id) as string)"
+              >
+                Supprimer
+              </button>
+            </div>
           </div>
           <p v-if="product.reference" class="text-xs text-base-content/70">
             <span class="font-medium">Référence :</span>

app/components/sites/SiteCard.vue

@@ -1,27 +1,37 @@
 <template>
-  <div class="card bg-base-100 shadow-lg hover:shadow-xl transition-shadow">
+  <div
+    class="card site-card shadow-md hover:shadow-xl transition-shadow overflow-hidden"
+    :style="{
+      borderTop: site.color ? `4px solid ${site.color}` : '4px solid transparent',
+      background: site.color ? `linear-gradient(160deg, ${site.color}30 0%, ${site.color}08 40%, var(--color-base-100) 100%)` : undefined,
+    }"
+  >
     <div class="card-body">
       <div class="flex items-center justify-between mb-4">
-        <h3 class="card-title text-lg">
+        <h3 class="card-title text-lg text-base-content">
           {{ site.name }}
         </h3>
-        <div class="badge badge-primary badge-sm">
+        <div
+          class="badge font-bold"
+          :style="site.color ? { backgroundColor: site.color + '30', color: site.color, borderColor: site.color + '50' } : {}"
+          :class="!site.color ? 'badge-primary' : ''"
+        >
           {{ machineCount }} machines
         </div>
       </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 +39,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>

app/components/sites/SiteCreateModal.vue

@@ -17,6 +17,46 @@
           />
         </div>
 
+        <div class="form-control">
+          <label class="label">
+            <span class="label-text">Couleur</span>
+          </label>
+          <div v-if="siteRef.color" class="flex items-center gap-3">
+            <input
+              :value="siteRef.color"
+              type="color"
+              class="w-10 h-10 rounded cursor-pointer border border-base-300"
+              :disabled="disabled"
+              @input="(e: Event) => { siteRef.color = (e.target as HTMLInputElement).value }"
+            >
+            <input
+              v-model="siteRef.color"
+              type="text"
+              placeholder="#000000"
+              class="input input-bordered input-sm flex-1"
+              :disabled="disabled"
+              maxlength="7"
+            >
+            <button
+              type="button"
+              class="btn btn-ghost btn-xs"
+              :disabled="disabled"
+              @click="siteRef.color = ''"
+            >
+              Effacer
+            </button>
+          </div>
+          <button
+            v-else
+            type="button"
+            class="btn btn-outline btn-sm w-fit"
+            :disabled="disabled"
+            @click="siteRef.color = '#3b82f6'"
+          >
+            Choisir une couleur
+          </button>
+        </div>
+
         <SiteContactFormFields :form="siteRef" :disabled="disabled" />
 
         <div class="modal-action">
@@ -39,6 +79,7 @@ import SiteContactFormFields from '~/components/sites/SiteContactFormFields.vue'
 
 type SiteForm = {
   name: string
+  color: string
   contactName: string
   contactPhone: string
   contactAddress: string

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">
@@ -20,6 +20,46 @@
           >
         </div>
 
+        <div class="form-control">
+          <label class="label">
+            <span class="label-text">Couleur</span>
+          </label>
+          <div v-if="form.color" class="flex items-center gap-3">
+            <input
+              :value="form.color"
+              type="color"
+              class="w-10 h-10 rounded cursor-pointer border border-base-300"
+              :disabled="disabled"
+              @input="form.color = $event.target.value"
+            >
+            <input
+              v-model="form.color"
+              type="text"
+              placeholder="#000000"
+              class="input input-bordered input-sm flex-1"
+              :disabled="disabled"
+              maxlength="7"
+            >
+            <button
+              type="button"
+              class="btn btn-ghost btn-xs"
+              :disabled="disabled"
+              @click="form.color = ''"
+            >
+              Effacer
+            </button>
+          </div>
+          <button
+            v-else
+            type="button"
+            class="btn btn-outline btn-sm w-fit"
+            :disabled="disabled"
+            @click="form.color = '#3b82f6'"
+          >
+            Choisir une couleur
+          </button>
+        </div>
+
         <SiteContactFormFields :form="props.form" :disabled="disabled" />
 
         <div class="border-t border-base-200 pt-4 space-y-4">
@@ -28,7 +68,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 +114,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>

app/composables/useDarkMode.ts

@@ -0,0 +1,26 @@
+const isDark = ref(false)
+
+export function useDarkMode() {
+  const toggle = () => {
+    isDark.value = !isDark.value
+    applyTheme()
+  }
+
+  const applyTheme = () => {
+    const theme = isDark.value ? 'mytheme-dark' : 'mytheme'
+    document.documentElement.setAttribute('data-theme', theme)
+    localStorage.setItem('theme', theme)
+  }
+
+  const init = () => {
+    const saved = localStorage.getItem('theme')
+    if (saved === 'mytheme-dark') {
+      isDark.value = true
+    } else if (!saved && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+      isDark.value = true
+    }
+    applyTheme()
+  }
+
+  return { isDark, toggle, init }
+}

app/composables/useMachineDetailData.ts

@@ -15,6 +15,7 @@ import { useCustomFields } from '~/composables/useCustomFields'
 import { useApi } from '~/composables/useApi'
 import { useToast } from '~/composables/useToast'
 import { useConstructeurs } from '~/composables/useConstructeurs'
+import { useSites } from '~/composables/useSites'
 import { useMachinePrint } from '~/composables/useMachinePrint'
 import {
   resolveConstructeurs,
@@ -44,6 +45,7 @@ export function useMachineDetailData(machineId: string) {
   const { get } = useApi()
   const toast = useToast()
   const { constructeurs, loadConstructeurs } = useConstructeurs()
+  const { sites, loadSites } = useSites()
 
   const {
     printModalOpen,
@@ -64,6 +66,7 @@ export function useMachineDetailData(machineId: string) {
   // Machine fields
   const machineName = ref('')
   const machineReference = ref('')
+  const machineSiteId = ref('')
   const machineConstructeurIds = ref<string[]>([])
 
   const machineConstructeurId = computed({
@@ -229,6 +232,7 @@ export function useMachineDetailData(machineId: string) {
         machine.value.constructeurs,
         machine.value.constructeur,
       )
+      machineSiteId.value = (machine.value.siteId as string) || (machine.value.site as AnyRecord)?.id as string || ''
     }
   }
 
@@ -255,6 +259,7 @@ export function useMachineDetailData(machineId: string) {
     machine,
     machineName,
     machineReference,
+    machineSiteId,
     machineConstructeurIds,
     machineDocumentsLoaded,
     machineComponentLinks,
@@ -401,6 +406,7 @@ export function useMachineDetailData(machineId: string) {
       loadConstructeurs(),
       loadComponentTypes(),
       loadPieceTypes(),
+      loadSites(),
     ])
   }
 
@@ -419,8 +425,9 @@ export function useMachineDetailData(machineId: string) {
     machineComponentLinks, machinePieceLinks, machineProductLinks,
 
     // Machine fields
-    machineName, machineReference, machineConstructeurIds, machineConstructeurId,
+    machineName, machineReference, machineSiteId, machineConstructeurIds, machineConstructeurId,
     machineConstructeursDisplay, machineConstructeurContact, hasMachineConstructeur,
+    sites,
 
     // UI state
     machineDocumentFiles, machineDocumentsUploading, machineDocumentsLoaded,

app/composables/useMachineDetailUpdates.ts

@@ -13,6 +13,7 @@ export interface UseMachineDetailUpdatesDeps {
   machine: Ref<AnyRecord | null>
   machineName: Ref<string>
   machineReference: Ref<string>
+  machineSiteId: Ref<string>
   machineConstructeurIds: Ref<string[]>
   machineDocumentsLoaded: Ref<boolean>
   machineComponentLinks: Ref<AnyRecord[]>
@@ -40,6 +41,7 @@ export function useMachineDetailUpdates(deps: UseMachineDetailUpdatesDeps) {
     machine,
     machineName,
     machineReference,
+    machineSiteId,
     machineConstructeurIds,
     machineComponentLinks,
     machinePieceLinks,
@@ -63,6 +65,7 @@ export function useMachineDetailUpdates(deps: UseMachineDetailUpdatesDeps) {
       const result: any = await updateMachineApi(machine.value.id as string, {
         name: machineName.value,
         reference: machineReference.value,
+        siteId: machineSiteId.value || undefined,
         constructeurIds: cIds,
       } as any)
       if (result.success) {

app/composables/useSiteManagement.ts

@@ -10,6 +10,7 @@ import { canPreviewDocument } from '~/utils/documentPreview'
 
 type SiteForm = {
   name: string
+  color: string
   contactName: string
   contactPhone: string
   contactAddress: string
@@ -31,6 +32,7 @@ type SiteDocument = {
 type SiteWithDocuments = {
   id: string
   name?: string
+  color?: string
   contactName?: string
   contactPhone?: string
   contactAddress?: string
@@ -54,6 +56,7 @@ export function useSiteManagement() {
 
   const newSite = reactive<SiteForm>({
     name: '',
+    color: '',
     contactName: '',
     contactPhone: '',
     contactAddress: '',
@@ -63,6 +66,7 @@ export function useSiteManagement() {
 
   const editSiteForm = reactive<SiteForm>({
     name: '',
+    color: '',
     contactName: '',
     contactPhone: '',
     contactAddress: '',
@@ -81,6 +85,7 @@ export function useSiteManagement() {
 
   const resetNewSite = () => {
     newSite.name = ''
+    newSite.color = ''
     newSite.contactName = ''
     newSite.contactPhone = ''
     newSite.contactAddress = ''
@@ -101,6 +106,7 @@ export function useSiteManagement() {
   const handleCreateSite = async () => {
     const result = await createSite({
       name: newSite.name,
+      color: newSite.color,
       contactName: newSite.contactName,
       contactPhone: newSite.contactPhone,
       contactAddress: newSite.contactAddress,
@@ -116,6 +122,7 @@ export function useSiteManagement() {
   const editSite = (site: SiteWithDocuments) => {
     siteBeingEdited.value = site
     editSiteForm.name = site.name || ''
+    editSiteForm.color = site.color || ''
     editSiteForm.contactName = site.contactName || ''
     editSiteForm.contactPhone = site.contactPhone || ''
     editSiteForm.contactAddress = site.contactAddress || ''
@@ -148,6 +155,7 @@ export function useSiteManagement() {
 
     const baseUpdate = {
       name: editSiteForm.name,
+      color: editSiteForm.color,
       contactName: editSiteForm.contactName,
       contactPhone: editSiteForm.contactPhone,
       contactAddress: editSiteForm.contactAddress,

app/composables/useSites.ts

@@ -6,6 +6,7 @@ import { extractCollection } from '~/shared/utils/apiHelpers'
 export interface Site {
   id: string
   name?: string
+  color?: string
   contactName?: string
   contactPhone?: string
   contactAddress?: string

app/composables/useToast.ts

@@ -76,6 +76,7 @@ export function useToast() {
 
   const clearAll = (): void => {
     toasts.value = []
+    recentMessages.clear()
   }
 
   return {

app/pages/changelog.vue

@@ -69,6 +69,22 @@ const badgeClass = (type: ChangeType) => {
 }
 
 const releases: Release[] = [
+  {
+    version: 'v1.9.0',
+    date: '2026-03-09',
+    changes: [
+      { type: 'feat', text: 'Gestion des champs personnalisés sur les machines : ajout, modification et suppression de définitions de champs directement depuis la fiche machine' },
+      { type: 'feat', text: 'Refonte UI globale : amélioration du styling, des layouts et du responsive sur l\'ensemble des composants et pages' },
+      { type: 'feat', text: 'Suite de tests API complète : 167 tests couvrant toutes les entités, la sécurité et les validations' },
+      { type: 'feat', text: 'Endpoint /api/health pour le monitoring applicatif' },
+      { type: 'fix', text: 'Sécurité renforcée : désactivation de la migration de session sur le firewall API, durcissement des accès documents et sessions' },
+      { type: 'fix', text: 'Confirmation de suppression avec impact sur le catalogue produits (documents, liaisons machines en cascade)' },
+      { type: 'fix', text: 'Correction du débordement des dropdowns dans les DataTable' },
+      { type: 'perf', text: 'Refactoring massif du frontend : extraction de 15+ composables et composants partagés, réduction de la taille des fichiers' },
+      { type: 'chore', text: 'Extraction de CuidEntityTrait et abstraction du subscriber d\'audit côté backend' },
+      { type: 'chore', text: 'Ajout de DAMA DoctrineTestBundle pour l\'isolation des tests par transaction' },
+    ],
+  },
   {
     version: 'v1.8.1',
     date: '2026-03-05',

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>

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>
+        <h1 class="text-3xl font-bold text-base-content tracking-tight">Catalogue des composants</h1>
-        <p class="text-sm text-gray-500">
+        <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">
+        <header class="flex flex-col gap-1">
-          <h2 class="text-xl font-semibold text-base-content">Composants créés</h2>
+          <h2 class="text-xl font-bold text-base-content tracking-tight">Composants créés</h2>
-          <p class="text-sm text-base-content/70">
+          <p class="text-sm text-base-content/50">
             Retrouvez ici tous les composants enregistrés, indépendamment de leur catégorie.
           </p>
         </header>
@@ -95,7 +95,7 @@
           </template>
 
           <template #cell-actions="{ row }">
-            <div class="flex items-center gap-2">
+            <div class="flex items-center justify-end gap-2">
               <NuxtLink
                 :to="`/component/${row.component.id}/edit`"
                 class="btn btn-ghost btn-xs"
@@ -105,7 +105,7 @@
               <button
                 v-if="canEdit"
                 type="button"
-                class="btn btn-error btn-xs"
+                class="btn btn-ghost btn-xs text-error"
                 :disabled="loadingComposants"
                 @click="handleDeleteComponent(row.component)"
               >

app/pages/component/[id]/edit.vue

@@ -1,11 +1,12 @@
 <template>
-  <DocumentPreviewModal
+  <div>
-    :document="previewDocument"
+    <DocumentPreviewModal
-    :visible="previewVisible"
+      :document="previewDocument"
-    :documents="componentDocuments"
+      :visible="previewVisible"
-    @close="closePreview"
+      :documents="componentDocuments"
-  />
+      @close="closePreview"
-  <main class="container mx-auto px-6 py-10">
+    />
+    <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">

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"
@@ -49,11 +49,11 @@
           </template>
 
           <template #cell-actions="{ row }">
-            <div class="flex justify-end gap-2">
+            <div class="flex items-center justify-end gap-2">
               <button class="btn btn-ghost btn-xs" @click="openEditModal(row)">
                 {{ canEdit ? 'Modifier' : 'Consulter' }}
               </button>
-              <button v-if="canEdit" class="btn btn-error btn-xs" @click="confirmDelete(row)">
+              <button v-if="canEdit" class="btn btn-ghost btn-xs text-error" @click="confirmDelete(row)">
                 Supprimer
               </button>
             </div>

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>
 

app/pages/index.vue

@@ -1,57 +1,51 @@
 <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="flex gap-3">
-          <div class="stat">
+          <div class="bg-base-100 rounded-xl border border-base-300/50 px-5 py-3 shadow-sm">
-            <div class="stat-title">
+            <p class="text-[0.65rem] font-semibold uppercase tracking-widest text-base-content/40 mb-0.5">Sites</p>
-              Sites
+            <p class="text-2xl font-bold text-primary tracking-tight">{{ sites.length }}</p>
-            </div>
-            <div class="stat-value text-primary">
-              {{ sites.length }}
-            </div>
           </div>
-          <div class="stat">
+          <div class="bg-base-100 rounded-xl border border-base-300/50 px-5 py-3 shadow-sm">
-            <div class="stat-title">
+            <p class="text-[0.65rem] font-semibold uppercase tracking-widest text-base-content/40 mb-0.5">Machines</p>
-              Machines
+            <p class="text-2xl font-bold text-secondary tracking-tight">{{ totalMachines }}</p>
-            </div>
-            <div class="stat-value text-secondary">
-              {{ totalMachines }}
-            </div>
           </div>
         </div>
       </div>
 
       <!-- Filters -->
-      <div class="card bg-base-100 shadow-lg mb-6">
+      <div class="card bg-base-100 shadow-sm mb-8">
-        <div class="card-body">
+        <div class="card-body py-4">
-          <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+          <div class="flex flex-col md:flex-row md:items-end gap-4">
-            <div class="form-control">
+            <div class="form-control flex-1">
               <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
+              <div class="relative">
-                v-model="searchTerm"
+                <IconLucideSearch class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-base-content/30" aria-hidden="true" />
-                type="text"
+                <input
-                placeholder="Nom de machine ou site..."
+                  v-model="searchTerm"
-                class="input input-bordered"
+                  type="text"
-              >
+                  placeholder="Nom de machine ou site..."
+                  class="input input-bordered pl-10 w-full"
+                >
+              </div>
             </div>
-            <div class="form-control">
+            <div class="form-control md:w-64">
               <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">
+              <select v-model="selectedSiteFilter" class="select select-bordered w-full">
                 <option value="">
                   Tous les sites
                 </option>
@@ -69,30 +63,32 @@
       </div>
 
       <!-- Loading State -->
-      <div v-if="loading" class="flex justify-center items-center py-12">
+      <div v-if="loading" class="flex justify-center items-center py-16">
-        <span class="loading loading-spinner loading-lg" />
+        <span class="loading loading-spinner loading-lg text-primary" />
       </div>
 
-      <!-- Hierarchical Machines View -->
+      <!-- Empty State -->
-      <div v-else-if="filteredSites.length === 0" class="text-center py-12">
+      <div v-else-if="filteredSites.length === 0" class="text-center py-16">
-        <div class="max-w-md mx-auto">
+        <div class="max-w-sm mx-auto">
-          <IconLucideFactory
+          <div class="w-16 h-16 rounded-2xl bg-base-200 grid place-items-center mx-auto mb-5">
-            class="w-16 h-16 mx-auto text-gray-400 mb-4"
+            <IconLucideFactory
-            aria-hidden="true"
+              class="w-8 h-8 text-base-content/30"
-          />
+              aria-hidden="true"
-          <h3 class="text-lg font-medium text-gray-900 mb-2">
+            />
+          </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,119 @@
         </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 site-card shadow-md overflow-hidden"
+          :style="{
+            borderTop: site.color ? `4px solid ${site.color}` : '4px solid transparent',
+            background: site.color ? `linear-gradient(160deg, ${site.color}30 0%, ${site.color}08 40%, var(--color-base-100) 100%)` : undefined,
+          }"
         >
-          <!-- Site Header -->
           <div class="card-body">
-            <div class="flex items-center justify-between mb-4">
+            <!-- Site Header -->
-              <div class="flex items-center gap-3">
+            <div class="flex items-start justify-between gap-4">
-                <div class="avatar placeholder">
+              <div class="flex items-start gap-4">
-                  <div
+                <div
-                    class="bg-primary text-primary-content rounded-lg w-12 grid place-items-center"
+                  class="w-11 h-11 rounded-xl grid place-items-center shrink-0"
-                  >
+                  :style="{ backgroundColor: site.color ? site.color + '40' : 'oklch(var(--p) / 0.1)', border: site.color ? `2px solid ${site.color}60` : 'none' }"
-                    <IconLucideMapPin class="w-6 h-6" aria-hidden="true" />
+                >
-                  </div>
+                  <IconLucideMapPin class="w-5 h-5" :style="{ color: site.color || 'oklch(var(--p))' }" aria-hidden="true" />
                 </div>
-                <div>
+                <div class="min-w-0">
-                  <h3 class="text-xl font-bold">
+                  <h3
+                    class="text-lg font-bold tracking-tight text-base-content"
+                  >
                     {{ site.name }}
                   </h3>
-                  <div class="text-sm text-gray-600 space-y-1">
+                  <div class="flex flex-wrap gap-x-4 gap-y-1 mt-1.5 text-sm text-base-content/50">
-                    <div class="flex items-center gap-2">
+                    <span v-if="site.contactName" class="flex items-center gap-1.5">
-                      <IconLucideUser
+                      <IconLucideUser class="w-3.5 h-3.5" aria-hidden="true" />
-                        class="w-4 h-4 text-primary"
+                      {{ site.contactName }}
-                        aria-hidden="true"
+                    </span>
-                      />
+                    <span v-if="site.contactPhone" class="flex items-center gap-1.5">
-                      <span class="font-medium">{{ site.contactName }}</span>
+                      <IconLucidePhone class="w-3.5 h-3.5" aria-hidden="true" />
-                    </div>
+                      {{ formatPhoneDisplay(site.contactPhone) }}
-                    <div class="flex items-center gap-2">
+                    </span>
-                      <IconLucidePhone
+                    <span v-if="site.contactCity" class="flex items-center gap-1.5">
-                        class="w-4 h-4 text-secondary"
+                      <IconLucideMapPinned class="w-3.5 h-3.5" aria-hidden="true" />
-                        aria-hidden="true"
+                      {{ site.contactPostalCode }} {{ site.contactCity }}
-                      />
+                    </span>
-                      <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>
                 </div>
               </div>
-              <div class="flex items-center gap-2">
+              <div class="flex items-center gap-2 shrink-0">
-                <div class="badge badge-primary badge-lg">
+                <span
-                  {{ site.machines?.length || 0 }} machines
+                  class="badge font-bold"
-                </div>
+                  :style="site.color ? { backgroundColor: site.color + '30', color: site.color, borderColor: site.color + '50' } : {}"
+                  :class="!site.color ? 'badge-primary' : ''"
+                >
+                  {{ 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="w-4 h-4 transition-transform duration-200"
-                    :class="
+                    :class="collapsedSites.includes(site.id) ? 'rotate-180' : ''"
-                      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-3">
-              <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                 <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 flex flex-col rounded-xl border border-base-300/40 bg-base-100 shadow-sm hover:shadow-md 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">
-                    <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">
-                      <h4 class="font-semibold text-sm">
+                      {{ machine.name }}
-                        {{ machine.name }}
+                    </h4>
-                      </h4>
+                  </div>
-                    </div>
 
-                    <div class="space-y-1 text-xs text-gray-600">
+                  <div v-if="machine.reference" class="flex items-center gap-1.5 text-xs text-base-content/40">
-                      <div
+                    <IconLucideTag class="w-3 h-3" aria-hidden="true" />
-                        v-if="machine.reference"
+                    <span>{{ machine.reference }}</span>
-                        class="flex items-center gap-1"
+                  </div>
-                      >
-                        <IconLucideTag class="w-3 h-3" aria-hidden="true" />
-                        <span>{{ machine.reference }}</span>
-                      </div>
-                    </div>
 
-                    <div class="card-actions justify-end mt-3">
+                  <div class="mt-auto pt-3 flex items-center justify-end gap-2">
-                      <button
+                    <button
-                        v-if="canEdit"
+                      v-if="canEdit"
-                        class="btn btn-xs btn-outline"
+                      class="btn btn-ghost btn-sm"
-                        @click.stop="editMachine(machine)"
+                      @click.stop="editMachine(machine)"
-                      >
+                    >
-                        Modifier
+                      Modifier
-                      </button>
+                    </button>
-                      <button
+                    <button
-                        v-if="canEdit"
+                      v-if="canEdit"
-                        class="btn btn-xs btn-error"
+                      class="btn btn-ghost btn-sm text-error"
-                        @click.stop="confirmDeleteMachine(machine)"
+                      @click.stop="confirmDeleteMachine(machine)"
-                      >
+                    >
-                        Supprimer
+                      Supprimer
-                      </button>
+                    </button>
-                      <NuxtLink
+                    <NuxtLink
-                        :to="`/machine/${machine.id}`"
+                      :to="`/machine/${machine.id}`"
-                        class="btn btn-xs btn-primary"
+                      class="btn btn-primary btn-sm"
-                      >
+                      @click.stop
-                        Détails
+                    >
-                      </NuxtLink>
+                      Détails
-                    </div>
+                    </NuxtLink>
                   </div>
                 </div>
               </div>
@@ -236,17 +221,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">
+              <div class="w-10 h-10 rounded-xl bg-base-200 grid place-items-center mx-auto mb-3">
-                <IconLucideFactory class="w-8 h-8 mx-auto" aria-hidden="true" />
+                <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 +275,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 +396,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`)
 }
 

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">
+    <div v-if="d.loading.value" class="flex justify-center items-center py-16">
-      <span class="loading loading-spinner loading-lg"></span>
+      <span class="loading loading-spinner loading-lg text-primary"></span>
     </div>
 
     <!-- Machine Details -->
@@ -38,7 +39,11 @@
         rounded
       >
         <div class="flex justify-center gap-4">
-          <div v-if="d.machine.value.site?.name" class="badge badge-outline">
+          <div
+            v-if="d.machine.value.site?.name"
+            class="badge badge-outline font-semibold"
+            :style="d.machine.value.site?.color ? { borderColor: d.machine.value.site.color + '60', backgroundColor: d.machine.value.site.color + '25', color: d.machine.value.site.color } : {}"
+          >
             {{ d.machine.value.site?.name }}
           </div>
           <div v-if="d.machine.value.reference" class="badge badge-outline">
@@ -52,6 +57,9 @@
         :is-edit-mode="d.isEditMode.value"
         :machine-name="d.machineName.value"
         :machine-reference="d.machineReference.value"
+        :machine-site-id="d.machineSiteId.value"
+        :machine-site-name="d.machine.value?.site?.name ?? ''"
+        :sites="d.sites.value"
         :machine-constructeur-ids="d.machineConstructeurIds.value"
         :machine-constructeurs-display="d.machineConstructeursDisplay.value"
         :has-machine-constructeur="d.hasMachineConstructeur.value"
@@ -61,6 +69,7 @@
         :machine-custom-field-defs="d.machine.value?.customFields ?? []"
         @update:machine-name="d.machineName.value = $event"
         @update:machine-reference="d.machineReference.value = $event"
+        @update:machine-site-id="d.machineSiteId.value = $event"
         @update:constructeur-ids="d.handleMachineConstructeurChange"
         @blur-field="d.updateMachineInfo"
         @set-custom-field-value="d.setMachineCustomFieldValue"
@@ -139,26 +148,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" />
+        <div class="w-16 h-16 rounded-2xl bg-base-200 grid place-items-center mx-auto mb-5">
-        <h3 class="text-lg font-medium text-gray-900 mb-2">Machine non trouvée</h3>
+          <IconLucideAlertTriangle class="w-8 h-8 text-base-content/30" aria-hidden="true" />
-        <p class="text-gray-500 mb-4">La machine avec l'ID "{{ machineId }}" n'existe pas ou a été supprimée.</p>
+        </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
+    <MachinePrintSelectionModal
-    :open="d.printModalOpen.value"
+      :open="d.printModalOpen.value"
-    :selection="d.printSelection"
+      :selection="d.printSelection"
-    :components="d.components.value"
+      :components="d.components.value"
-    :pieces="d.machinePieces.value"
+      :pieces="d.machinePieces.value"
-    @close="d.closePrintModal"
+      @close="d.closePrintModal"
-    @confirm="d.handlePrintConfirm"
+      @confirm="d.handlePrintConfirm"
-    @select-all="d.setAllPrintSelection(true)"
+      @select-all="d.setAllPrintSelection(true)"
-    @deselect-all="d.setAllPrintSelection(false)"
+      @deselect-all="d.setAllPrintSelection(false)"
-  />
+    />
+  </div>
 </template>
 
 <script setup>

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,10 +65,14 @@
         <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 site-card shadow-md hover:shadow-xl transition-shadow cursor-pointer overflow-hidden"
+          :style="{
+            borderTop: machine.site?.color ? `4px solid ${machine.site.color}` : '4px solid transparent',
+            background: machine.site?.color ? `linear-gradient(160deg, ${machine.site.color}30 0%, ${machine.site.color}08 40%, var(--color-base-100) 100%)` : undefined,
+          }"
           @click="viewMachineDetails(machine)"
         >
-          <div class="card-body">
+          <div class="card-body flex flex-col">
             <div class="flex items-center justify-between mb-2">
               <h3 class="card-title text-lg">
                 {{ machine.name }}
@@ -77,8 +81,11 @@
 
             <div class="space-y-2 text-sm">
               <div class="flex items-center gap-2">
-                <IconLucideMapPin class="w-4 h-4 text-blue-500" aria-hidden="true" />
+                <IconLucideMapPin class="w-4 h-4" :style="{ color: machine.site?.color || '#3b82f6' }" aria-hidden="true" />
-                <span class="text-gray-600">{{ machine.site?.name || 'Site inconnu' }}</span>
+                <span
+                  class="font-bold text-sm px-2.5 py-1 rounded-lg text-base-content"
+                  :style="machine.site?.color ? { backgroundColor: machine.site.color + '30', border: `1px solid ${machine.site.color}40` } : {}"
+                >{{ machine.site?.name || 'Site inconnu' }}</span>
               </div>
 
               <div v-if="machine.reference" class="flex items-center gap-2">
@@ -87,15 +94,15 @@
               </div>
             </div>
 
-            <div class="card-actions justify-end mt-4">
+            <div class="mt-auto pt-3 flex items-center justify-end gap-2">
-              <button class="btn btn-sm btn-outline" @click.stop="editMachine(machine)">
+              <button v-if="canEdit" class="btn btn-ghost btn-sm" @click.stop="editMachine(machine)">
                 Modifier
               </button>
-              <button v-if="canEdit" class="btn btn-sm btn-error" @click.stop="confirmDeleteMachine(machine)">
+              <button v-if="canEdit" class="btn btn-ghost btn-sm text-error" @click.stop="confirmDeleteMachine(machine)">
                 Supprimer
               </button>
-              <NuxtLink :to="`/machine/${machine.id}`" class="btn btn-sm btn-primary">
+              <NuxtLink :to="`/machine/${machine.id}`" class="btn btn-primary btn-sm">
-                Voir détails
+                Détails
               </NuxtLink>
             </div>
           </div>

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">

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>
@@ -118,7 +118,7 @@
           </template>
 
           <template #cell-actions="{ row }">
-            <div class="flex items-center gap-2">
+            <div class="flex items-center justify-end gap-2">
               <NuxtLink
                 :to="`/pieces/${row.piece.id}/edit`"
                 class="btn btn-ghost btn-xs"
@@ -128,7 +128,7 @@
               <button
                 v-if="canEdit"
                 type="button"
-                class="btn btn-error btn-xs"
+                class="btn btn-ghost btn-xs text-error"
                 :disabled="loadingPieces"
                 @click="handleDeletePiece(row.piece)"
               >

app/pages/pieces/[id]/edit.vue

@@ -1,11 +1,12 @@
 <template>
-  <DocumentPreviewModal
+  <div>
-    :document="previewDocument"
+    <DocumentPreviewModal
-    :visible="previewVisible"
+      :document="previewDocument"
-    :documents="pieceDocuments"
+      :visible="previewVisible"
-    @close="closePreview"
+      :documents="pieceDocuments"
-  />
+      @close="closePreview"
-  <main class="container mx-auto px-6 py-10">
+    />
+    <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">

app/pages/product-catalog.vue

@@ -115,7 +115,7 @@
           </template>
 
           <template #cell-actions="{ row }">
-            <div class="flex justify-end gap-2">
+            <div class="flex items-center justify-end gap-2">
               <NuxtLink
                 :to="`/product/${row.product.id}/edit`"
                 class="btn btn-ghost btn-xs"

app/pages/product/[id]/edit.vue

@@ -1,11 +1,12 @@
 <template>
-  <DocumentPreviewModal
+  <div>
-    :document="previewDocument"
+    <DocumentPreviewModal
-    :visible="previewVisible"
+      :document="previewDocument"
-    :documents="productDocuments"
+      :visible="previewVisible"
-    @close="closePreview"
+      :documents="productDocuments"
-  />
+      @close="closePreview"
-  <main class="container mx-auto px-6 py-10">
+    />
+    <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">

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" />
+          <IconLucideMapPin class="w-16 h-16 mx-auto text-base-content/30 mb-4" aria-hidden="true" />
-          <h3 class="text-lg font-medium text-gray-900 mb-2">
+          <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">

tests/composables/useEntityTypes.test.ts

@@ -153,7 +153,7 @@ describe('loadTypes', () => {
     expect(result.error).toBe('Network error')
     expect(types.value).toEqual([])
     expect(mockShowError).toHaveBeenCalledWith(
-      expect.stringContaining('Network error'),
+      'Impossible de charger les types de composant.',
     )
   })