avant 50

frontend/src/style.css

@@ -2,13 +2,56 @@
 @tailwind components;
 @tailwind utilities;
 
-body {
-  @apply bg-bg text-text font-mono;
-  min-height: 100vh;
+@layer base {
+  html {
+    font-size: var(--ui-font-size, 14px);
+  }
+  body {
+    @apply bg-bg text-text font-mono selection:bg-yellow/30;
+    min-height: 100vh;
+  }
 }
 
+@layer components {
+  /* Cartes avec effet 70s */
+  .card-jardin {
+    @apply bg-bg-soft border border-bg-hard rounded-xl p-4 shadow-sm 
+           transition-all duration-300 hover:shadow-lg hover:border-text-muted/30;
+  }
+
+  /* Boutons stylisés */
+  .btn-primary {
+    @apply bg-yellow text-bg px-4 py-2 rounded-lg font-bold text-sm
+           transition-transform active:scale-95 hover:opacity-90;
+  }
+  
+  .btn-outline {
+    @apply border border-bg-hard text-text-muted px-4 py-2 rounded-lg text-sm
+           hover:bg-bg-hard hover:text-text transition-all;
+  }
+
+  /* Badges colorés */
+  .badge {
+    @apply px-2 py-0.5 rounded-full text-[10px] font-bold uppercase tracking-wider;
+  }
+  .badge-green  { @apply bg-green/20 text-green; }
+  .badge-yellow { @apply bg-yellow/20 text-yellow; }
+  .badge-blue   { @apply bg-blue/20 text-blue; }
+  .badge-red    { @apply bg-red/20 text-red; }
+  .badge-orange { @apply bg-orange/20 text-orange; }
+}
+
+/* Transitions de pages */
+.fade-enter-active, .fade-leave-active {
+  transition: opacity 0.2s ease, transform 0.2s ease;
+}
+.fade-enter-from { opacity: 0; transform: translateY(5px); }
+.fade-leave-to { opacity: 0; transform: translateY(-5px); }
+
 * { box-sizing: border-box; }
 
+/* Custom scrollbar */
 ::-webkit-scrollbar { width: 6px; }
 ::-webkit-scrollbar-track { background: #1d2021; }
 ::-webkit-scrollbar-thumb { background: #504945; border-radius: 3px; }
+::-webkit-scrollbar-thumb:hover { background: #665c54; }