/* ============================================================================ Plume.ia — Mode sombre Activé par l'attribut data-theme="dark" sur (voir header.php). Stratégie : overrides ciblés des surfaces principales + utilitaires Tailwind les plus utilisés dans les templates. Défaut = préférence système. ========================================================================== */ html[data-theme="dark"] { color-scheme: dark; --dk-bg: #0f172a; /* fond de page */ --dk-surface: #1e293b; /* cartes, panneaux */ --dk-surface-2: #263449; /* surfaces secondaires (hover, inputs) */ --dk-border: #334155; --dk-text: #e2e8f0; --dk-text-muted: #94a3b8; --dk-accent: #818cf8; } /* --- Fond et texte globaux ------------------------------------------------ */ /* NB: background-image none — le thème clair pose un dégradé clair sur body */ html[data-theme="dark"] body, html[data-theme="dark"] body.bg-slate-100 { background-color: var(--dk-bg) !important; background-image: none !important; color: var(--dk-text) !important; } /* --- Utilitaires Tailwind fréquents --------------------------------------- */ html[data-theme="dark"] .bg-white { background-color: var(--dk-surface) !important; } html[data-theme="dark"] .bg-slate-50, html[data-theme="dark"] .bg-slate-100, html[data-theme="dark"] .bg-gray-50, html[data-theme="dark"] .bg-gray-100 { background-color: var(--dk-surface-2) !important; } html[data-theme="dark"] .text-slate-900, html[data-theme="dark"] .text-slate-800, html[data-theme="dark"] .text-slate-700, html[data-theme="dark"] .text-gray-900, html[data-theme="dark"] .text-gray-800, html[data-theme="dark"] .text-gray-700 { color: var(--dk-text) !important; } html[data-theme="dark"] .text-slate-600, html[data-theme="dark"] .text-slate-500, html[data-theme="dark"] .text-slate-400, html[data-theme="dark"] .text-gray-600, html[data-theme="dark"] .text-gray-500 { color: var(--dk-text-muted) !important; } html[data-theme="dark"] .border-slate-200, html[data-theme="dark"] .border-slate-300, html[data-theme="dark"] .border-gray-200, html[data-theme="dark"] .border-gray-300 { border-color: var(--dk-border) !important; } /* --- Cartes et tuiles ------------------------------------------------------ */ html[data-theme="dark"] .card, html[data-theme="dark"] .mockup-card, html[data-theme="dark"] .admin-tile, html[data-theme="dark"] .dashboard-quick-card, html[data-theme="dark"] .dashboard-table-card, html[data-theme="dark"] .dashboard-dictation-card { background: var(--dk-surface) !important; border-color: var(--dk-border) !important; color: var(--dk-text); } html[data-theme="dark"] .admin-tile:hover, html[data-theme="dark"] .dashboard-quick-card--link:hover { background: var(--dk-surface-2) !important; } html[data-theme="dark"] .admin-tile-title, html[data-theme="dark"] .dashboard-quick-card-title, html[data-theme="dark"] .dashboard-table-title, html[data-theme="dark"] .file-row-title { color: var(--dk-text) !important; } html[data-theme="dark"] .admin-tile-desc, html[data-theme="dark"] .dashboard-quick-card-subtitle, html[data-theme="dark"] .dashboard-table-subtitle, html[data-theme="dark"] .file-row-date { color: var(--dk-text-muted) !important; } /* Badge de statut de transcription asynchrone : couleurs porteuses de sens, déclinées en teintes rgba lisibles sur fond sombre (motif des chips colorés) */ html[data-theme="dark"] .file-status-badge.status-pending { background-color: rgba(251, 191, 36, 0.18); color: #fcd34d; } html[data-theme="dark"] .file-status-badge.status-processing { background-color: rgba(96, 165, 250, 0.18); color: #93c5fd; } html[data-theme="dark"] .file-status-badge.status-error { background-color: rgba(248, 113, 113, 0.18); color: #fca5a5; } html[data-theme="dark"] .file-status-badge.status-done { background-color: rgba(52, 211, 153, 0.18); color: #6ee7b7; } /* Pastille date/heure au survol (fichiers + conversations) */ html[data-theme="dark"] .hub-list .file-row::after, html[data-theme="dark"] .hub-list .conversation-row[data-file-date]::after, html[data-theme="dark"] .chat-sidebar-body li[data-conv-date]::after { background: var(--dk-surface-2); border-color: var(--dk-border); color: var(--dk-text); } /* --- Hub / panneau latéral -------------------------------------------------- */ html[data-theme="dark"] .hub-panel, html[data-theme="dark"] .hub-tile, html[data-theme="dark"] .hub-modal-card { background: var(--dk-surface) !important; border-color: var(--dk-border) !important; color: var(--dk-text); } html[data-theme="dark"] .hub-tile--notes, html[data-theme="dark"] .hub-tile--audio, html[data-theme="dark"] .hub-tile--dictation, html[data-theme="dark"] .hub-tile--ghost { background: var(--dk-surface-2) !important; border-color: var(--dk-border) !important; } html[data-theme="dark"] .hub-mini-newchat { background: var(--dk-surface-2) !important; border-color: var(--dk-border) !important; } /* Conteneurs d'icônes d'images : en clair ils ont un fond blanc + cadre (joli autour d'une icône claire). En sombre, les nouvelles images « _sombre » portent déjà leur propre fond : on retire donc le cadre pour éviter le liseré clair disgracieux autour de l'image. */ html[data-theme="dark"] .file-row-icon, html[data-theme="dark"] .hub-tile-icon { background: transparent !important; border-color: transparent !important; box-shadow: none !important; } html[data-theme="dark"] .hub-tab { color: var(--dk-text-muted); } html[data-theme="dark"] .hub-tab.is-active { background: var(--dk-surface-2); color: var(--dk-accent); } html[data-theme="dark"] .hub-settings-item, html[data-theme="dark"] .hub-gpt-item, html[data-theme="dark"] .hub-suggestion, html[data-theme="dark"] .conversation-item { background: var(--dk-surface) !important; border-color: var(--dk-border) !important; color: var(--dk-text) !important; } html[data-theme="dark"] .hub-settings-item:hover, html[data-theme="dark"] .hub-gpt-item:hover, html[data-theme="dark"] .hub-suggestion:hover, html[data-theme="dark"] .conversation-item:hover { background: var(--dk-surface-2) !important; } html[data-theme="dark"] .conversation-link { color: var(--dk-text); } html[data-theme="dark"] .hub-modal-title { color: var(--dk-accent); } html[data-theme="dark"] .hub-empty-state, html[data-theme="dark"] .dashboard-empty-state { color: var(--dk-text-muted); } /* --- Zone de chat ----------------------------------------------------------- */ html[data-theme="dark"] .chat-shell, html[data-theme="dark"] .chat-main, html[data-theme="dark"] .chat-header, html[data-theme="dark"] .chat-thread, html[data-theme="dark"] .hub-shell { background: var(--dk-bg) !important; border-color: var(--dk-border) !important; } html[data-theme="dark"] .chat-sidebar { background: var(--dk-surface) !important; border-color: var(--dk-border) !important; } html[data-theme="dark"] .chat-message--assistant .chat-bubble { background: var(--dk-surface) !important; border-color: var(--dk-border) !important; color: var(--dk-text) !important; } /* La bulle utilisateur garde son dégradé indigo (déjà lisible en sombre) */ html[data-theme="dark"] .chat-message-actions button { background: var(--dk-surface); border-color: var(--dk-border); color: var(--dk-text-muted); } html[data-theme="dark"] .chat-message-actions button:hover { background: var(--dk-surface-2); } /* Le composer est transparent (pilule flottante) : la surface vit sur .composer-row */ html[data-theme="dark"] .chat-composer { background: transparent !important; border-color: transparent !important; } /* Pastille flottante « aller en bas » du fil de discussion */ html[data-theme="dark"] .scroll-bottom-btn { background: var(--dk-surface); border-color: var(--dk-border); color: var(--dk-text); box-shadow: 0 6px 18px -6px rgba(0, 0, 0, 0.6); } html[data-theme="dark"] .scroll-bottom-btn:hover { background: var(--dk-surface-2); } html[data-theme="dark"] .composer-row { background: var(--dk-surface) !important; border-color: var(--dk-border) !important; } html[data-theme="dark"] .composer-textarea { background: transparent !important; border-color: transparent !important; color: var(--dk-text) !important; } html[data-theme="dark"] .dashboard-textarea, html[data-theme="dark"] .dashboard-dictation-textarea { background: var(--dk-surface-2) !important; border-color: var(--dk-border) !important; color: var(--dk-text) !important; } html[data-theme="dark"] .composer-icon-button, html[data-theme="dark"] .header-icon-button, html[data-theme="dark"] .sidebar-icon-button, html[data-theme="dark"] .hub-panel-iconbtn { background: var(--dk-surface-2); border-color: var(--dk-border); color: var(--dk-text-muted); } /* Bouton « Sauvegarder » désactivé : sa règle propre force un fond blanc en #id + !important, qui bat le sélecteur de classe ci-dessus — d'où ce bouton resté blanc en sombre. On surcharge à spécificité équivalente. */ html[data-theme="dark"] #save-conversation-btn:disabled, html[data-theme="dark"] #save-conversation-btn[disabled] { background-color: var(--dk-surface-2) !important; color: var(--dk-text-muted) !important; border-color: var(--dk-border) !important; } html[data-theme="dark"] .controls-pill, html[data-theme="dark"] .model-chip, html[data-theme="dark"] .composer-chip, html[data-theme="dark"] .composer-effort, html[data-theme="dark"] .attachment-chip { background: var(--dk-surface-2) !important; border-color: var(--dk-border) !important; color: var(--dk-text) !important; } html[data-theme="dark"] .composer-effort-select { background: transparent !important; color: var(--dk-text) !important; } html[data-theme="dark"] .conversation-title { color: var(--dk-text); } html[data-theme="dark"] .chat-thread-placeholder { color: var(--dk-text-muted); } /* --- Formulaires ------------------------------------------------------------ */ html[data-theme="dark"] input[type="text"], html[data-theme="dark"] input[type="password"], html[data-theme="dark"] input[type="email"], html[data-theme="dark"] input[type="number"], html[data-theme="dark"] input[type="search"], html[data-theme="dark"] input[type="url"], html[data-theme="dark"] textarea, html[data-theme="dark"] select, html[data-theme="dark"] .form-select, html[data-theme="dark"] .model-compact-select, html[data-theme="dark"] .hub-search-input, html[data-theme="dark"] .dashboard-search-input { background-color: var(--dk-surface-2) !important; border-color: var(--dk-border) !important; color: var(--dk-text) !important; } html[data-theme="dark"] input::placeholder, html[data-theme="dark"] textarea::placeholder { color: #64748b; } /* Étoile « modèle par défaut personnel » (ambre porteur de sens : garder la teinte) */ html[data-theme="dark"] .model-favorite-btn { background-color: var(--dk-surface-2); border-color: var(--dk-border); color: var(--dk-text-muted); } html[data-theme="dark"] .model-favorite-btn:hover { color: #fbbf24; } html[data-theme="dark"] .model-favorite-btn.is-active { color: #fbbf24; border-color: rgba(251, 191, 36, 0.4); background-color: rgba(251, 191, 36, 0.08); } /* --- Tableaux et listes ------------------------------------------------------ */ html[data-theme="dark"] table thead tr { color: var(--dk-text-muted); } html[data-theme="dark"] .border-b { border-color: var(--dk-border) !important; } html[data-theme="dark"] .dashboard-table-content, html[data-theme="dark"] .file-row-main { border-color: var(--dk-border); } html[data-theme="dark"] .hover\:bg-slate-50:hover, html[data-theme="dark"] .hover\:bg-slate-100:hover { background-color: var(--dk-surface-2) !important; } /* --- Menus / dropdowns / modales --------------------------------------------- */ html[data-theme="dark"] .action-dropdown, html[data-theme="dark"] .dashboard-tooltip, html[data-theme="dark"] .memory-notification-content { background: var(--dk-surface) !important; border-color: var(--dk-border) !important; color: var(--dk-text) !important; } /* Le `color` posé ci-dessus sur le PANNEAU ne suffit pas : chaque entrée du menu est un