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

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

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

app/assets/app.css

@@ -1,55 +1,85 @@
+/* ─── Fonts ─── */
+@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,400&display=swap');
+
 @import "tailwindcss";
 @plugin "daisyui";
+
+/* ─── Theme ─── */
 @plugin "daisyui/theme" {
   name: "mytheme";
-  default: true; /* set as default */
-  prefersdark: false; /* set as default dark mode (prefers-color-scheme:dark) */
-  color-scheme: light; /* color of browser-provided UI */
+  default: true;
+  prefersdark: false;
+  color-scheme: light;
 
-  /* #FBFAFA — gris clair */
-  --color-base-100: oklch(98% 0.003 0);
-  --color-base-200: oklch(94% 0.01 262);
-  --color-base-300: oklch(90% 0.02 262);
-  --color-base-content: oklch(20% 0.03 262);
-  /* #304998 — bleu Malio */
-  --color-primary: oklch(37% 0.15 262);
+  /* Surfaces — warm gray with a hint of blue */
+  --color-base-100: oklch(98.5% 0.004 260);
+  --color-base-200: oklch(95% 0.008 260);
+  --color-base-300: oklch(91% 0.015 260);
+  --color-base-content: oklch(22% 0.025 260);
+
+  /* Primary — Malio blue, slightly richer */
+  --color-primary: oklch(40% 0.16 262);
   --color-primary-content: oklch(98% 0.005 262);
-  /* #A5ACD0 — lavande */
-  --color-secondary: oklch(75% 0.055 270);
-  --color-secondary-content: oklch(20% 0.03 270);
-  /* #ED8521 — orange */
-  --color-accent: oklch(71% 0.17 58);
-  --color-accent-content: oklch(98% 0.005 58);
-  /* neutral dérivé du bleu Malio */
-  --color-neutral: oklch(37% 0.08 262);
-  --color-neutral-content: oklch(98% 0.005 262);
-  --color-info: oklch(55% 0.12 262);
-  --color-info-content: oklch(98% 0.005 262);
-  --color-success: oklch(65% 0.2 145);
-  --color-success-content: oklch(98% 0.005 145);
+
+  /* Secondary — refined lavender */
+  --color-secondary: oklch(72% 0.06 275);
+  --color-secondary-content: oklch(22% 0.03 275);
+
+  /* Accent — warm amber-orange */
+  --color-accent: oklch(72% 0.17 55);
+  --color-accent-content: oklch(20% 0.04 55);
+
+  /* Neutral — deep slate */
+  --color-neutral: oklch(28% 0.04 260);
+  --color-neutral-content: oklch(95% 0.005 260);
+
+  /* Semantic */
+  --color-info: oklch(58% 0.14 255);
+  --color-info-content: oklch(98% 0.005 255);
+  --color-success: oklch(62% 0.19 150);
+  --color-success-content: oklch(98% 0.005 150);
   --color-warning: oklch(78% 0.15 70);
-  --color-warning-content: oklch(20% 0.05 70);
-  --color-error: oklch(60% 0.25 25);
+  --color-warning-content: oklch(22% 0.05 70);
+  --color-error: oklch(58% 0.22 25);
   --color-error-content: oklch(98% 0.005 25);
 
-  /* border radius */
-  --radius-selector: 1rem;
-  --radius-field: 0.25rem;
-  --radius-box: 0.5rem;
+  /* Geometry */
+  --radius-selector: 0.75rem;
+  --radius-field: 0.375rem;
+  --radius-box: 0.625rem;
 
-  /* base sizes */
   --size-selector: 0.25rem;
   --size-field: 0.25rem;
 
-  /* border size */
   --border: 1px;
-
-  /* effects */
   --depth: 1;
   --noise: 0;
 }
 
