JavaScript 56.7%
TypeScript 42.6%
1@tailwind base;2@tailwind components;3@tailwind utilities;45/* =====================================================================6 SPB Cloud v3 — "Aurora" design tokens7 Surfaces sémantiques (triplets RGB pour permettre /alpha) + accent8 dynamique (data-accent) + densité (data-density) + mouvement (data-motion)9 ===================================================================== */1011/* ---------- Accent presets (RGB triplets) ---------- */12:root,13html[data-accent="aurore"] {14 --accent-50: 238 242 255; --accent-100: 224 231 255; --accent-200: 199 210 254;15 --accent-300: 165 180 252; --accent-400: 129 140 248; --accent-500: 99 102 241;16 --accent-600: 79 70 229; --accent-700: 67 56 202; --accent-800: 55 48 163;17 --accent-900: 49 46 129; --accent-950: 30 27 75;18}19html[data-accent="ocean"] {20 --accent-50: 239 246 255; --accent-100: 219 234 254; --accent-200: 191 219 254;21 --accent-300: 147 197 253; --accent-400: 96 165 250; --accent-500: 59 130 246;22 --accent-600: 37 99 235; --accent-700: 29 78 216; --accent-800: 30 64 175;23 --accent-900: 30 58 138; --accent-950: 23 37 84;24}25html[data-accent="glacier"] {26 --accent-50: 236 254 255; --accent-100: 207 250 254; --accent-200: 165 243 252;27 --accent-300: 103 232 249; --accent-400: 34 211 238; --accent-500: 6 182 212;28 --accent-600: 8 145 178; --accent-700: 14 116 144; --accent-800: 21 94 117;29 --accent-900: 22 78 99; --accent-950: 8 51 68;30}31html[data-accent="foret"] {32 --accent-50: 236 253 245; --accent-100: 209 250 229; --accent-200: 167 243 208;33 --accent-300: 110 231 183; --accent-400: 52 211 153; --accent-500: 16 185 129;34 --accent-600: 5 150 105; --accent-700: 4 120 87; --accent-800: 6 95 70;35 --accent-900: 6 78 59; --accent-950: 2 44 34;36}37html[data-accent="corail"] {38 --accent-50: 255 241 242; --accent-100: 255 228 230; --accent-200: 254 205 211;39 --accent-300: 253 164 175; --accent-400: 251 113 133; --accent-500: 244 63 94;40 --accent-600: 225 29 72; --accent-700: 190 18 60; --accent-800: 159 18 57;41 --accent-900: 136 19 55; --accent-950: 76 5 25;42}43html[data-accent="ambre"] {44 --accent-50: 255 251 235; --accent-100: 254 243 199; --accent-200: 253 230 138;45 --accent-300: 252 211 77; --accent-400: 251 191 36; --accent-500: 245 158 11;46 --accent-600: 217 119 6; --accent-700: 180 83 9; --accent-800: 146 64 14;47 --accent-900: 120 53 15; --accent-950: 69 26 3;48}49html[data-accent="amethyste"] {50 --accent-50: 245 243 255; --accent-100: 237 233 254; --accent-200: 221 214 254;51 --accent-300: 196 181 253; --accent-400: 167 139 250; --accent-500: 139 92 246;52 --accent-600: 124 58 237; --accent-700: 109 40 217; --accent-800: 91 33 182;53 --accent-900: 76 29 149; --accent-950: 46 16 101;54}5556/* ---------- LIGHT (défaut) ---------- */57:root {58 --canvas: 245 246 248; /* fond de l'app */59 --surface: 255 255 255; /* cartes, panneaux */60 --elevated: 255 255 255; /* popovers, modales */61 --line: 226 230 235; /* bordures */6263 --background: rgb(var(--canvas));64 --foreground: #0f172a;65 --bg-sidebar: #ffffff;66 --bg-card: #ffffff;67 --bg-card-hover: #f1f3f6;68 --bg-input: #f1f3f6;69 --bg-overlay: rgba(15, 23, 42, 0.45);70 --border-primary: #e2e6eb;71 --border-secondary: #c8cdd5;72 --text-primary: #0f172a;73 --text-secondary: #3a404b;74 --text-muted: #6b7280;75 --text-dimmed: #9aa1ad;76 --toast-bg: #ffffff;77 --toast-color: #0f172a;78 --toast-border: rgba(15, 23, 42, 0.08);79 --toast-shadow: 0 12px 40px -8px rgba(15, 23, 42, 0.25);8081 --row-py: 0.625rem; /* densité confortable */82 color-scheme: light;83}8485/* ---------- DARK "obsidienne" ---------- */86.dark {87 --canvas: 10 11 16;88 --surface: 18 19 26;89 --elevated: 24 26 35;90 --line: 40 43 54;9192 --background: rgb(var(--canvas));93 --foreground: #ededed;94 --bg-sidebar: rgb(var(--canvas));95 --bg-card: rgba(255, 255, 255, 0.04);96 --bg-card-hover: rgba(255, 255, 255, 0.08);97 --bg-input: rgba(255, 255, 255, 0.05);98 --bg-overlay: rgba(0, 0, 0, 0.65);99 --border-primary: rgba(255, 255, 255, 0.08);100 --border-secondary: rgba(255, 255, 255, 0.16);101 --text-primary: #ffffff;102 --text-secondary: #e5e7eb;103 --text-muted: #9aa1ad;104 --text-dimmed: #6b7280;105 --toast-bg: #181a23;106 --toast-color: #e5e7eb;107 --toast-border: rgba(255, 255, 255, 0.08);108 --toast-shadow: 0 12px 40px -8px rgba(0, 0, 0, 0.7);109 color-scheme: dark;110}111112html[data-density="compact"] { --row-py: 0.375rem; }113114/* ---------- Base ---------- */115html {116 overscroll-behavior: none;117 -webkit-text-size-adjust: 100%;118 text-rendering: optimizeLegibility;119}120121body {122 color: var(--foreground);123 background: var(--background);124 font-family: var(--font-geist), "Inter", system-ui, -apple-system, sans-serif;125 font-feature-settings: "cv11", "ss01", "ss03";126 transition: background-color 0.3s ease, color 0.3s ease;127 -webkit-tap-highlight-color: transparent;128 -webkit-font-smoothing: antialiased;129}130131::selection {132 background: rgb(var(--accent-500) / 0.25);133}134135/* Réduction des animations (préférence utilisateur ou système) */136html[data-motion="reduced"] *,137html[data-motion="reduced"] *::before,138html[data-motion="reduced"] *::after {139 animation-duration: 0.01ms !important;140 animation-iteration-count: 1 !important;141 transition-duration: 0.01ms !important;142 scroll-behavior: auto !important;143}144145/* ---------- Mobile safe areas ---------- */146.safe-top { padding-top: env(safe-area-inset-top, 0); }147.pb-safe { padding-bottom: env(safe-area-inset-bottom, 0); }148.pb-tabbar { padding-bottom: calc(4rem + env(safe-area-inset-bottom, 0)); }149@media (min-width: 1024px) { .pb-tabbar { padding-bottom: 0; } }150151/* ---------- Composants (surchargeables par les utilitaires Tailwind : pl-10, rounded-*, etc.) ---------- */152@layer components {153 /* Carte standard */154 .card {155 @apply bg-surface border border-line rounded-2xl shadow-card dark:shadow-none dark:border-white/[0.07];156 }157 .card-hover {158 @apply transition-all duration-200 hover:shadow-card-hover hover:-translate-y-px dark:hover:bg-white/[0.03] dark:hover:border-white/[0.12];159 }160161 /* Verre (barres flottantes, popovers, palette) */162 .glass {163 background: rgb(var(--elevated) / 0.9);164 -webkit-backdrop-filter: saturate(160%) blur(18px);165 backdrop-filter: saturate(160%) blur(18px);166 border: 1px solid rgb(var(--line) / 0.9);167 }168 .dark .glass { border-color: rgba(255, 255, 255, 0.08); box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.05); }169170 /* Champ de saisie standard */171 .field {172 @apply w-full bg-gray-100 dark:bg-white/5 border border-gray-200 dark:border-white/10 rounded-xl px-3.5 py-2.5 text-sm text-gray-900 dark:text-white placeholder-gray-400 dark:placeholder-gray-500 transition-all duration-200;173 @apply focus:outline-none focus:border-blue-500/60 focus:ring-4 focus:ring-blue-500/10 dark:focus:ring-blue-500/15;174 }175176 /* Texte dégradé d'accent */177 .text-accent-gradient {178 background: linear-gradient(120deg, rgb(var(--accent-500)), rgb(var(--accent-700)));179 -webkit-background-clip: text;180 background-clip: text;181 color: transparent;182 }183 .dark .text-accent-gradient {184 background: linear-gradient(120deg, rgb(var(--accent-300)), rgb(var(--accent-500)));185 -webkit-background-clip: text;186 background-clip: text;187 }188189 /* Ligne d'explorateur : padding piloté par la densité */190 .density-row { padding-top: var(--row-py); padding-bottom: var(--row-py); }191192 /* Anneau de cible au dépôt */193 .drop-target {194 @apply ring-2 ring-blue-500 ring-offset-2 ring-offset-canvas bg-blue-500/10;195 }196}197198/* ---------- Utilities ---------- */199@layer utilities {200 .touch-target { min-width: 44px; min-height: 44px; }201 .scrollbar-none { scrollbar-width: none; }202 .scrollbar-none::-webkit-scrollbar { display: none; }203 .scrollbar-thin { scrollbar-width: thin; }204}205206/* Interactions tactiles */207button, a, [role="button"] { -webkit-touch-callout: none; user-select: none; }208button:active, a:active, [role="button"]:active { opacity: 0.9; }209210/* Scrollbar */211::-webkit-scrollbar { width: 8px; height: 8px; }212@media (max-width: 768px) { ::-webkit-scrollbar { width: 3px; height: 3px; } }213::-webkit-scrollbar-track { background: transparent; }214::-webkit-scrollbar-thumb { background: rgb(128 128 128 / 0.28); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }215::-webkit-scrollbar-thumb:hover { background: rgb(128 128 128 / 0.5); border: 2px solid transparent; background-clip: padding-box; }216217/* Focus visible accent */218*:focus-visible {219 outline: 2px solid rgb(var(--accent-500));220 outline-offset: 2px;221 border-radius: 6px;222}223224/* Skeleton shimmer */225@keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }226.animate-shimmer {227 background: linear-gradient(90deg, transparent 25%, rgba(255, 255, 255, 0.35) 50%, transparent 75%);228 background-size: 200% 100%;229 animation: shimmer 1.6s infinite;230}231.dark .animate-shimmer {232 background: linear-gradient(90deg, transparent 25%, rgba(255, 255, 255, 0.07) 50%, transparent 75%);233 background-size: 200% 100%;234}235236/* Page transitions (legacy) */237.page-enter { opacity: 0; transform: translateY(8px); }238.page-enter-active { opacity: 1; transform: translateY(0); transition: all 0.3s ease; }239240/* Drop zone */241.drop-active {242 border-color: rgb(var(--accent-500)) !important;243 background-color: rgb(var(--accent-500) / 0.06) !important;244}245246/* Modale plein écran mobile (legacy) */247@media (max-width: 640px) {248 .mobile-full-modal {249 width: 100vw !important; max-width: 100vw !important; min-height: 50vh;250 border-radius: 1rem 1rem 0 0 !important; margin: 0; position: fixed; bottom: 0; left: 0; right: 0;251 }252}253254/* Selects natifs */255select {256 -webkit-appearance: none; appearance: none;257 background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");258 background-position: right 0.5rem center; background-repeat: no-repeat; background-size: 1.5em 1.5em; padding-right: 2.5rem;259}260261/* Kbd */262kbd {263 font-family: var(--font-geist), system-ui, sans-serif;264 font-size: 11px; line-height: 1;265 padding: 3px 6px; border-radius: 6px;266 border: 1px solid rgb(var(--line));267 background: rgb(var(--surface));268 color: var(--text-muted);269 box-shadow: 0 1px 0 rgb(var(--line));270}271.dark kbd { border-color: rgba(255,255,255,0.12); background: rgba(255,255,255,0.06); box-shadow: 0 1px 0 rgba(255,255,255,0.08); }272273/* Prose minimal (l'assistant IA rend du Markdown ; pas de plugin typography) */274.prose { color: inherit; line-height: 1.6; }275.prose p { margin: 0.35em 0; }276.prose ul, .prose ol { margin: 0.4em 0; padding-left: 1.25em; }277.prose ul { list-style: disc; } .prose ol { list-style: decimal; }278.prose li { margin: 0.15em 0; }279.prose h1, .prose h2, .prose h3, .prose h4 { font-weight: 600; margin: 0.6em 0 0.3em; line-height: 1.3; }280.prose h1 { font-size: 1.15em; } .prose h2 { font-size: 1.08em; } .prose h3 { font-size: 1.02em; }281.prose blockquote { border-left: 3px solid rgb(var(--accent-500) / 0.5); padding-left: 0.75em; margin: 0.4em 0; color: var(--text-muted); }282.prose table { width: 100%; border-collapse: collapse; font-size: 0.85em; margin: 0.5em 0; }283.prose th, .prose td { border: 1px solid rgb(var(--line)); padding: 4px 8px; text-align: left; }284.prose hr { border-color: rgb(var(--line)); margin: 0.75em 0; }285.prose strong { font-weight: 600; }286