/* ============================================================================ 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; } /* 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); } html[data-theme="dark"] .chat-composer { background: var(--dk-surface) !important; border-color: var(--dk-border) !important; } html[data-theme="dark"] .composer-textarea, 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; } /* --- 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; } html[data-theme="dark"] .modal-content, html[data-theme="dark"] .modal-box, html[data-theme="dark"] [id$="-modal"] > div { background-color: var(--dk-surface); color: var(--dk-text); } /* --- Blocs de code : déjà sombres (highlight.js github-dark), rien à faire --- */ html[data-theme="dark"] .message-content pre { border: 1px solid var(--dk-border); } /* --- Boutons secondaires et navigation admin --------------------------------- */ html[data-theme="dark"] .btn-secondary { background: var(--dk-surface-2) !important; border-color: var(--dk-border) !important; color: var(--dk-text) !important; } html[data-theme="dark"] .btn-secondary:hover { background: #2f3f57 !important; } html[data-theme="dark"] .admin-tile-icon, html[data-theme="dark"] .admin-back-btn { background: rgba(99, 102, 241, 0.15) !important; color: var(--dk-accent) !important; border-color: var(--dk-border) !important; } /* --- Tableaux : en-têtes clairs par défaut ------------------------------------ */ html[data-theme="dark"] thead th { background-color: var(--dk-surface-2) !important; color: var(--dk-text-muted) !important; border-color: var(--dk-border) !important; } /* --- Page « Gestion des GPTs » (classes dédiées + dégradé plein écran) -------- */ html[data-theme="dark"] .bg-gradient-to-br.from-slate-50, html[data-theme="dark"] .bg-gradient-to-br.from-white, html[data-theme="dark"] .bg-gradient-to-b.from-slate-50, html[data-theme="dark"] .bg-gradient-to-r.from-slate-50 { background-image: none !important; background-color: var(--dk-bg) !important; } html[data-theme="dark"] .quota-card, html[data-theme="dark"] .gpt-card, html[data-theme="dark"] .gpt-card-body { background: var(--dk-surface) !important; border-color: var(--dk-border) !important; color: var(--dk-text); } html[data-theme="dark"] .gpt-card-header, html[data-theme="dark"] .gpt-card-footer { background: var(--dk-surface-2) !important; border-color: var(--dk-border) !important; } /* --- Utilitaires pastel Tailwind (bandeaux d'info, badges, sélecteurs) -------- Fond -50/-100 → teinte translucide sombre ; texte -600/-900 → nuance claire. Les deux vont ensemble pour préserver le contraste. */ html[data-theme="dark"] .bg-slate-200, html[data-theme="dark"] .bg-slate-300, html[data-theme="dark"] .bg-gray-200 { background-color: var(--dk-border) !important; } html[data-theme="dark"] .bg-blue-50, html[data-theme="dark"] .bg-blue-100 { background-color: rgba(59, 130, 246, 0.14) !important; } html[data-theme="dark"] .text-blue-600, html[data-theme="dark"] .text-blue-700, html[data-theme="dark"] .text-blue-800, html[data-theme="dark"] .text-blue-900 { color: #93c5fd !important; } html[data-theme="dark"] .border-blue-100, html[data-theme="dark"] .border-blue-200, html[data-theme="dark"] .border-blue-300 { border-color: rgba(59, 130, 246, 0.35) !important; } html[data-theme="dark"] .bg-indigo-50, html[data-theme="dark"] .bg-indigo-100 { background-color: rgba(99, 102, 241, 0.16) !important; } html[data-theme="dark"] .text-indigo-600, html[data-theme="dark"] .text-indigo-700, html[data-theme="dark"] .text-indigo-800, html[data-theme="dark"] .text-indigo-900 { color: #a5b4fc !important; } html[data-theme="dark"] .border-indigo-100, html[data-theme="dark"] .border-indigo-200, html[data-theme="dark"] .border-indigo-300 { border-color: rgba(99, 102, 241, 0.35) !important; } html[data-theme="dark"] .bg-purple-50, html[data-theme="dark"] .bg-purple-100 { background-color: rgba(168, 85, 247, 0.14) !important; } html[data-theme="dark"] .text-purple-600, html[data-theme="dark"] .text-purple-700, html[data-theme="dark"] .text-purple-800, html[data-theme="dark"] .text-purple-900 { color: #d8b4fe !important; } html[data-theme="dark"] .border-purple-100, html[data-theme="dark"] .border-purple-200, html[data-theme="dark"] .border-purple-300 { border-color: rgba(168, 85, 247, 0.35) !important; } html[data-theme="dark"] .bg-violet-50, html[data-theme="dark"] .bg-violet-100 { background-color: rgba(139, 92, 246, 0.14) !important; } html[data-theme="dark"] .text-violet-600, html[data-theme="dark"] .text-violet-700, html[data-theme="dark"] .text-violet-800 { color: #c4b5fd !important; } html[data-theme="dark"] .bg-amber-50, html[data-theme="dark"] .bg-amber-100, html[data-theme="dark"] .bg-yellow-50, html[data-theme="dark"] .bg-yellow-100 { background-color: rgba(245, 158, 11, 0.14) !important; } html[data-theme="dark"] .text-amber-600, html[data-theme="dark"] .text-amber-700, html[data-theme="dark"] .text-amber-800, html[data-theme="dark"] .text-amber-900, html[data-theme="dark"] .text-yellow-600, html[data-theme="dark"] .text-yellow-700, html[data-theme="dark"] .text-yellow-800 { color: #fcd34d !important; } html[data-theme="dark"] .border-amber-200, html[data-theme="dark"] .border-amber-300, html[data-theme="dark"] .border-yellow-200 { border-color: rgba(245, 158, 11, 0.35) !important; } html[data-theme="dark"] .bg-green-50, html[data-theme="dark"] .bg-green-100, html[data-theme="dark"] .bg-emerald-50, html[data-theme="dark"] .bg-emerald-100 { background-color: rgba(34, 197, 94, 0.14) !important; } html[data-theme="dark"] .text-green-600, html[data-theme="dark"] .text-green-700, html[data-theme="dark"] .text-green-800, html[data-theme="dark"] .text-green-900, html[data-theme="dark"] .text-emerald-600, html[data-theme="dark"] .text-emerald-700, html[data-theme="dark"] .text-emerald-800 { color: #86efac !important; } html[data-theme="dark"] .border-green-200, html[data-theme="dark"] .border-green-300, html[data-theme="dark"] .border-green-400, html[data-theme="dark"] .border-emerald-200 { border-color: rgba(34, 197, 94, 0.35) !important; } html[data-theme="dark"] .bg-red-50, html[data-theme="dark"] .bg-red-100, html[data-theme="dark"] .bg-rose-50, html[data-theme="dark"] .bg-rose-100 { background-color: rgba(239, 68, 68, 0.14) !important; } html[data-theme="dark"] .text-red-600, html[data-theme="dark"] .text-red-700, html[data-theme="dark"] .text-red-800, html[data-theme="dark"] .text-red-900 { color: #fca5a5 !important; } html[data-theme="dark"] .border-red-200, html[data-theme="dark"] .border-red-300, html[data-theme="dark"] .border-red-400, html[data-theme="dark"] .border-red-500 { border-color: rgba(239, 68, 68, 0.45) !important; } html[data-theme="dark"] .bg-pink-50, html[data-theme="dark"] .bg-pink-100 { background-color: rgba(236, 72, 153, 0.14) !important; } html[data-theme="dark"] .text-pink-600, html[data-theme="dark"] .text-pink-700, html[data-theme="dark"] .text-pink-800 { color: #f9a8d4 !important; } html[data-theme="dark"] .bg-cyan-50, html[data-theme="dark"] .bg-cyan-100 { background-color: rgba(6, 182, 212, 0.14) !important; } html[data-theme="dark"] .text-cyan-600, html[data-theme="dark"] .text-cyan-700, html[data-theme="dark"] .text-cyan-800 { color: #67e8f9 !important; } html[data-theme="dark"] .bg-orange-50, html[data-theme="dark"] .bg-orange-100 { background-color: rgba(249, 115, 22, 0.14) !important; } html[data-theme="dark"] .text-orange-600, html[data-theme="dark"] .text-orange-700, html[data-theme="dark"] .text-orange-800 { color: #fdba74 !important; } /* --- Variantes Tailwind à état (peer-checked, hover) -------------------------- Utilisées par les cartes de sélection de provider (transcription/embeddings). */ html[data-theme="dark"] .peer:checked ~ .peer-checked\:bg-blue-50 { background-color: rgba(59, 130, 246, 0.18) !important; } html[data-theme="dark"] .peer:checked ~ .peer-checked\:bg-purple-50 { background-color: rgba(168, 85, 247, 0.18) !important; } html[data-theme="dark"] .peer:checked ~ .peer-checked\:bg-orange-50 { background-color: rgba(249, 115, 22, 0.18) !important; } html[data-theme="dark"] .peer:checked ~ .peer-checked\:bg-emerald-50 { background-color: rgba(16, 185, 129, 0.18) !important; } html[data-theme="dark"] .peer:checked ~ .peer-checked\:bg-green-50 { background-color: rgba(34, 197, 94, 0.18) !important; } html[data-theme="dark"] .peer:checked ~ .peer-checked\:bg-indigo-50 { background-color: rgba(99, 102, 241, 0.18) !important; } html[data-theme="dark"] .hover\:bg-gray-50:hover, html[data-theme="dark"] .hover\:bg-gray-100:hover, html[data-theme="dark"] .hover\:bg-white:hover { background-color: var(--dk-surface-2) !important; } /* --- Scrollbars ---------------------------------------------------------------- */ html[data-theme="dark"] ::-webkit-scrollbar { width: 10px; height: 10px; } html[data-theme="dark"] ::-webkit-scrollbar-track { background: var(--dk-bg); } html[data-theme="dark"] ::-webkit-scrollbar-thumb { background: var(--dk-border); border-radius: 5px; } html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #475569; } /* --- Images dédiées au thème sombre ------------------------------------------- Le thème étant déterminé côté client (data-theme sur ), on ne peut pas choisir l'image au rendu PHP. On remplace donc chaque par sa variante « _sombre » via content:url(), ciblé par le src déjà présent. Fonctionne aussi pour les images injectées dynamiquement (ex. icônes de conversation créées en JS) puisque le sélecteur est basé sur l'attribut src. Chemin relatif depuis assets/css/ vers images/ = ../../images/. */ html[data-theme="dark"] img[src$="images/icon-conversation.png"] { content: url('../../images/icon-conversation_sombre.png'); } html[data-theme="dark"] img[src$="images/icon-editor.png"] { content: url('../../images/icon-editor_sombre.png'); } html[data-theme="dark"] img[src$="images/icon-recorder-vocal.png"] { content: url('../../images/icon-recorder-vocal_sombre.png'); } html[data-theme="dark"] img[src$="images/icon-analysis-notes.png"] { content: url('../../images/icon-analysis-notes_sombre.png'); } html[data-theme="dark"] img[src$="images/icon-upload-audio.png"] { content: url('../../images/icon-upload-audio_sombre.png'); } /* Variantes fournies mais non encore référencées dans le code : règles dormantes (sans effet tant que l'image de base n'est pas affichée quelque part). */ html[data-theme="dark"] img[src$="images/icon-folder.png"] { content: url('../../images/icon-folder_sombre.png'); } html[data-theme="dark"] img[src$="images/illustration-conversations.png"] { content: url('../../images/illustration-conversations_sombre.png'); } html[data-theme="dark"] img[src$="images/illustration-transcripts.png"] { content: url('../../images/illustration-transcripts_sombre.png'); } /* --- Modales : zones claires résiduelles -------------------------------------- Certaines modales gardent un fond clair via un dégradé Tailwind « from-*-50 » ou un fond propre non couvert par les règles utilitaires plus haut. */ /* En-tête de la modale Dictée vocale (dégradé clair #eef2ff → #f5f3ff) */ html[data-theme="dark"] .hub-modal-header { background: var(--dk-surface-2) !important; border-bottom-color: var(--dk-border) !important; } /* Boutons d'action de la dictée (poubelle, copier, envoyer) — fond #f8fafc. On épargne le bouton violet « enregistrer » qui a son propre dégradé. */ html[data-theme="dark"] .dashboard-action-btn:not(.dashboard-action-btn-violet) { background: var(--dk-surface-2) !important; border-color: var(--dk-border) !important; color: var(--dk-text-muted) !important; } html[data-theme="dark"] .dashboard-action-btn:not(.dashboard-action-btn-violet):hover { background: #2f3f57 !important; color: var(--dk-text) !important; } /* Cartes d'options de la modale « Sauvegarder la dictée » */ html[data-theme="dark"] .save-option-btn { background-color: var(--dk-surface-2) !important; border-color: var(--dk-border) !important; } html[data-theme="dark"] .save-option-btn:hover { background-color: #2f3f57 !important; } /* Dégradés Tailwind clairs (from-*-50 → to-*-50) sur les cartes de modales : carte « Manuel » de Formation, carte d'intro du Guide des GPTs, etc. Les utilitaires bg/text/border pastel sont déjà gérés plus haut ; ici on neutralise spécifiquement le dégradé (background-image) que ces règles ne touchent pas. */ html[data-theme="dark"] .bg-gradient-to-r.from-blue-50, html[data-theme="dark"] .bg-gradient-to-br.from-blue-50, html[data-theme="dark"] .bg-gradient-to-r.from-indigo-50, html[data-theme="dark"] .bg-gradient-to-br.from-indigo-50, html[data-theme="dark"] .bg-gradient-to-r.from-violet-50, html[data-theme="dark"] .bg-gradient-to-br.from-violet-50, html[data-theme="dark"] .bg-gradient-to-r.from-purple-50, html[data-theme="dark"] .bg-gradient-to-br.from-purple-50 { background-image: none !important; background-color: var(--dk-surface-2) !important; } /* Import Google Drive : badge de tuile en mode sombre */ html[data-theme="dark"] .hub-tile-drive-btn { background: var(--dk-surface-2) !important; border-color: var(--dk-border) !important; } /* --- Projets (onglet du hub + badge + menu déplacement) -------------------- */ html[data-theme="dark"] .project-badge { background: rgba(217, 119, 6, 0.15); color: #fbbf24; border-color: rgba(217, 119, 6, 0.4); } html[data-theme="dark"] .hub-project { background: var(--dk-surface); border-color: var(--dk-border); } html[data-theme="dark"] .hub-project.is-open { border-color: #4f46e5; } html[data-theme="dark"] .hub-project-header { color: var(--dk-text); } html[data-theme="dark"] .hub-project-header:hover { background: var(--dk-surface-2); } html[data-theme="dark"] .proj-header-action { color: var(--dk-text-muted); } html[data-theme="dark"] .proj-header-action:hover { background: var(--dk-surface); color: var(--dk-text); } html[data-theme="dark"] .proj-header-action.proj-delete-btn:hover { background: rgba(220, 38, 38, 0.15); color: #f87171; } html[data-theme="dark"] .hub-project-body { border-top-color: var(--dk-border); } html[data-theme="dark"] .hub-project-count { background: rgba(99, 102, 241, 0.18); color: var(--dk-accent); } html[data-theme="dark"] .hub-project-settings { border-top-color: var(--dk-border); } html[data-theme="dark"] .hub-project-label { color: var(--dk-text-muted); } html[data-theme="dark"] .proj-instructions { background: var(--dk-surface-2); border-color: var(--dk-border); color: var(--dk-text); } html[data-theme="dark"] .proj-instructions:focus { background: var(--dk-surface); border-color: var(--dk-accent); } html[data-theme="dark"] .hub-project-actions .proj-rename-btn { color: var(--dk-text-muted); } html[data-theme="dark"] .hub-project-actions .proj-rename-btn:hover { background: var(--dk-surface-2); color: var(--dk-text); } html[data-theme="dark"] .hub-project-actions .proj-delete-btn:hover { background: rgba(220, 38, 38, 0.15); } html[data-theme="dark"] .hub-project-team-toggle { color: var(--dk-text-muted); } html[data-theme="dark"] .conv-move-menu { background: var(--dk-surface); border-color: var(--dk-border); box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.6); } html[data-theme="dark"] .conv-move-menu-item { color: var(--dk-text); } html[data-theme="dark"] .conv-move-menu-item:hover { background: var(--dk-surface-2); color: var(--dk-accent); } /* --- Fichiers de projet (lot 2) --- */ html[data-theme="dark"] .hub-project-files { border-top-color: var(--dk-border); } html[data-theme="dark"] .proj-kb-mode-full { background: rgba(22, 163, 74, 0.18); color: #4ade80; border-color: rgba(22, 163, 74, 0.4); } html[data-theme="dark"] .proj-kb-mode-rag { background: rgba(2, 132, 199, 0.18); color: #7dd3fc; border-color: rgba(2, 132, 199, 0.4); } html[data-theme="dark"] .proj-file-row { color: var(--dk-text); } html[data-theme="dark"] .proj-file-row:hover { background: var(--dk-surface-2); } html[data-theme="dark"] .proj-file-status { background: rgba(217, 119, 6, 0.15); color: #fbbf24; } html[data-theme="dark"] .proj-file-delete:hover { background: rgba(220, 38, 38, 0.15); } html[data-theme="dark"] .proj-upload-status { color: var(--dk-accent); } /* --- Mémoire du projet (lot 4) --- */ html[data-theme="dark"] .hub-project-memory { border-top-color: var(--dk-border); } html[data-theme="dark"] .proj-mem-shared { background: rgba(217, 119, 6, 0.15); color: #fbbf24; border-color: rgba(217, 119, 6, 0.4); } html[data-theme="dark"] .proj-mem-off { background: var(--dk-surface-2); color: var(--dk-text-muted); border-color: var(--dk-border); } html[data-theme="dark"] .proj-memory-row { background: var(--dk-surface-2); border-color: var(--dk-border); } html[data-theme="dark"] .proj-memory-title { color: var(--dk-text); } html[data-theme="dark"] .proj-memory-summary { color: var(--dk-text-muted); } html[data-theme="dark"] .proj-memory-delete:hover, html[data-theme="dark"] .proj-memory-clear:hover { background: rgba(220, 38, 38, 0.15); } html[data-theme="dark"] .proj-instructions-readonly { background: var(--dk-surface-2); border-color: var(--dk-border); color: var(--dk-text-muted); } html[data-theme="dark"] a.proj-file-name { color: var(--dk-text); } html[data-theme="dark"] a.proj-file-name:hover { color: var(--dk-accent); } /* === Mode Canvas (toolbar de sélection, édition inline, versions) === */ html[data-theme="dark"] .canvas-toolbar { background: var(--dk-surface); border-color: var(--dk-border); box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.85); } html[data-theme="dark"] .canvas-toolbar button { background: var(--dk-surface-2); border-color: var(--dk-border); color: var(--dk-text); } html[data-theme="dark"] .canvas-toolbar button:hover { background: rgba(99, 102, 241, 0.28); border-color: #6366f1; } html[data-theme="dark"] .canvas-custom-input { background: var(--dk-surface-2); border-color: var(--dk-border); color: var(--dk-text); } html[data-theme="dark"] .canvas-target { background: rgba(99, 102, 241, 0.2); } html[data-theme="dark"] .canvas-fresh { animation-name: canvasFreshDark; } @keyframes canvasFreshDark { 0% { background-color: rgba(99, 102, 241, 0.35); } 100% { background-color: transparent; } } html[data-theme="dark"] .msg-version-nav button { background: var(--dk-surface-2); border-color: var(--dk-border); color: var(--dk-text-muted); } html[data-theme="dark"] .msg-version-nav button:hover:not(:disabled) { background: rgba(99, 102, 241, 0.28); } /* === Mode Canvas par défaut : barre document sous chaque réponse === */ html[data-theme="dark"] .msg-doc-toolbar { border-top-color: var(--dk-border); } html[data-theme="dark"] .msg-doc-toolbar button { background: var(--dk-surface-2); border-color: var(--dk-border); color: var(--dk-text-muted); } html[data-theme="dark"] .msg-doc-toolbar button:hover { background: rgba(99, 102, 241, 0.28); border-color: #6366f1; color: #c7d2fe; } html[data-theme="dark"] .msg-doc-title { color: var(--dk-text-muted); } html[data-theme="dark"] .msg-doc-title:hover { border-color: var(--dk-border); } html[data-theme="dark"] .msg-doc-title:focus { background: var(--dk-surface-2); border-color: #6366f1; } html[data-theme="dark"] .msg-diff-on .mdt-diff { background: #6366f1; border-color: #6366f1; color: #ffffff; } html[data-theme="dark"] .chat-message--doc-ack .chat-bubble { background: rgba(99, 102, 241, 0.15); border-color: #4338ca; } html[data-theme="dark"] .chat-message--doc-ack .message-content { color: #c7d2fe; } html[data-theme="dark"] .canvas-edit-rte button { background: var(--dk-surface-2); border-color: var(--dk-border); color: var(--dk-text); } html[data-theme="dark"] .canvas-edit-rte button:hover { background: rgba(99, 102, 241, 0.28); border-color: #6366f1; } html[data-theme="dark"] .canvas-rte-sep { background: var(--dk-border); } html[data-theme="dark"] .canvas-diff-ins { background: rgba(34, 197, 94, 0.2); } html[data-theme="dark"] .canvas-diff-del { background: rgba(239, 68, 68, 0.18); } /* ============================================================================ Fonds clairs résiduels du thème clair (correctif 16 juil 2026) ---------------------------------------------------------------------------- Ces règles n'avaient jamais reçu d'équivalent sombre : leur fond restait clair sous data-theme="dark", ce qui rendait le texte illisible (texte --dk-text sur fond blanc) ou laissait des taches claires dans l'interface sombre. Motif de référence = celui des raccourcis du chatbot (.hub-suggestion) : surface au repos -> --dk-surface survol -> --dk-surface-2 texte -> --dk-text bordure -> --dk-border Les éléments porteurs d'une couleur de sens (catégories GPT, danger, alerte) ne suivent pas ce motif : ils gardent leur teinte en version translucide. ========================================================================== */ /* --- 1. Surfaces et boutons neutres --------------------------------------- */ html[data-theme="dark"] .gradient-blue, html[data-theme="dark"] .gradient-purple, html[data-theme="dark"] .gradient-pink, html[data-theme="dark"] .chat-controls, html[data-theme="dark"] .conversation-actions button, html[data-theme="dark"] .conversation-actions form button, html[data-theme="dark"] .memory-notification-actions .btn-secondary, html[data-theme="dark"] .btn-file-input, html[data-theme="dark"] .btn-secondary:disabled, html[data-theme="dark"] .btn-secondary[disabled], html[data-theme="dark"] .admin-table th, html[data-theme="dark"] .dashboard-table-content .file-row, html[data-theme="dark"] .dashboard-table-content .conversation-row, html[data-theme="dark"] #edit-message-modal .modal-card, html[data-theme="dark"] .rte-toolbar, html[data-theme="dark"] .rte-toolbar button { background: var(--dk-surface) !important; border-color: var(--dk-border) !important; color: var(--dk-text) !important; } /* --- 2. Survols / états actifs neutres ------------------------------------ */ html[data-theme="dark"] .sidebar-icon-button:hover, html[data-theme="dark"] .conversation-actions button:hover, html[data-theme="dark"] .conversation-actions form button:hover, html[data-theme="dark"] .memory-notification-actions .btn-secondary:hover, html[data-theme="dark"] .btn-file-input:hover, html[data-theme="dark"] .composer-icon-button:hover, html[data-theme="dark"] .composer-chip:hover, html[data-theme="dark"] .controls-pill:hover, html[data-theme="dark"] .dashboard-action-btn:hover, html[data-theme="dark"] .action-dropdown-item:hover, html[data-theme="dark"] .admin-table tr:hover, html[data-theme="dark"] .admin-back-btn:hover, html[data-theme="dark"] .hub-mini-newchat:hover, html[data-theme="dark"] .hub-tab:hover, html[data-theme="dark"] .hub-panel-iconbtn:hover, html[data-theme="dark"] .hub-modal-close:hover, html[data-theme="dark"] .rte-toolbar button:hover, html[data-theme="dark"] .hub-list .file-row:hover, html[data-theme="dark"] .hub-list .conversation-row:hover { background: var(--dk-surface-2) !important; color: var(--dk-text) !important; } /* Sélection : surface secondaire + accent, comme .hub-tab.is-active */ html[data-theme="dark"] .hub-list .conversation-row.is-active, html[data-theme="dark"] .hub-gpt-item.is-active { background: var(--dk-surface-2) !important; border-color: var(--dk-accent) !important; } /* Champs au focus : le thème clair les repasse en blanc */ html[data-theme="dark"] .hub-search-input:focus, html[data-theme="dark"] .dashboard-textarea:focus { background: var(--dk-surface-2) !important; color: var(--dk-text) !important; } /* Contenu Markdown des réponses */ html[data-theme="dark"] .message-content code, html[data-theme="dark"] .message-content th, html[data-theme="dark"] .message-content blockquote { background: var(--dk-surface-2) !important; color: var(--dk-text) !important; } /* Pistes de progression (rails neutres, pas de texte) */ html[data-theme="dark"] .dashboard-progress, html[data-theme="dark"] .transcription-overlay-track { background: var(--dk-surface-2) !important; } /* --- 3. Éléments colorés : teinte conservée, en translucide --------------- */ /* Catégories de GPT. -global et -admins ne déclarent aucune couleur de texte en thème clair : ils héritaient de --dk-text (clair) sur fond clair -> invisibles. On fixe donc la couleur explicitement ici. */ html[data-theme="dark"] .gpt-cat-perso { background: rgba(99, 102, 241, 0.22) !important; color: #a5b4fc !important; } html[data-theme="dark"] .gpt-cat-team { background: rgba(6, 182, 212, 0.22) !important; color: #67e8f9 !important; } html[data-theme="dark"] .gpt-cat-multi { background: rgba(217, 119, 6, 0.22) !important; color: #fcd34d !important; } html[data-theme="dark"] .gpt-cat-global { background: rgba(59, 130, 246, 0.22) !important; color: #93c5fd !important; } html[data-theme="dark"] .gpt-cat-admins { background: var(--dk-surface-2) !important; color: var(--dk-text) !important; } /* Danger (suppression) */ html[data-theme="dark"] .hub-bulk-btn, html[data-theme="dark"] .attachment-chip .remove-attachment-btn { background: rgba(220, 38, 38, 0.18) !important; color: #f87171 !important; } html[data-theme="dark"] .hub-bulk-btn:hover, html[data-theme="dark"] .attachment-chip .remove-attachment-btn:hover { background: rgba(220, 38, 38, 0.3) !important; } html[data-theme="dark"] .header-icon-button--logout { background: rgba(220, 38, 38, 0.15) !important; color: #f87171 !important; } html[data-theme="dark"] #rag-toggle-btn.rag-disabled { background: rgba(220, 38, 38, 0.15) !important; color: #f87171 !important; } /* Alerte / information */ html[data-theme="dark"] .resume-banner, html[data-theme="dark"] .transcription-overlay-warning { background: rgba(217, 119, 6, 0.18) !important; border-color: rgba(217, 119, 6, 0.4) !important; color: #fcd34d !important; } html[data-theme="dark"] .attachment-chip--summary { background: rgba(59, 130, 246, 0.22) !important; color: #93c5fd !important; } /* Mode éphémère (vert) */ html[data-theme="dark"] .composer-chip.ephemeral-active, html[data-theme="dark"] #ephemeral-mode-btn.ephemeral-active { background: rgba(16, 185, 129, 0.2) !important; color: #6ee7b7 !important; } html[data-theme="dark"] #ephemeral-mode-btn .ephemeral-indicator { background: #6ee7b7 !important; }