/* Saraha v2 — Styles custom (au-delà de Tailwind) */ /* Animations */ @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .animate-fade-in { animation: fadeIn 0.4s ease-out forwards; } /* Loader spinner */ .spinner { display: inline-block; width: 1em; height: 1em; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin 0.6s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* Toast notifications */ .toast { position: fixed; bottom: 1.5rem; left: 50%; transform: translateX(-50%) translateY(100px); padding: 0.75rem 1.25rem; border-radius: 0.75rem; font-weight: 500; font-size: 0.875rem; box-shadow: 0 10px 25px -5px rgb(0 0 0 / 0.3); transition: transform 0.3s ease-out; z-index: 9999; max-width: 90vw; } .toast.show { transform: translateX(-50%) translateY(0); } .toast.success { background: #10b981; color: white; } .toast.error { background: #ef4444; color: white; } .toast.info { background: #3b82f6; color: white; } /* Textarea auto-grow look */ .message-input { min-height: 120px; resize: vertical; font-family: inherit; } /* Message card hover */ .message-card { transition: transform 0.15s ease, box-shadow 0.15s ease; } .message-card:hover { transform: translateY(-2px); box-shadow: 0 10px 25px -5px rgb(0 0 0 / 0.1); } /* ============================================================ MODE SOMBRE — piloté par la classe .dark sur . Posée par le script inline de chaque page (+ /assets/theme.js) selon la préférence : clair / sombre / auto (= suit le système). Sans .dark → thème CLAIR 100% inchangé. ============================================================ */ html.dark, html.dark body { background-color: #0e1216 !important; color: #e7ecf0; } /* Surfaces */ html.dark .bg-white { background-color: #191f25 !important; } html.dark .bg-gray-50, html.dark .bg-gray-100 { background-color: #0e1216 !important; } html.dark .bg-gray-200, html.dark .bg-gray-300 { background-color: #232b33 !important; } /* Tints de marque très clairs → versions sombres */ html.dark .bg-saraha-50 { background-color: #11302e !important; } html.dark .bg-saraha-100 { background-color: #163f3b !important; } html.dark .bg-plum-50 { background-color: #2a1426 !important; } /* Dégradés de fond CLAIRS (hero, sections) → fond sombre plat (les classes from-/via-/to- ne sont pas captées par bg-*) */ html.dark .from-saraha-50, html.dark .via-white, html.dark .to-plum-50, html.dark .to-saraha-50, html.dark .from-white, html.dark .to-white { background-image: none !important; background-color: #0e1216 !important; } /* Texte */ html.dark .text-gray-900, html.dark .text-gray-800 { color: #e7ecf0 !important; } html.dark .text-gray-700, html.dark .text-gray-600 { color: #c3ccd4 !important; } html.dark .text-gray-500, html.dark .text-gray-400, html.dark .text-gray-300 { color: #8b97a3 !important; } /* Teal foncé peu lisible sur fond sombre → teal plus clair */ html.dark .text-saraha-700, html.dark .text-saraha-600 { color: #2dd4bf !important; } /* Bordures & séparateurs */ html.dark .border-gray-100, html.dark .border-gray-200, html.dark .border-gray-300 { border-color: #2a333b !important; } html.dark .divide-gray-100 > :not([hidden]) ~ :not([hidden]), html.dark .divide-gray-200 > :not([hidden]) ~ :not([hidden]) { border-color: #2a333b !important; } /* Champs de saisie — y compris ceux SANS classe de fond (sinon blanc par défaut) */ html.dark input, html.dark textarea, html.dark select { background-color: #0e1216; color: #e7ecf0; border-color: #2a333b; } html.dark input::placeholder, html.dark textarea::placeholder { color: #6b7a87 !important; } /* En-tête "glass" translucide (dashboard, online) → version sombre */ html.dark .glass-header { background: rgba(20, 25, 31, 0.85) !important; } html.dark .border-gray-200\/60 { border-color: rgba(42, 51, 59, 0.55) !important; } /* Boutons / surfaces blancs translucides (sélecteur de langue, etc.) */ html.dark .bg-white\/80 { background-color: rgba(25, 31, 37, 0.85) !important; } html.dark .bg-white\/25, html.dark .bg-white\/20, html.dark .bg-white\/15 { background-color: rgba(255, 255, 255, 0.12) !important; } /* Ombres adoucies (sinon trop dures sur fond sombre) */ html.dark .shadow-sm, html.dark .shadow, html.dark .shadow-md, html.dark .shadow-lg, html.dark .shadow-xl { --tw-shadow-color: rgba(0, 0, 0, 0.5); } /* Barre de défilement (WebKit) */ html.dark ::-webkit-scrollbar-thumb { background-color: #2a333b; }