-/* Styles pour l'accessibilité et les paramètres d'affichage */
+/* ─── Typography ─── */
+:root {
+  --font-heading: 'Outfit', system-ui, sans-serif;
+  --font-body: 'DM Sans', system-ui, sans-serif;
+}
+
+body {
+  font-family: var(--font-body);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  letter-spacing: -0.01em;
+}
+
+h1, h2, h3, h4, h5, h6,
+.card-title,
+.stat-value,
+.text-2xl,
+.text-3xl,
+.text-4xl {
+  font-family: var(--font-heading);
+  letter-spacing: -0.025em;
+}
+
+/* ─── Density variables ─── */
 :root {
   --spacing-xs: 0.5rem;
   --spacing-sm: 0.75rem;
@@ -58,7 +88,6 @@
   --spacing-xl: 2rem;
 }
 
-/* Densité compacte */
 .density-compact {
   --spacing-xs: 0.25rem;
   --spacing-sm: 0.5rem;
@@ -67,7 +96,6 @@
   --spacing-xl: 1.25rem;
 }
 
-/* Densité confortable (défaut) */
 .density-comfortable {
   --spacing-xs: 0.5rem;
   --spacing-sm: 0.75rem;
@@ -76,7 +104,6 @@
   --spacing-xl: 2rem;
 }
 
-/* Densité espacée */
 .density-spacious {
   --spacing-xs: 0.75rem;
   --spacing-sm: 1rem;
@@ -85,251 +112,183 @@
   --spacing-xl: 3rem;
 }
 
-/* Contraste élevé avec DaisyUI */
-.contrast-high .btn {
-  @apply border-2;
-}
+/* ─── High contrast mode ─── */
+.contrast-high .btn { @apply border-2; }
+.contrast-high .input { @apply border-2; }
+.contrast-high .select { @apply border-2; }
+.contrast-high .textarea { @apply border-2; }
+.contrast-high .modal-box { @apply border-2 border-base-content; }
 
