/* ========================================================================= ESDI MANAGER — 06-dark.css Dark mode V1 — duplex tokens via [data-theme="dark"] sur Spec : UX spec ligne 611-616 ("Dark mode V1 livré, tokens duplex") Conventions : - PRIMARY (Bleu ESDI) éclairci pour contraste sur dark - ACCENT (Cyan ESDI) conservé tel quel (brille naturellement sur dark) - GRADIENT inchangé (signature inviolable per UX spec ligne 616) - --bg-card OPAQUE (#26272D) pour lisibilité garantie (cards non bleed-through) - --ink-faded ratio AA 4.5:1 préservé sur dark bg ========================================================================= */ [data-theme="dark"] { /* ==================================================================== Backgrounds dark ==================================================================== */ --bg: #1A1A1B; --bg-card: #26272D; /* Opaque — pas rgba (lisibilité, pas de bleed-through) */ --bg-section-warm: #2A2520; --bg-section-cool: #1F232C; --bg-section-fresh: #1E2620; --bg-section-soft: #2A2018; /* Topbar dark — opaque sur dark bg + alpha pour frosted glass */ --bg-topbar: rgba(26, 26, 27, 0.85); /* ==================================================================== Ink (texte) dark — contrastes ajustés pour AAA sur dark --ink-faded ajusté à #b8b9c2 pour respecter ≥4.5:1 sur #1A1A1B (AA) ==================================================================== */ --ink: #FFFFFF; --ink-soft: #C8CAD3; /* Boost vs #A1A1AA pour AAA sur dark */ --ink-faded: #b8b9c2; /* Boost pour AA 4.5:1 sur bg #1A1A1B (form-text, placeholder) */ /* ==================================================================== PRIMARY (Bleu ESDI) éclairci pour contraste sur dark ACCENT (Cyan ESDI) conservé tel quel (brille sur dark) ==================================================================== */ --primary-50: #1a2a40; --primary-100: #1f3a5e; --primary-200: #2a4d7f; --primary-300: #3a6699; --primary-400: #4d7fb8; --primary-500: #5a90d1; /* Bleu ESDI éclairci pour contraste sur dark */ --primary-600: #4d8bd1; --primary-700: #6ea3da; --primary-800: #95bce5; --primary-900: #c0d6ee; --primary: var(--primary-500); /* Accent (Cyan) inchangé — brille sur dark sans modif */ /* ==================================================================== Signalétique ajustée luminosité pour dark (UX spec ligne 615) ==================================================================== */ --sig-ok: #4ade80; --sig-ok-bg: rgba(74, 222, 128, 0.15); --sig-ok-text: #86efac; --sig-warn: #fb923c; --sig-warn-bg: rgba(251, 146, 60, 0.15); --sig-warn-text: #fdba74; --sig-alert: #f87171; --sig-alert-bg: rgba(248, 113, 113, 0.15); --sig-alert-text: #fca5a5; --sig-ai: #67e8f9; --sig-ai-bg: rgba(103, 232, 249, 0.15); --sig-ai-text: #a5f3fc; /* ==================================================================== Lines & shadows dark ==================================================================== */ --line: rgba(255, 255, 255, 0.1); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-lg: 0 10px 24px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.3); --shadow-focus: 0 0 0 3px rgba(63, 190, 204, 0.3); /* Cyan 30% (boost dark visibility) */ --shadow-focus-alert: 0 0 0 3px rgba(248, 113, 113, 0.3); /* Sig alert dark 30% */ } /* --------------------------------------------------------------------------- Color-scheme — préviens le browser pour scrollbars natives + form inputs --------------------------------------------------------------------------- */ [data-theme="dark"] { color-scheme: dark; } [data-theme="light"] { color-scheme: light; } /* =========================================================================== RATTRAPAGE DARK (2026-07-14) — composants historiques à fond / gradient CLAIR codé en dur (non-token) que la surcharge de tokens ne peut pas atteindre. Objectif Kevin : « l'espace fonctionnel doit être bien lisible en sombre ». =========================================================================== */ /* KPI cards — variantes pastel (gradients clairs + valeurs sombres) → teinte dark + valeurs lisibles */ [data-theme="dark"] .esdi-kpi-card--blue { background: linear-gradient(135deg, rgba(71, 120, 191, 0.20), var(--bg-card) 62%); border-color: var(--line); } [data-theme="dark"] .esdi-kpi-card--cyan { background: linear-gradient(135deg, rgba(63, 190, 204, 0.18), var(--bg-card) 62%); border-color: var(--line); } [data-theme="dark"] .esdi-kpi-card--green { background: linear-gradient(135deg, rgba(34, 160, 107, 0.18), var(--bg-card) 62%); border-color: var(--line); } [data-theme="dark"] .esdi-kpi-card--orange { background: linear-gradient(135deg, rgba(217, 119, 6, 0.18), var(--bg-card) 62%); border-color: var(--line); } [data-theme="dark"] .esdi-kpi-card--red { background: linear-gradient(135deg, rgba(220, 38, 38, 0.18), var(--bg-card) 62%); border-color: var(--line); } [data-theme="dark"] .esdi-kpi-card--green .esdi-kpi-card__value { color: #4ade80; } [data-theme="dark"] .esdi-kpi-card--orange .esdi-kpi-card__value { color: #fb923c; } [data-theme="dark"] .esdi-kpi-card--red .esdi-kpi-card__value { color: #f87171; } /* Filet de sécurité — utilitaires Bootstrap à fond clair codé en dur */ [data-theme="dark"] .bg-white { background-color: var(--bg-card) !important; } [data-theme="dark"] .bg-light { background-color: var(--bg-section-cool) !important; color: var(--ink); } [data-theme="dark"] .badge.bg-light { background-color: rgba(255, 255, 255, 0.09) !important; color: var(--ink-soft) !important; } [data-theme="dark"] .text-dark { color: var(--ink) !important; } [data-theme="dark"] .bg-body, [data-theme="dark"] .bg-body-tertiary { background-color: var(--bg-card) !important; } /* Modales / offcanvas à fond blanc codé en dur */ [data-theme="dark"] .modal-content, [data-theme="dark"] .esdi-modal, [data-theme="dark"] .offcanvas { background-color: var(--bg-card); color: var(--ink); border-color: var(--line); } /* Modale custom ESDI (.esdi-modal) : le fond #fff codé en dur + les bordures/footer var(--border|--bg-muted) ne suivaient pas le thème → panneau blanc illisible en dark (Story 21-4, signalé Kevin 2026-07-14). */ [data-theme="dark"] .esdi-modal__footer { background-color: var(--bg-section-cool); border-color: var(--line); } [data-theme="dark"] .esdi-modal__header { border-color: var(--line); } [data-theme="dark"] .esdi-scorecard { background-color: var(--bg-section-cool) !important; border-color: var(--line) !important; } /* Chat — refonte 2026-07-14 (rail compact + tiroir mobile + repli des longs messages). Le panneau porte le fond (var --bg-card, déjà redéfinie en dark) ; ici uniquement ce que le clair code en dur (hover neutres, bannière contexte cyan, boutons, backdrop). */ [data-theme="dark"] .esdi-chat-sidebar__panel { background: var(--bg-card); } [data-theme="dark"] .esdi-chat-interlocutor__item:hover { background: rgba(255, 255, 255, 0.06); } [data-theme="dark"] .esdi-chat-interlocutor__item--active { background: rgba(63, 190, 204, 0.20); } [data-theme="dark"] .esdi-chat-interlocutor__item--active .esdi-chat-sidebar__avatar { box-shadow: 0 0 0 2px var(--bg-card), 0 0 0 4px var(--accent, #3fbecc); } [data-theme="dark"] .esdi-chat-history__act:hover { background: rgba(255, 255, 255, 0.12); } [data-theme="dark"] .esdi-chat-sidebar__closebtn:hover { background: rgba(255, 255, 255, 0.08); color: var(--ink); } [data-theme="dark"] .esdi-chat-sidebar-backdrop { background: rgba(0, 0, 0, 0.6); } /* To-do liste (2026-07-15) — item actif = cyan clair en clair, à assombrir en dark */ [data-theme="dark"] .esdi-chat-todo__item--active { background: rgba(63, 190, 204, 0.13); } [data-theme="dark"] .esdi-chat-todo__count { background: var(--bg-section-cool); color: var(--accent-500); } [data-theme="dark"] .esdi-chat-context-warn { /* fond OPAQUE obligatoire : la bannière est sticky au-dessus du fil (translucide = illisible) */ background: #0f3038; border-color: rgba(63, 190, 204, 0.30); color: #9fd8e2; box-shadow: none; } [data-theme="dark"] .esdi-chat-context-warn__close:hover { background: rgba(159, 216, 226, 0.14); } [data-theme="dark"] .esdi-chat-expand { background: var(--bg-section-cool); } [data-theme="dark"] .esdi-chat-input__slash { color: var(--accent, #3fbecc); } [data-theme="dark"] .esdi-chat-bubble__tool-call { background: rgba(255, 255, 255, 0.05); } [data-theme="dark"] .esdi-chat-bubble__tool-args { background: rgba(0, 0, 0, 0.35); } /* Pages d'auth (refonte 2026-07-14) — halos un peu plus discrets sur fond sombre + champs lisibles */ [data-theme="dark"] .esdi-auth::before { opacity: 0.4; } [data-theme="dark"] .esdi-auth::after { opacity: 0.35; } [data-theme="dark"] .esdi-auth__control > .form-control { background: var(--bg-section-cool); } [data-theme="dark"] .esdi-auth__control > .form-control:focus { background: var(--bg-card); } [data-theme="dark"] .esdi-auth__toggle:hover { background: rgba(255, 255, 255, 0.08); } /* Page « À approuver » (2026-07-18, Kevin) — les cartes de validation + la bannière d'info restaient BLANCHES en thème sombre (background:#fff / rgba clair en dur dans 03-components.css). Override dark explicite. */ [data-theme="dark"] .esdi-validation-card { background: var(--bg-card); border-color: var(--line); } [data-theme="dark"] .esdi-info-banner { background: var(--bg-section-cool); border-color: var(--line); color: var(--ink-soft); } [data-theme="dark"] .alert-light { background-color: var(--bg-section-cool); color: var(--ink); border-color: var(--line); } /* Charte graphique (Story 26-2) — dark. L'APERÇU garde ses couleurs propres : il montre la charte du client, pas le thème de l'interface — le teinter en sombre serait un mensonge sur le rendu. */ [data-theme="dark"] .esdi-cg-couleur label { color: #9fb0c2; } [data-theme="dark"] .esdi-cg-couleur input[type="color"] { border-color: #33465a; background: #1b2732; } [data-theme="dark"] .esdi-cg-apercu { border-color: #33465a; background: repeating-conic-gradient(#1b2732 0% 25%, #22303c 0% 50%) 50% / 16px 16px; } /* Proposition lue sur un site (Story 26-3). Les PASTILLES, elles, gardent la couleur du site — c'est tout leur intérêt : on juge la proposition sur ses vraies couleurs, pas sur une version assombrie. */ [data-theme="dark"] .esdi-cg-site .form-text { color: #9fb0c2; } [data-theme="dark"] .esdi-cg-site .alert-secondary { background-color: #1b2732; color: var(--ink); border-color: #33465a; } [data-theme="dark"] .esdi-cg-puce { border-color: rgba(255,255,255,0.25); } /* Boîtes mail connectées (2026-07-29) — dark */ [data-theme="dark"] .esdi-mb-row { background: #1b2732; border-color: #33465a; } [data-theme="dark"] .esdi-mb-row--off { background: #161f28; border-color: #2c3b49; } [data-theme="dark"] .esdi-mb-check { color: #9fb0c2; } [data-theme="dark"] .esdi-mb-badge { background: #22303c; border-color: #33465a; color: #9fb0c2; } [data-theme="dark"] .esdi-mb-badge--def { background: rgba(63,190,204,0.18); color: #7fd6e0; border-color: rgba(63,190,204,0.38); } [data-theme="dark"] .esdi-mb-badge--off { background: #232c35; color: #8a94a6; } /* Modale de relecture email (Epic 23) — dark */ [data-theme="dark"] .esdi-er-head { background: #1b2732; border-color: #33465a; } [data-theme="dark"] .esdi-er-head__lab { color: #9fb0c2; } [data-theme="dark"] .esdi-er-head > *:nth-child(n+3) { border-top-color: #2c3b49; } [data-theme="dark"] .esdi-er-head > .form-control { color: #dbe4ee; } [data-theme="dark"] .esdi-er-head select.form-control { color: #eaf1f8; } [data-theme="dark"] .esdi-er-head select.form-control option { background: #1b2732; color: #dbe4ee; } [data-theme="dark"] .esdi-er-chip { background: #22303c; border-color: #33465a; color: #dbe4ee; } [data-theme="dark"] .esdi-er-chip__x { color: #9fb0c2; } [data-theme="dark"] .esdi-er-picker { border-color: #33465a; } [data-theme="dark"] .esdi-er-picker__bar { background: #1b2732; border-bottom-color: #2c3b49; } [data-theme="dark"] .esdi-er-pick { border-bottom-color: #23313d; } [data-theme="dark"] .esdi-er-pick:hover { background: #22303c; } [data-theme="dark"] .esdi-er-empty { color: #8a94a6; } [data-theme="dark"] .esdi-er-chip svg, [data-theme="dark"] .esdi-er-pick svg, [data-theme="dark"] .esdi-er-picker__bar svg { color: #9fb0c2; } [data-theme="dark"] .esdi-modal__close { color: #9fb0c2; } [data-theme="dark"] .esdi-modal__close:hover { background: #22303c; color: #e6edf5; } /* Pastille certifiée — le badge doré reste identique (c'est un repère de marque, il ne doit pas changer de couleur d'un thème à l'autre), mais le CHIP qui l'entoure devient illisible en clair sur fond sombre : on l'inverse. L'anneau de détourage suit la carte sombre. */ [data-theme="dark"] .esdi-premium { background: linear-gradient(135deg, #3a2f14, #4a3c18); border-color: #6b5522; color: #f0d79a; } [data-theme="dark"] .esdi-premium--bare { background: none; border: none; } [data-theme="dark"] .esdi-certified--onavatar { box-shadow: 0 0 0 2px var(--bg-card, #1a1a1b); } /* 2026-08-13 — même correctif d'anneau pour la pastille « non lu » : le repli `#fff` du mode clair dessinerait un liseré blanc autour d'un avatar sombre. Piège déjà documenté (« dark : #fff en dur »). */ [data-theme="dark"] .esdi-chat-nonlu { box-shadow: 0 0 0 2px var(--bg-card, #1a1a1b); } /* Rendu Markdown des réponses d'assistant (2026-07-31) — la majorité des styles passe déjà par les tokens duplex. Restent les endroits où le clair est calculé à partir d'une couleur de marque : sur fond sombre le cyan à 12 % disparaît, et le zébrage des tableaux devient invisible. Le BLOC DE CODE, lui, est volontairement identique dans les deux thèmes (fond Encre) : rien à surcharger ici. */ [data-theme="dark"] .esdi-md-code { background: rgba(63, 190, 204, 0.16); border-color: rgba(63, 190, 204, 0.3); color: #d6f4f8; } [data-theme="dark"] .esdi-md-table tbody tr:nth-child(even) { background: rgba(255, 255, 255, 0.035); } [data-theme="dark"] .esdi-md-table tbody tr:hover { background: rgba(63, 190, 204, 0.12); } [data-theme="dark"] .esdi-md-list--ol > li::before { background: rgba(255, 255, 255, 0.06); color: var(--primary-800); } [data-theme="dark"] .esdi-md-callout--important { background: rgba(90, 144, 209, 0.14); } [data-theme="dark"] .esdi-md-link { color: var(--primary-800); } [data-theme="dark"] .esdi-md-link:hover { color: #d3e4f7; } [data-theme="dark"] .esdi-md-arrow { color: var(--accent-400); } /* Story 27-4 — la frise en sombre. Les tokens font l'essentiel ; seules les bordures, calculées en rgba noir, doivent être reprises (invisibles sur fond sombre — piège déjà rencontré avec les `#fff` en dur). */ [data-theme="dark"] .pl-ligne, [data-theme="dark"] .pl-cellule-titre { border-color: rgba(255,255,255,.10); } [data-theme="dark"] .pl-jour, [data-theme="dark"] .pl-case { border-color: rgba(255,255,255,.06); } /* Plannings — refonte 27-15. `--accent-50` est un blanc cassé : posé tel quel en sombre, la colonne « aujourd'hui » devient une bande blanche aveuglante, et l'encre sombre du quantième disparaît dessus. On repasse par une teinte translucide de l'accent, qui marche sur n'importe quel fond. */ [data-theme="dark"] .pl-aujourdhui { background: rgba(63, 190, 204, .13); box-shadow: inset 1px 0 0 rgba(63, 190, 204, .45), inset -1px 0 0 rgba(63, 190, 204, .45); } [data-theme="dark"] .pl-jour.pl-aujourdhui .pl-jour-chiffre { color: var(--accent-300); } [data-theme="dark"] .pl-tuile { border-color: rgba(255,255,255,.12); } [data-theme="dark"] .pl-tuile:hover:not(:disabled) { border-color: var(--accent-400); } [data-theme="dark"] .pl-jauge { background: rgba(255,255,255,.12); } [data-theme="dark"] .pl-titre-bouton:hover:not(:disabled), [data-theme="dark"] .pl-inventaire-ligne:hover { background: rgba(255,255,255,.06); } /* L'infobulle inverse ses couleurs en sombre : sinon c'est de l'encre sombre sur un fond sombre, donc rien du tout. */ [data-theme="dark"] .pl-infobulle { background: #E9EAF2; color: #14151F; } [data-theme="dark"] .pl-assistant-lien { color: var(--accent-300); } [data-theme="dark"] .pl-assistant-lien:hover { color: var(--accent-200); } [data-theme="dark"] .pl-groupe, [data-theme="dark"] .pl-groupe-titre, [data-theme="dark"] .pl-groupe .pl-piste { background: rgba(255,255,255,.045); } [data-theme="dark"] .pl-puce { background: transparent; border-color: rgba(255,255,255,.14); } [data-theme="dark"] .pl-puce:hover { border-color: var(--accent-400); } /* ============================================================================ Épique 28 — pièces jointes du chat en thème sombre. Les surfaces claires en dur (« blanc », rgba noir) deviennent illisibles ici : c'est le piège déjà payé sur les jauges de contexte (2026-07-14). Tout ce qui suit ne fait que ramener les fonds et les bordures dans la palette sombre. ============================================================================ */ [data-theme="dark"] .esdi-chat-input__attach { color: var(--accent, #3fbecc); border-color: rgba(255,255,255,.14); } [data-theme="dark"] .esdi-chat-piece { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.12); } [data-theme="dark"] .esdi-chat-piece__ico, [data-theme="dark"] .esdi-chat-piece__apercu { background: rgba(255,255,255,.09); } [data-theme="dark"] .esdi-chat-piece__retirer:hover { background: rgba(255,255,255,.12); } [data-theme="dark"] .esdi-chat-piece__jauge { background: rgba(255,255,255,.14); } [data-theme="dark"] .esdi-chat-drop { background: rgba(63,190,204,.14); } [data-theme="dark"] .esdi-chat-drop__carte { background: #1b1d2a; color: var(--accent-300, #7fd8e2); } [data-theme="dark"] .esdi-chat-attach__carte { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.12); } [data-theme="dark"] .esdi-chat-attach__vignette { border-color: rgba(255,255,255,.12); } [data-theme="dark"] .esdi-chat-attach__lien:hover { background: rgba(255,255,255,.12); color: var(--accent-300, #7fd8e2); } /* Épique 29-6 — page profil entreprise en thème sombre. */ [data-theme="dark"] .esdi-profil-jauge { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.12); } [data-theme="dark"] .esdi-profil-jauge__chiffre { color: var(--accent-300, #7fd8e2); } [data-theme="dark"] .esdi-profil-jauge__barre { background: rgba(255,255,255,.14); } [data-theme="dark"] .esdi-profil-carte { background: rgba(255,255,255,.03); border-color: rgba(255,255,255,.12); } [data-theme="dark"] .esdi-profil-carte__tete { border-color: rgba(255,255,255,.12); } [data-theme="dark"] .esdi-profil-carte__ico { background: rgba(63,190,204,.18); color: var(--accent-300, #7fd8e2); } [data-theme="dark"] .esdi-profil-discuter { background: rgba(63,190,204,.09); } [data-theme="dark"] .esdi-profil-discuter:hover { background: rgba(63,190,204,.16); } [data-theme="dark"] .esdi-profil-champ__essentiel { background: rgba(63,190,204,.2); color: var(--accent-300, #7fd8e2); } [data-theme="dark"] .esdi-profil-champ__vide { color: #e8c14a; } [data-theme="dark"] .esdi-profil-lu { border-color: rgba(255,255,255,.10); } [data-theme="dark"] .esdi-modale__boite { background: #171923; } [data-theme="dark"] .esdi-modale__tete, [data-theme="dark"] .esdi-modale__pied { border-color: rgba(255,255,255,.12); } [data-theme="dark"] .esdi-modale__fermer:hover { background: rgba(255,255,255,.12); } [data-theme="dark"] .esdi-profil-jauge__alerte { color: #e8c14a; } /* ── Épique 30 — le bandeau « ce tableau a changé » en mode sombre (signalé par Kevin le 2026-08-02) Les boutons du bandeau sont des `btn-outline-dark` / `btn-link text-dark` : sur le fond sombre que le thème donne à `.alert-warning`, ils écrivaient du texte presque noir sur du brun — le bandeau annonçait un changement et les deux seules actions qui permettent d'y répondre étaient INVISIBLES. « Fermer » restait lisible, ce qui rendait l'absence des deux autres encore plus trompeuse : on croyait n'avoir que le choix de fermer. Corrigé sur la couleur du bandeau lui-même (jaune du thème), pas en repeignant tous les boutons du produit. */ [data-theme="dark"] .alert-warning .btn-outline-dark { color: #e8c14a; border-color: rgba(232, 193, 74, .55); } [data-theme="dark"] .alert-warning .btn-outline-dark:hover, [data-theme="dark"] .alert-warning .btn-outline-dark:focus-visible { color: #16181f; background: #e8c14a; border-color: #e8c14a; } [data-theme="dark"] .alert-warning .btn-link.text-dark { color: #e8c14a !important; } [data-theme="dark"] .alert-warning .btn-link.text-dark:hover { color: #f2d67e !important; }