feat : new ui et message discord

assets/css/main.css

@@ -13,15 +13,147 @@
   --color-m-bg: rgb(var(--m-bg));
   --color-m-error: rgb(var(--m-error));
   --color-m-success: rgb(var(--m-success));
-  /* Alias pour la faute de frappe courante "m-succes" */
+  --color-m-accent: rgb(var(--m-accent));
+  --color-m-warning: rgb(var(--m-warning));
   --color-m-succes: rgb(var(--m-success));
+  --font-display: "Outfit", system-ui, sans-serif;
+  --font-mono: "JetBrains Mono", "Fira Code", monospace;
+}
+
+@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&family=Outfit:wght@300;400;500;600;700;800;900&display=swap');
+
+@layer base {
+  * {
+    box-sizing: border-box;
+  }
+
+  body {
+    font-family: var(--font-display);
+    background: rgb(var(--m-bg));
+    color: rgb(var(--m-text));
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    transition: background-color 0.4s ease, color 0.4s ease;
+  }
 }
 
 @layer utilities {
   .bg-grid {
     background-image:
-      linear-gradient(to right, rgba(148, 163, 184, 0.12) 1px, transparent 1px),
-      linear-gradient(to bottom, rgba(148, 163, 184, 0.12) 1px, transparent 1px);
+      linear-gradient(to right, rgb(var(--m-accent) / 0.04) 1px, transparent 1px),
+      linear-gradient(to bottom, rgb(var(--m-accent) / 0.04) 1px, transparent 1px);
     background-size: 32px 32px;
   }
+
+  .bg-noise {
+    position: relative;
+  }
+
+  .bg-noise::before {
+    content: "";
+    position: absolute;
+    inset: 0;
+    opacity: 0.025;
+    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
+    pointer-events: none;
+    z-index: 0;
+  }
+
+  .card-glow {
+    box-shadow:
+      0 0 0 1px rgb(var(--m-accent) / var(--m-card-border-opacity)),
+      0 4px 24px -4px rgba(0, 0, 0, var(--m-shadow-opacity)),
+      0 0 48px -12px rgb(var(--m-accent) / 0.06);
+    transition: box-shadow 0.3s ease;
+  }
+
+  .card-glow-success {
+    box-shadow:
+      0 0 0 1px rgb(var(--m-success) / 0.15),
+      0 4px 24px -4px rgba(0, 0, 0, var(--m-shadow-opacity));
+  }
+
+  .card-glow-error {
+    box-shadow:
+      0 0 0 1px rgb(var(--m-error) / 0.15),
+      0 4px 24px -4px rgba(0, 0, 0, var(--m-shadow-opacity));
+  }
+
+  .text-gradient {
+    background: linear-gradient(135deg, rgb(var(--m-accent)), rgb(var(--m-success)));
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+  }
+}
+
+@keyframes fade-in-up {
+  from {
+    opacity: 0;
+    transform: translateY(12px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes pulse-glow {
+  0%,
+  100% {
+    box-shadow: 0 0 4px currentColor, 0 0 8px currentColor;
+    opacity: 1;
+  }
+
+  50% {
+    box-shadow: 0 0 8px currentColor, 0 0 16px currentColor;
+    opacity: 0.7;
+  }
+}
+
+@keyframes shimmer {
+  0% {
+    background-position: -200% 0;
+  }
+
+  100% {
+    background-position: 200% 0;
+  }
+}
+
+.animate-fade-in-up {
+  animation: fade-in-up 0.5s ease-out both;
+}
+
+.animate-pulse-glow {
+  animation: pulse-glow 2s ease-in-out infinite;
+}
+
+.animate-shimmer {
+  background: linear-gradient(
+    90deg,
+    var(--m-shimmer-from) 0%,
+    var(--m-shimmer-to) 50%,
+    var(--m-shimmer-from) 100%
+  );
+  background-size: 200% 100%;
+  animation: shimmer 2s ease-in-out infinite;
+}
+
+::-webkit-scrollbar {
+  width: 6px;
+}
+
+::-webkit-scrollbar-track {
+  background: rgb(var(--m-bg));
+}
+
+::-webkit-scrollbar-thumb {
+  background: rgb(var(--m-border));
+  border-radius: 3px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: rgb(var(--m-muted));
 }