refact: unify js and css

static/css/design-system.css

@@ -103,6 +103,65 @@
   @apply focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500;
 }
 
+/* Layout utilitaires uniformes */
+.container-responsive {
+  @apply max-w-7xl mx-auto px-4 py-8;
+}
+
+.container-narrow {
+  @apply max-w-4xl mx-auto px-4 py-6;
+}
+
+.container-wide {
+  @apply max-w-full mx-auto px-6 py-8;
+}
+
+/* Spacing système unifié */
+.space-section {
+  @apply space-y-8;
+}
+
+.space-elements {
+  @apply space-y-6;
+}
+
+.space-items {
+  @apply space-y-4;
+}
+
+.space-tight {
+  @apply space-y-3;
+}
+
+.space-compact {
+  @apply space-y-2;
+}
+
+/* Tailles de texte système */
+.text-display {
+  @apply text-4xl font-bold leading-tight;
+}
+
+.text-heading {
+  @apply text-2xl font-bold leading-snug;
+}
+
+.text-subheading {
+  @apply text-xl font-semibold leading-normal;
+}
+
+.text-body {
+  @apply text-base leading-relaxed;
+}
+
+.text-caption {
+  @apply text-sm text-gray-600 leading-normal;
+}
+
+.text-micro {
+  @apply text-xs text-gray-500 leading-tight;
+}
+
 /* Gradients réutilisables */
 .bg-gradient-primary {
   background: var(--gradient-primary);
@@ -211,6 +270,48 @@
   @apply block bg-white rounded-lg shadow hover:shadow-lg transition-all duration-300 p-6 transform hover:scale-105 group;
 }
 
+/* Grilles système uniformes */
+.grid-responsive {
+  @apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6;
+}
+
+.grid-actions {
+  @apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4;
+}
+
+.grid-cards {
+  @apply grid grid-cols-1 lg:grid-cols-2 gap-6;
+}
+
+.grid-list {
+  @apply grid grid-cols-1 gap-4;
+}
+
+/* Layouts de page standardisés */
+.page-layout {
+  @apply min-h-screen bg-gray-100;
+}
+
+.page-content {
+  @apply container-responsive space-section;
+}
+
+.page-section {
+  @apply bg-white rounded-xl shadow-lg overflow-hidden;
+}
+
+.page-header {
+  @apply px-6 py-4 border-b border-gray-200 flex items-center justify-between;
+}
+
+.page-body {
+  @apply p-6;
+}
+
+.page-footer {
+  @apply px-6 py-4 border-t border-gray-200 bg-gray-50;
+}
+
 /* Filtres */
 .filter-section {
   @apply bg-white rounded-lg shadow p-6;
@@ -233,7 +334,7 @@
    ANIMATIONS ET EFFETS
    ======================================== */
 
-/* Animation d'apparition */
+/* Animations d'apparition standardisées */
 @keyframes fadeInUp {
   from {
     opacity: 0;
@@ -245,10 +346,86 @@
   }
 }
 
+@keyframes fadeInLeft {
+  from {
+    opacity: 0;
+    transform: translateX(-20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes fadeInRight {
+  from {
+    opacity: 0;
+    transform: translateX(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes scaleIn {
+  from {
+    opacity: 0;
+    transform: scale(0.9);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+/* Classes d'animation standardisées */
 .fade-in-up {
   animation: fadeInUp 0.5s ease-out;
 }
 
+.fade-in-left {
+  animation: fadeInLeft 0.4s ease-out;
+}
+
+.fade-in-right {
+  animation: fadeInRight 0.4s ease-out;
+}
+
+.scale-in {
+  animation: scaleIn 0.3s ease-out;
+}
+
+/* Animations au scroll */
+.animate-on-scroll {
+  opacity: 0;
+  transform: translateY(20px);
+  transition: all 0.6s ease-out;
+}
+
+.animate-on-scroll.in-view {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+/* Micro-interactions */
+.hover-lift {
+  transition: all var(--transition-normal);
+}
+
+.hover-lift:hover {
+  transform: translateY(-2px);
+  box-shadow: var(--shadow-lg);
+}
+
+.hover-scale {
+  transition: transform var(--transition-normal);
+}
+
+.hover-scale:hover {
+  transform: scale(1.05);
+}
+
 /* Animation des messages flash */
 @keyframes slideDown {
   from {