-.contrast-high .input {
-  @apply border-2;
-}
-
-.contrast-high .select {
-  @apply border-2;
-}
-
-.contrast-high .textarea {
-  @apply border-2;
-}
-
-.contrast-high .modal-box {
-  @apply border-2 border-base-content;
-}
-
-/* Amélioration de l'accessibilité */
+/* ─── Accessibility ─── */
 @media (prefers-reduced-motion: reduce) {
-  *,
-  *::before,
-  *::after {
+  *, *::before, *::after {
     animation-duration: 0.01ms !important;
     animation-iteration-count: 1 !important;
     transition-duration: 0.01ms !important;
   }
 }
 
-/* Focus visible pour l'accessibilité */
 *:focus-visible {
-  outline: 2px solid #304998;
+  outline: 2px solid oklch(40% 0.16 262);
   outline-offset: 2px;
 }
 
-/* Styles pour les boutons de paramètres */
+/* ─── Cards ─── */
+.card {
+  border: 1px solid oklch(91% 0.015 260 / 0.6);
+  transition: box-shadow 0.2s ease, transform 0.2s ease;
+}
+
+.card:hover {
+  box-shadow:
+    0 4px 6px -1px oklch(22% 0.025 260 / 0.06),
+    0 2px 4px -2px oklch(22% 0.025 260 / 0.04);
+}
+
+/* ─── Navbar glass effect ─── */
+.navbar-glass {
+  background: oklch(98.5% 0.004 260 / 0.82);
+  backdrop-filter: blur(12px) saturate(1.5);
+  -webkit-backdrop-filter: blur(12px) saturate(1.5);
+  border-bottom: 1px solid oklch(91% 0.015 260 / 0.5);
+}
+
+/* ─── Buttons ─── */
+.btn {
+  font-family: var(--font-heading);
+  font-weight: 500;
+  letter-spacing: -0.01em;
+  transition: all 0.15s ease;
+}
+
 .btn-circle {
   transition: all 0.2s ease-in-out;
 }
-
 .btn-circle:hover {
   transform: scale(1.05);
 }
-
 .btn-circle:active {
   transform: scale(0.95);
 }
 
-/* Animation pour le modal */
+/* ─── Inputs ─── */
+.input, .select, .textarea {
+  font-family: var(--font-body);
+  transition: border-color 0.15s ease, box-shadow 0.15s ease;
+}
+
+.input:focus, .select:focus, .textarea:focus {
+  box-shadow: 0 0 0 3px oklch(40% 0.16 262 / 0.1);
+}
+
+/* ─── Tables ─── */
+.table thead th {
+  font-family: var(--font-heading);
+  font-weight: 600;
+  letter-spacing: 0.01em;
+  text-transform: uppercase;
+  font-size: 0.7rem;
+  color: oklch(45% 0.03 260);
+}
+
+.table tbody tr {
+  transition: background-color 0.1s ease;
+}
+
+/* ─── Badges ─── */
+.badge {
+  font-family: var(--font-heading);
+  font-weight: 500;
+  letter-spacing: 0;
+}
+
+/* ─── Stats ─── */
+.stat-title {
+  font-family: var(--font-body);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  font-size: 0.7rem;
+  font-weight: 500;
+  opacity: 0.6;
+}
+
+.stat-value {
+  font-weight: 700;
+}
+
+/* ─── Modals ─── */
 .modal {
-  transition: opacity 0.3s ease-in-out;
-  font-size: 100% !important; /* Force la taille normale pour le modal */
-  transform: none !important; /* Empêche les transformations */
-  scale: 1 !important; /* Force l'échelle à 1 */
+  transition: opacity 0.25s ease;
 }
 
-.modal.modal-open {
-  animation: modalFadeIn 0.3s ease-in-out;
-}
-
-/* S'assurer que le contenu du modal garde une taille normale */
 .modal-box {
-  font-size: 100% !important;
-  transform: none !important;
-  scale: 1 !important;
-  width: auto !important;
-  max-width: 500px !important;
+  font-family: var(--font-body);
+  border-radius: 0.75rem;
+  border: 1px solid oklch(91% 0.015 260 / 0.5);
 }
 
-.modal .form-control {
-  font-size: 100% !important;
-  transform: none !important;
+@keyframes modalSlideUp {
+  from { opacity: 0; transform: translateY(0.5rem); }
+  to { opacity: 1; transform: translateY(0); }
 }
 
-.modal .btn {
-  font-size: 100% !important;
-  transform: none !important;
-  padding: 0.5rem 1rem !important;
-  height: auto !important;
-  min-height: 2.5rem !important;
+.modal.modal-open .modal-box {
+  animation: modalSlideUp 0.25s ease-out;
 }
 
-.modal .input {
-  font-size: 100% !important;
-  transform: none !important;
-  height: auto !important;
-  min-height: 2.5rem !important;
+/* ─── Page transitions ─── */
+.page-enter-active {
+  transition: opacity 0.2s ease, transform 0.2s ease;
+}
+.page-leave-active {
+  transition: opacity 0.15s ease;
+}
+.page-enter-from {
+  opacity: 0;
+  transform: translateY(4px);
+}
+.page-leave-to {
+  opacity: 0;
 }
 
-.modal .select {
-  font-size: 100% !important;
-  transform: none !important;
-  height: auto !important;
-  min-height: 2.5rem !important;
+/* ─── Scrollbar styling ─── */
+::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+::-webkit-scrollbar-thumb {
+  background: oklch(75% 0.02 260);
+  border-radius: 3px;
+}
+::-webkit-scrollbar-thumb:hover {
+  background: oklch(60% 0.03 260);
 }
 
-.modal .textarea {
-  font-size: 100% !important;
-  transform: none !important;
-  min-height: 4rem !important;
-}
+/* ─── Readability ─── */
+.text-sm { line-height: 1.5; }
+.text-xs { line-height: 1.4; }
 
-.modal .range {
-  font-size: 100% !important;
-  transform: none !important;
-  height: auto !important;
-  min-height: 1.5rem !important;
-}
+/* ─── Adaptive spacing ─── */
+.p-1 { padding: var(--spacing-xs); }
+.p-2 { padding: var(--spacing-sm); }
+.p-3 { padding: var(--spacing-md); }
+.p-4 { padding: var(--spacing-lg); }
+.p-5 { padding: var(--spacing-xl); }
 
-.modal .label {
-  font-size: 100% !important;
-  transform: none !important;
-}
+.m-1 { margin: var(--spacing-xs); }
+.m-2 { margin: var(--spacing-sm); }
+.m-3 { margin: var(--spacing-md); }
+.m-4 { margin: var(--spacing-lg); }
+.m-5 { margin: var(--spacing-xl); }
 
-.modal .label-text {
-  font-size: 100% !important;
-  transform: none !important;
-}
-
-.modal .label-text-alt {
-  font-size: 100% !important;
-  transform: none !important;
-}
-
-.modal .checkbox {
-  font-size: 100% !important;
-  transform: none !important;
-  width: 1rem !important;
-  height: 1rem !important;
-}
-
-.modal .text-xs {
-  font-size: 0.75rem !important;
-  transform: none !important;
-}
-
-.modal .text-sm {
-  font-size: 0.875rem !important;
-  transform: none !important;
-}
-
-.modal .text-lg {
-  font-size: 1.125rem !important;
-  transform: none !important;
-}
-
-.modal .font-bold {
-  font-weight: 700 !important;
-  transform: none !important;
-}
-
-.modal .font-medium {
-  font-weight: 500 !important;
-  transform: none !important;
-}
-
-/* Empêcher les héritages de taille */
-.modal * {
-  font-size: inherit !important;
-  transform: none !important;
-  scale: 1 !important;
-}
-
-@keyframes modalFadeIn {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-
-/* Styles pour les contrôles de zoom */
-.range {
-  transition: all 0.2s ease-in-out;
-}
-
-.range::-webkit-slider-thumb {
-  transition: all 0.2s ease-in-out;
-}
-
-.range::-webkit-slider-thumb:hover {
-  transform: scale(1.1);
-}
-
-/* Amélioration de la lisibilité */
-.text-sm {
-  line-height: 1.5;
-}
-
-.text-xs {
-  line-height: 1.4;
-}
-
-/* Espacement adaptatif */
-.p-1 {
-  padding: var(--spacing-xs);
-}
-.p-2 {
-  padding: var(--spacing-sm);
-}
-.p-3 {
-  padding: var(--spacing-md);
-}
-.p-4 {
-  padding: var(--spacing-lg);
-}
-.p-5 {
-  padding: var(--spacing-xl);
-}
-
-.m-1 {
-  margin: var(--spacing-xs);
-}
-.m-2 {
-  margin: var(--spacing-sm);
-}
-.m-3 {
-  margin: var(--spacing-md);
-}
-.m-4 {
-  margin: var(--spacing-lg);
-}
-.m-5 {
-  margin: var(--spacing-xl);
-}
-
-.gap-1 {
-  gap: var(--spacing-xs);
-}
-.gap-2 {
-  gap: var(--spacing-sm);
-}
-.gap-3 {
-  gap: var(--spacing-md);
-}
-.gap-4 {
-  gap: var(--spacing-lg);
-}
-.gap-5 {
-  gap: var(--spacing-xl);
-}
+.gap-1 { gap: var(--spacing-xs); }
+.gap-2 { gap: var(--spacing-sm); }
+.gap-3 { gap: var(--spacing-md); }
+.gap-4 { gap: var(--spacing-lg); }
+.gap-5 { gap: var(--spacing-xl); }
 
 @layer components {
   .form-control .label {
@@ -337,7 +296,6 @@
     padding-bottom: 0;
     margin-right: 15px;
   }
-
   .form-control .label + * {
     margin-top: var(--spacing-xs);
   }