/* * Arc_Prod — Dark Mode (Apple iOS 18) * File: public_html/assets/xhelpers/css/dark-mode.css * * Scope : html[data-theme="dark"] body.arcprod-tenant * Role : Override des variables CSS + règles explicites pour le dark mode. * §A redéfinit toutes les variables tokens → dark mode automatique * pour les modules 100% variables. §B+ couvre les composants * avec couleurs résiduelles hardcodées. * Dark : CE fichier EST le dark mode — autorité absolue (chargé en dernier). * Load : Conditionnel — uniquement si dark-mode.css existe (voir _layout_header.php). * Admin : NON couvert (isolation body.arcprod-tenant). * * Palette iOS 18 Dark Mode: * Page background: #000000 (systemBackground) * Card surface: #1c1c1e (secondarySystemBackground) * Elevated surface: #2c2c2e (tertiarySystemBackground) * Separator/border: rgba(84,84,88,0.65) (separator iOS) * Text primary: #ffffff * Text secondary: rgba(235,235,245,0.60) * Text tertiary: rgba(235,235,245,0.30) * Navbar: rgba(28,28,30,0.92) (glassmorphism) * Danger dark: #ff453a * Warning dark: #ffd60a * Success dark: #32d74b * * Created: 2026-03-15 */ /* ═══════════════════════════════════════════════════════════════════════════ §A — Variables CSS override (scoped body.arcprod-tenant en dark) ═══════════════════════════════════════════════════════════════════════════ */ html[data-theme="dark"] body.arcprod-tenant { /* Surfaces */ --bg-primary: #1c1c1e; --bg-secondary: #000000; --bg-tertiary: #2c2c2e; --bg-muted: var(--bg-tertiary); --bg-subtle: var(--bg-secondary); --bg-elevated: #3a3a3c; /* Surfaces sémantiques (alias utilisés dans les modules) */ --surface-secondary: #2c2c2e; --surface-elevated: #2c2c2e; --surface-hover: #3a3a3c; /* Bordures */ --border-color: rgba(84, 84, 88, 0.65); --border-color-light: rgba(84, 84, 88, 0.36); --border-color-strong: rgba(84, 84, 88, 0.80); --border-subtle: rgba(84, 84, 88, 0.50); /* Texte */ --text-primary: #ffffff; --text-secondary: rgba(235, 235, 245, 0.60); --text-subtle: var(--text-tertiary); /* La marque en TEXTE reprenait ici --primary-color TELLE QUELLE, au motif qu'une couleur vive est lisible sur fond sombre. Vrai d'une marque CLAIRE (#14ae5c donne 5,86:1 sur #1c1c1e), FAUX d'une marque FONCEE : le bleu ULB #0f4c81 du tenant ksup tombait a 1,92:1 — constate en PRODUCTION le 2026-08-01 sur une page publique, apres publication d'un premier contenu. Le probleme est symetrique : --brand-text-on-dark est la marque eclaircie au besoin, calculee par tenant (BrandContrastService::brandTextOnDark). Le repli couvre les contextes sans injection (page d'attente, erreur). */ --brand-text: var(--brand-text-on-dark, var(--primary-color)); /* 0.30 donnait 2,48:1 sur #1c1c1e et 2,27:1 sur le fond de page noir, tres sous le seuil AA (limite deja consignee dans CLAUDE.md, jamais traitee). 0.55 passe sur les trois surfaces sombres : #000 (5,42), #1c1c1e (5,22), #2c2c2e (4,68). Reste plus discret que --text-secondary a 0.60. */ --text-tertiary: rgba(235, 235, 245, 0.55); --text-muted: rgba(235, 235, 245, 0.55); /* Variantes TEXTE des couleurs semantiques : miroir exact du raisonnement sur --brand-text. Les valeurs de tokens.css sont ASSOMBRIES pour un fond clair ; sur un fond sombre il faut au contraire ECLAIRCIR. Sans ces redefinitions, --danger-text (#ba3535) tombait a 2,96:1 sur #1c1c1e — constate le 2026-08-01 sur le marqueur de champ obligatoire des formulaires d'edition. Seuils verifies sur les quatre surfaces sombres reelles (#000, #1c1c1e, #2c2c2e, #3a3a3c) : minimum 4,53:1. --success et --warning n'ont PAS besoin d'etre eclaircies : leurs valeurs d'origine passent deja (4,98 et 5,28). */ --success-text: #22c55e; --warning-text: #f59e0b; --danger-text: #f48484; --info-text: #72a5f9; --accent-indigo-text: #9b9df6; --accent-violet-text: #b293f9; --code-text: #e685b5; /* Statuts de modération : valeurs héritées des règles explicites §Q, centralisées ici sans changement de rendu. */ --report-status-open-bg: rgba(245, 158, 11, 0.15); --report-status-open-text: #fbbf24; --report-status-open-border: rgba(245, 158, 11, 0.30); --report-status-resolved-bg: rgba(34, 197, 94, 0.15); --report-status-resolved-text: #4ade80; --report-status-resolved-border: rgba(34, 197, 94, 0.28); --report-status-rejected-bg: rgba(255, 255, 255, 0.07); --report-status-rejected-text: rgba(235, 235, 245, 0.60); --report-status-rejected-border: rgba(255, 255, 255, 0.12); --forum-thread-locked-bg: rgba(245, 158, 11, 0.15); --forum-thread-locked-border: rgba(245, 158, 11, 0.30); --forum-thread-locked-text: #fbbf24; /* Ombres — plus prononcées sur fond sombre */ --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.50); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.55); --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.65); --shadow-xl: 0 18px 48px rgba(0, 0, 0, 0.70); /* Semantic light variants */ --success-light: rgba(50, 215, 75, 0.16); --warning-light: rgba(255, 214, 10, 0.16); --danger-light: rgba(255, 69, 58, 0.16); /* Alias couleurs semantiques (modules calendrier, etc.) */ --color-success-light: rgba(50, 215, 75, 0.16); --color-success-text: #32d74b; --color-warning-light: rgba(255, 214, 10, 0.16); --color-warning-text: #ffd60a; --color-warning: #ffd60a; --info-light: rgba(10, 132, 255, 0.16); /* Tokens sémantiques */ --token-danger: #ff453a; --token-warning: #ffd60a; --token-success: #32d74b; --token-info: #0a84ff; --token-text-primary: #ffffff; --token-text-secondary: rgba(235, 235, 245, 0.60); --token-border: rgba(84, 84, 88, 0.65); /* Bridge rd-* (redesign variables) */ --rd-bg: #000000; --rd-surface: #1c1c1e; --rd-surface-soft: #2c2c2e; --rd-topbar-bg: rgba(28, 28, 30, 0.92); --rd-sidebar-bg: #1c1c1e; /* XH bridge tokens */ --xh-min-surface: #1c1c1e; --xh-min-surface-soft: #2c2c2e; /* XH UI governance tokens (définis sur body dans 10-design-system-fixes.css) */ --xh-ui-surface: #1c1c1e; --xh-ui-surface-soft: #2c2c2e; --xh-ui-border: rgba(84, 84, 88, 0.65); --xh-ui-border-strong: rgba(84, 84, 88, 0.50); --xh-ui-text: #ffffff; --xh-ui-muted: rgba(235, 235, 245, 0.60); /* Bootstrap v5 variables override — nécessaire pour .table, .form-control, .border */ --bs-body-color: rgba(235, 235, 245, 0.90); --bs-body-bg: #1c1c1e; --bs-secondary-color: rgba(235, 235, 245, 0.60); --bs-tertiary-color: rgba(235, 235, 245, 0.38); --bs-tertiary-bg: #2c2c2e; --bs-secondary-bg: #3a3a3c; --bs-border-color: rgba(84, 84, 88, 0.65); --bs-border-color-translucent: rgba(84, 84, 88, 0.40); /* Bootstrap table */ --bs-table-color: rgba(235, 235, 245, 0.90); --bs-table-bg: transparent; --bs-table-border-color: rgba(84, 84, 88, 0.36); --bs-table-striped-color: rgba(235, 235, 245, 0.90); --bs-table-striped-bg: rgba(255, 255, 255, 0.04); --bs-table-active-color: rgba(235, 235, 245, 0.90); --bs-table-active-bg: rgba(255, 255, 255, 0.08); --bs-table-hover-color: rgba(235, 235, 245, 0.90); --bs-table-hover-bg: rgba(255, 255, 255, 0.06); /* Bootstrap form controls */ --bs-form-control-bg: #3a3a3c; --bs-form-control-color: rgba(235, 235, 245, 0.90); --bs-form-select-bg: #3a3a3c; --bs-input-bg: #3a3a3c; --bs-input-color: rgba(235, 235, 245, 0.90); --bs-input-border-color: rgba(84, 84, 88, 0.65); --bs-input-focus-border-color: rgba(84, 84, 88, 0.90); --bs-input-placeholder-color: rgba(235, 235, 245, 0.38); /* Bootstrap link */ --bs-link-color: #6b9ff5; --bs-link-hover-color: #8ab4f8; /* Bootstrap card */ --bs-card-bg: #1c1c1e; --bs-card-border-color: rgba(84, 84, 88, 0.65); --bs-card-cap-bg: rgba(255, 255, 255, 0.03); --bs-card-color: rgba(235, 235, 245, 0.90); } /* Footer runtime : layout.css fixe un fond clair. Cette couche est chargee apres lui et conserve les tokens du theme sombre. */ html[data-theme="dark"] body.arcprod-tenant .footer-slim, html[data-theme="dark"] body.arcprod-tenant .footer-modern { background: var(--rd-bg) !important; border-top-color: var(--border-color) !important; } /* ═══════════════════════════════════════════════════════════════════════════ §B — Body / html base ═══════════════════════════════════════════════════════════════════════════ */ html[data-theme="dark"] { background-color: #000000; color-scheme: dark; /* scrollbars natifs + inputs date/time automatiquement dark */ } html[data-theme="dark"] body.arcprod-tenant { background-color: #000000 !important; color: #ffffff !important; } /* ═══════════════════════════════════════════════════════════════════════════ §C — Transitions fluides (activées APRÈS init via arcprod-theme-ready) Zero flash au premier chargement : la classe est ajoutée par JS au DOMContentLoaded. ═══════════════════════════════════════════════════════════════════════════ */ html.arcprod-theme-ready body.arcprod-tenant, html.arcprod-theme-ready body.arcprod-tenant *:not(video):not(canvas):not(img):not(.bi):not(i) { transition: background-color 0.22s ease, color 0.22s ease, border-color 0.22s ease !important; } /* ═══════════════════════════════════════════════════════════════════════════ §D — Navbar / topbar ═══════════════════════════════════════════════════════════════════════════ */ html[data-theme="dark"] body.arcprod-tenant .navbar-modern { background: rgba(28, 28, 30, 0.92) !important; border-bottom-color: rgba(84, 84, 88, 0.40) !important; backdrop-filter: blur(20px) saturate(1.4) !important; -webkit-backdrop-filter: blur(20px) saturate(1.4) !important; } html[data-theme="dark"] body.arcprod-tenant .navbar-modern .brand-primary { color: color-mix(in srgb, var(--primary-color, #60a5fa) 72%, #ffffff 28%) !important; } html[data-theme="dark"] body.arcprod-tenant .navbar-modern .brand-secondary { color: rgba(235, 235, 245, 0.72) !important; } html[data-theme="dark"] body.arcprod-tenant .navbar-modern .menu-toggle:hover, html[data-theme="dark"] body.arcprod-tenant .navbar-modern .menu-toggle:focus-visible, html[data-theme="dark"] body.arcprod-tenant .navbar-modern .menu-toggle.sidebar-closed:hover { background: rgba(255, 255, 255, 0.10) !important; } html[data-theme="dark"] body.arcprod-tenant .navbar-modern .menu-toggle .hamburger span { background: rgba(235, 235, 245, 0.85) !important; } html[data-theme="dark"] body.arcprod-tenant .navbar-modern .user-avatar, html[data-theme="dark"] body.arcprod-tenant .navbar-modern .dropdown-user-avatar { background: var(--primary-color, #384376) !important; /* Couleur de marque arbitraire (admin tenant) : voir --text-on-primary dans _layout_header.php (calcul WCAG serveur, pas de blanc fige). */ color: var(--text-on-primary, #ffffff) !important; } /* Spécificité (1,2,2) — miroir exact de 01-layout-home.css :is(#notifBellBtn, ...) */ html[data-theme="dark"] body.arcprod-tenant .navbar-modern :is(#notifBellBtn, .user-dropdown-toggle):hover, html[data-theme="dark"] body.arcprod-tenant .navbar-modern :is(#notifBellBtn, .user-dropdown-toggle):focus-visible, html[data-theme="dark"] body.arcprod-tenant .navbar-modern .user-dropdown-toggle:focus, html[data-theme="dark"] body.arcprod-tenant .navbar-modern .user-dropdown-toggle[aria-expanded="true"] { background: rgba(255, 255, 255, 0.10) !important; border-color: transparent !important; box-shadow: none !important; } /* Notification bell */ html[data-theme="dark"] body.arcprod-tenant #notifBellBtn { color: rgba(235, 235, 245, 0.85) !important; } html[data-theme="dark"] body.arcprod-tenant #notifBellBtn:hover { background: rgba(255, 255, 255, 0.10) !important; } /* Dropdown notification */ html[data-theme="dark"] body.arcprod-tenant #notifDropdown { background: #1c1c1e !important; border-color: rgba(84, 84, 88, 0.65) !important; box-shadow: 0 18px 48px rgba(0, 0, 0, 0.70) !important; } html[data-theme="dark"] body.arcprod-tenant #notifDropdown .notif-header { border-bottom-color: rgba(84, 84, 88, 0.50) !important; color: #ffffff !important; } html[data-theme="dark"] body.arcprod-tenant #notifDropdown .notif-empty, html[data-theme="dark"] body.arcprod-tenant #notifDropdown .notif-item { color: rgba(235, 235, 245, 0.85) !important; } html[data-theme="dark"] body.arcprod-tenant #notifDropdown .notif-item:hover { background: rgba(255, 255, 255, 0.06) !important; } html[data-theme="dark"] body.arcprod-tenant #notifDropdown .notif-view-all { color: var(--primary-color, #384376) !important; border-top-color: rgba(84, 84, 88, 0.50) !important; } /* Global search — icône loupe */ html[data-theme="dark"] body.arcprod-tenant .global-search-icon { color: rgba(235, 235, 245, 0.55) !important; } /* Global search input — état collapsed */ html[data-theme="dark"] body.arcprod-tenant .global-search-input { color: rgba(235, 235, 245, 0.90) !important; } /* Global search input — état expanded (visible, non focus) */ html[data-theme="dark"] body.arcprod-tenant .global-search-container.search-expanded .global-search-input { background: rgba(255, 255, 255, 0.09) !important; border-color: rgba(84, 84, 88, 0.65) !important; color: rgba(235, 235, 245, 0.90) !important; } /* Global search input — état focus : texte invisible sans cette règle */ html[data-theme="dark"] body.arcprod-tenant .global-search-container.search-expanded .global-search-input:focus { background: #2c2c2e !important; border-color: var(--ulb-blue, #384376) !important; color: rgba(235, 235, 245, 0.90) !important; box-shadow: 0 0 0 3px rgba(56, 67, 118, 0.25) !important; } /* Icône loupe colorée au focus */ html[data-theme="dark"] body.arcprod-tenant .global-search-container.search-expanded .global-search-input-wrapper:focus-within .global-search-icon { color: var(--ulb-blue, #384376) !important; } html[data-theme="dark"] body.arcprod-tenant .global-search-input::placeholder { color: rgba(235, 235, 245, 0.55) !important; } /* Bouton clear (croix) en dark mode */ html[data-theme="dark"] body.arcprod-tenant .global-search-input::-webkit-search-cancel-button { filter: invert(0.8) opacity(0.6) !important; } html[data-theme="dark"] body.arcprod-tenant .global-search-dropdown { background: #1c1c1e !important; border-color: rgba(84, 84, 88, 0.65) !important; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.65) !important; } html[data-theme="dark"] body.arcprod-tenant .global-search-group { border-bottom-color: rgba(84, 84, 88, 0.40) !important; } html[data-theme="dark"] body.arcprod-tenant .global-search-group-label { color: rgba(235, 235, 245, 0.60) !important; } html[data-theme="dark"] body.arcprod-tenant .global-search-item { color: rgba(235, 235, 245, 0.88) !important; } html[data-theme="dark"] body.arcprod-tenant .global-search-item:hover { background: rgba(255, 255, 255, 0.08) !important; color: #ffffff !important; } html[data-theme="dark"] body.arcprod-tenant .global-search-empty { color: rgba(235, 235, 245, 0.60) !important; } html[data-theme="dark"] body.arcprod-tenant .global-search-viewall { background: #2c2c2e !important; border-top-color: rgba(84, 84, 88, 0.50) !important; color: var(--ulb-blue, #384376) !important; } html[data-theme="dark"] body.arcprod-tenant .global-search-viewall:hover { background: #3a3a3c !important; } /* ═══════════════════════════════════════════════════════════════════════════ §E — User dropdown (overrides hardcoded dans 06-navbar-dropdown.css) ═══════════════════════════════════════════════════════════════════════════ */ /* Fond et bordure du dropdown-menu */ html[data-theme="dark"] body.arcprod-tenant .navbar-modern .user-dropdown .dropdown-menu { background: #1c1c1e !important; border-color: rgba(84, 84, 88, 0.65) !important; box-shadow: 0 18px 48px rgba(0, 0, 0, 0.75), 0 1px 3px rgba(0, 0, 0, 0.50) !important; } /* Header avec nom utilisateur */ html[data-theme="dark"] body.arcprod-tenant .navbar-modern .user-dropdown .dropdown-header-modern { border-bottom-color: rgba(84, 84, 88, 0.50) !important; } html[data-theme="dark"] body.arcprod-tenant .navbar-modern .user-dropdown .dropdown-user-name { color: #ffffff !important; } /* Section title (ex: "Accès rapide", "Langue", "Apparence") */ html[data-theme="dark"] body.arcprod-tenant .navbar-modern .user-dropdown .dropdown-section-title { color: rgba(235, 235, 245, 0.60) !important; } /* Divider */ html[data-theme="dark"] body.arcprod-tenant .navbar-modern .user-dropdown .dropdown-divider { border-top-color: rgba(84, 84, 88, 0.50) !important; } /* Items du dropdown */ html[data-theme="dark"] body.arcprod-tenant .navbar-modern .user-dropdown .dropdown-item-modern { color: rgba(235, 235, 245, 0.92) !important; background: transparent !important; } html[data-theme="dark"] body.arcprod-tenant .navbar-modern .user-dropdown .dropdown-item-modern:hover, html[data-theme="dark"] body.arcprod-tenant .navbar-modern .user-dropdown .dropdown-item-modern:focus { background: rgba(255, 255, 255, 0.10) !important; color: #ffffff !important; } html[data-theme="dark"] body.arcprod-tenant .navbar-modern .user-dropdown .dropdown-item-modern.active { background: rgba(255, 255, 255, 0.08) !important; color: #ffffff !important; box-shadow: inset 0 0 0 1px rgba(84, 84, 88, 0.40) !important; } /* Langue active override */ html[data-theme="dark"] body.arcprod-tenant .navbar-modern .user-dropdown .dropdown-item-modern[href*="setLanguage"].active { background: rgba(255, 255, 255, 0.06) !important; color: #ffffff !important; box-shadow: none !important; } /* Icônes dropdown */ html[data-theme="dark"] body.arcprod-tenant .navbar-modern .user-dropdown .dropdown-menu svg, html[data-theme="dark"] body.arcprod-tenant .navbar-modern .user-dropdown .dropdown-menu img.icon, html[data-theme="dark"] body.arcprod-tenant .navbar-modern .user-dropdown .dropdown-menu i { color: rgba(235, 235, 245, 0.60) !important; fill: rgba(235, 235, 245, 0.60) !important; opacity: 1 !important; } html[data-theme="dark"] body.arcprod-tenant .navbar-modern .user-dropdown .dropdown-item-modern :is(.dropdown-item-icon, .favorite-shortcut-icon), html[data-theme="dark"] body.arcprod-tenant .navbar-modern .user-dropdown .dropdown-item-modern :is(.dropdown-item-icon i, .favorite-shortcut-icon i) { color: rgba(235, 235, 245, 0.60) !important; } /* Badge de rôle */ html[data-theme="dark"] body.arcprod-tenant .navbar-modern .user-dropdown .role-badge { background: rgba(255, 255, 255, 0.10) !important; border-color: rgba(84, 84, 88, 0.50) !important; color: rgba(235, 235, 245, 0.85) !important; -webkit-text-fill-color: rgba(235, 235, 245, 0.85) !important; } html[data-theme="dark"] body.arcprod-tenant .navbar-modern .user-dropdown .role-badge::before { background: rgba(235, 235, 245, 0.85) !important; } /* ═══════════════════════════════════════════════════════════════════════════ §F — Sidebar (offcanvas desktop + mobile) ═══════════════════════════════════════════════════════════════════════════ */ html[data-theme="dark"] body.arcprod-tenant .offcanvas-sidebar { background: #1c1c1e !important; border-right: 0 !important; border-right-color: transparent !important; --bs-offcanvas-border-width: 0 !important; --bs-offcanvas-border-color: transparent !important; box-shadow: none !important; } html[data-theme="dark"] body.arcprod-tenant #offcanvasSidebar.offcanvas-sidebar { border-right: 0 !important; border-right-color: transparent !important; --bs-offcanvas-border-width: 0 !important; --bs-offcanvas-border-color: transparent !important; box-shadow: none !important; } html[data-theme="dark"] body.arcprod-tenant .offcanvas-header { background: #1c1c1e !important; border-bottom-color: rgba(84, 84, 88, 0.50) !important; } html[data-theme="dark"] body.arcprod-tenant .sidebar-mobile-title, html[data-theme="dark"] body.arcprod-tenant .sidebar-mobile-subtitle { color: rgba(235, 235, 245, 0.85) !important; } html[data-theme="dark"] body.arcprod-tenant .sidebar-close-btn { color: rgba(235, 235, 245, 0.60) !important; } html[data-theme="dark"] body.arcprod-tenant .sidebar-close-btn:hover { background: rgba(255, 255, 255, 0.08) !important; color: #ffffff !important; } html[data-theme="dark"] body.arcprod-tenant .sidebar-link { color: rgba(235, 235, 245, 0.85) !important; } html[data-theme="dark"] body.arcprod-tenant .sidebar-link:hover { background: rgba(255, 255, 255, 0.06) !important; color: #ffffff !important; } html[data-theme="dark"] body.arcprod-tenant .sidebar-link.active { background: var(--primary-color, #384376) !important; color: var(--text-on-primary, #ffffff) !important; } html[data-theme="dark"] body.arcprod-tenant .sidebar-link i { color: rgba(235, 235, 245, 0.85) !important; } html[data-theme="dark"] body.arcprod-tenant .sidebar-link.active i { color: var(--text-on-primary, #ffffff) !important; } html[data-theme="dark"] body.arcprod-tenant .sidebar-section-toggle { color: rgba(235, 235, 245, 0.85) !important; } html[data-theme="dark"] body.arcprod-tenant .sidebar-section-toggle:hover { background: rgba(255, 255, 255, 0.06) !important; color: #ffffff !important; } html[data-theme="dark"] body.arcprod-tenant .sidebar-divider { border-color: rgba(84, 84, 88, 0.40) !important; } html[data-theme="dark"] body.arcprod-tenant .sidebar-admin-panel { background: rgba(0, 0, 0, 0.20) !important; } /* Tooltips sidebar (mode collapsed) */ html[data-theme="dark"] body.arcprod-tenant .sidebar-mini-tooltip .tooltip-inner { background: #2c2c2e !important; color: #ffffff !important; } /* ═══════════════════════════════════════════════════════════════════════════ §G — Bootstrap composants ═══════════════════════════════════════════════════════════════════════════ */ /* — Cards — */ html[data-theme="dark"] body.arcprod-tenant .card { background: #1c1c1e !important; border-color: rgba(84, 84, 88, 0.65) !important; color: #ffffff !important; } html[data-theme="dark"] body.arcprod-tenant .card-header { background: rgba(255, 255, 255, 0.04) !important; border-bottom-color: rgba(84, 84, 88, 0.50) !important; color: #ffffff !important; } html[data-theme="dark"] body.arcprod-tenant .card-footer { background: rgba(255, 255, 255, 0.04) !important; border-top-color: rgba(84, 84, 88, 0.50) !important; } html[data-theme="dark"] body.arcprod-tenant .card-title, html[data-theme="dark"] body.arcprod-tenant .card-subtitle { color: #ffffff !important; } html[data-theme="dark"] body.arcprod-tenant .card-text, html[data-theme="dark"] body.arcprod-tenant .card-body p { color: rgba(235, 235, 245, 0.85) !important; } /* — Modals — */ html[data-theme="dark"] body.arcprod-tenant .modal-content { background: #1c1c1e !important; border-color: rgba(84, 84, 88, 0.65) !important; color: #ffffff !important; } html[data-theme="dark"] body.arcprod-tenant .modal-header { border-bottom-color: rgba(84, 84, 88, 0.50) !important; } html[data-theme="dark"] body.arcprod-tenant .modal-footer { border-top-color: rgba(84, 84, 88, 0.50) !important; } html[data-theme="dark"] body.arcprod-tenant .modal-title { color: #ffffff !important; } html[data-theme="dark"] body.arcprod-tenant .modal-body { color: rgba(235, 235, 245, 0.85) !important; } html[data-theme="dark"] body.arcprod-tenant .btn-close { filter: invert(1) grayscale(100%) brightness(200%) !important; opacity: 0.60 !important; } html[data-theme="dark"] body.arcprod-tenant .btn-close:hover { opacity: 1 !important; } /* — Formulaires — */ html[data-theme="dark"] body.arcprod-tenant .form-control { background-color: #2c2c2e !important; border-color: rgba(84, 84, 88, 0.65) !important; color: rgba(235, 235, 245, 0.90) !important; } /* form-select séparé : background-color + chevron SVG clair en une seule règle (ne pas utiliser le shorthand "background" qui réinitialise background-image) */ html[data-theme="dark"] body.arcprod-tenant .form-select { background-color: #2c2c2e !important; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ebebf5' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") !important; background-repeat: no-repeat !important; background-position: right 0.75rem center !important; background-size: 16px 12px !important; border-color: rgba(84, 84, 88, 0.65) !important; color: rgba(235, 235, 245, 0.90) !important; } html[data-theme="dark"] body.arcprod-tenant .form-control:focus, html[data-theme="dark"] body.arcprod-tenant .form-select:focus { background-color: #3a3a3c !important; border-color: var(--primary-color, #384376) !important; color: #ffffff !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-color, #384376) 30%, transparent) !important; } html[data-theme="dark"] body.arcprod-tenant .form-control::placeholder { color: rgba(235, 235, 245, 0.55) !important; } html[data-theme="dark"] body.arcprod-tenant .form-control:disabled, html[data-theme="dark"] body.arcprod-tenant .form-select:disabled { background: rgba(44, 44, 46, 0.60) !important; color: rgba(235, 235, 245, 0.30) !important; } html[data-theme="dark"] body.arcprod-tenant .form-label { color: rgba(235, 235, 245, 0.85) !important; } /* Filtre de recherche dans les modules — état ouvert. core.css force background:#fff !important (spec 0,3,1) → texte clair sur fond blanc = invisible. Cette règle (spec 0,4,1) corrige le fond et la couleur en dark mode. */ html[data-theme="dark"] body.arcprod-tenant .module-header-tools .search-box-container.search-open input { background: #2c2c2e !important; border-color: rgba(84, 84, 88, 0.65) !important; color: rgba(235, 235, 245, 0.90) !important; } /* Bouton soumettre commentaire — video_detail.css:368 color:var(--token-text-primary,#111827) */ html[data-theme="dark"] body.arcprod-tenant .video-comment-submit { color: rgba(235, 235, 245, 0.85) !important; border-color: rgba(84, 84, 88, 0.50) !important; } html[data-theme="dark"] body.arcprod-tenant .video-comment-submit:hover { background: rgba(255, 255, 255, 0.08) !important; color: #ffffff !important; } html[data-theme="dark"] body.arcprod-tenant .form-text { color: rgba(235, 235, 245, 0.60) !important; } html[data-theme="dark"] body.arcprod-tenant .input-group-text { background: #3a3a3c !important; border-color: rgba(84, 84, 88, 0.65) !important; color: rgba(235, 235, 245, 0.85) !important; } /* Checkbox / Radio */ html[data-theme="dark"] body.arcprod-tenant .form-check-input { background-color: #2c2c2e !important; border-color: rgba(84, 84, 88, 0.65) !important; } html[data-theme="dark"] body.arcprod-tenant .form-check-input:checked { background-color: var(--primary-color, #384376) !important; border-color: var(--primary-color, #384376) !important; } html[data-theme="dark"] body.arcprod-tenant .form-check-label { color: rgba(235, 235, 245, 0.85) !important; } /* — Alerts — */ html[data-theme="dark"] body.arcprod-tenant .alert-success { background: rgba(50, 215, 75, 0.16) !important; border-color: rgba(50, 215, 75, 0.35) !important; color: #32d74b !important; } html[data-theme="dark"] body.arcprod-tenant .alert-warning { background: rgba(255, 214, 10, 0.16) !important; border-color: rgba(255, 214, 10, 0.35) !important; color: #ffd60a !important; } html[data-theme="dark"] body.arcprod-tenant .alert-danger { background: rgba(255, 69, 58, 0.16) !important; border-color: rgba(255, 69, 58, 0.35) !important; color: #ff453a !important; } html[data-theme="dark"] body.arcprod-tenant .alert-info { background: rgba(10, 132, 255, 0.16) !important; border-color: rgba(10, 132, 255, 0.35) !important; color: #0a84ff !important; } html[data-theme="dark"] body.arcprod-tenant .alert-primary { background: color-mix(in srgb, var(--primary-color, #384376) 20%, transparent) !important; border-color: color-mix(in srgb, var(--primary-color, #384376) 40%, transparent) !important; color: color-mix(in srgb, var(--primary-color, #384376) 60%, #ffffff) !important; } /* — Tables — */ html[data-theme="dark"] body.arcprod-tenant table { color: rgba(235, 235, 245, 0.85) !important; } html[data-theme="dark"] body.arcprod-tenant .table { --bs-table-bg: transparent !important; --bs-table-striped-bg: rgba(255, 255, 255, 0.03) !important; --bs-table-hover-bg: rgba(255, 255, 255, 0.04) !important; --bs-table-border-color: rgba(84, 84, 88, 0.40) !important; color: rgba(235, 235, 245, 0.85) !important; border-color: rgba(84, 84, 88, 0.40) !important; } html[data-theme="dark"] body.arcprod-tenant .table th, html[data-theme="dark"] body.arcprod-tenant .table td { border-color: rgba(84, 84, 88, 0.40) !important; } html[data-theme="dark"] body.arcprod-tenant .table thead th { color: rgba(235, 235, 245, 0.60) !important; background: rgba(255, 255, 255, 0.03) !important; } html[data-theme="dark"] body.arcprod-tenant .table-striped tbody tr:nth-of-type(odd) > * { background-color: rgba(255, 255, 255, 0.03) !important; } html[data-theme="dark"] body.arcprod-tenant .table-hover tbody tr:hover > * { background-color: rgba(255, 255, 255, 0.06) !important; } /* — Badges — */ html[data-theme="dark"] body.arcprod-tenant .badge.bg-light { background: #3a3a3c !important; color: rgba(235, 235, 245, 0.85) !important; } html[data-theme="dark"] body.arcprod-tenant .badge.bg-secondary { background: #48484a !important; } html[data-theme="dark"] body.arcprod-tenant .text-muted { color: rgba(235, 235, 245, 0.60) !important; } /* — Buttons — */ html[data-theme="dark"] body.arcprod-tenant .btn-outline-secondary { color: rgba(235, 235, 245, 0.85) !important; border-color: rgba(84, 84, 88, 0.65) !important; } html[data-theme="dark"] body.arcprod-tenant .btn-outline-secondary:hover { background: rgba(255, 255, 255, 0.10) !important; color: #ffffff !important; } html[data-theme="dark"] body.arcprod-tenant .btn-light { background: rgba(255, 255, 255, 0.10) !important; border-color: rgba(84, 84, 88, 0.65) !important; color: rgba(235, 235, 245, 0.85) !important; } html[data-theme="dark"] body.arcprod-tenant .btn-light:hover { background: rgba(255, 255, 255, 0.16) !important; color: #ffffff !important; } /* — Blockquote — */ html[data-theme="dark"] body.arcprod-tenant blockquote, html[data-theme="dark"] body.arcprod-tenant .blockquote { border-left-color: rgba(84, 84, 88, 0.65) !important; color: rgba(235, 235, 245, 0.60) !important; } /* — List groups — */ html[data-theme="dark"] body.arcprod-tenant .list-group-item { background: #1c1c1e !important; border-color: rgba(84, 84, 88, 0.50) !important; color: rgba(235, 235, 245, 0.85) !important; } html[data-theme="dark"] body.arcprod-tenant .list-group-item:hover { background: rgba(255, 255, 255, 0.06) !important; } html[data-theme="dark"] body.arcprod-tenant .list-group-item.active { background: var(--primary-color, #384376) !important; border-color: var(--primary-color, #384376) !important; } /* — Tabs — */ html[data-theme="dark"] body.arcprod-tenant .nav-tabs { border-bottom-color: rgba(84, 84, 88, 0.50) !important; } html[data-theme="dark"] body.arcprod-tenant .nav-tabs .nav-link { color: rgba(235, 235, 245, 0.60) !important; } html[data-theme="dark"] body.arcprod-tenant .nav-tabs .nav-link:hover { color: rgba(235, 235, 245, 0.85) !important; border-color: rgba(84, 84, 88, 0.50) !important; } html[data-theme="dark"] body.arcprod-tenant .nav-tabs .nav-link.active { background: #1c1c1e !important; border-color: rgba(84, 84, 88, 0.50) rgba(84, 84, 88, 0.50) #1c1c1e !important; color: #ffffff !important; } /* — Breadcrumbs — */ html[data-theme="dark"] body.arcprod-tenant .breadcrumb-item, html[data-theme="dark"] body.arcprod-tenant .breadcrumb-item a { color: rgba(235, 235, 245, 0.60) !important; } html[data-theme="dark"] body.arcprod-tenant .breadcrumb-item.active { color: rgba(235, 235, 245, 0.85) !important; } html[data-theme="dark"] body.arcprod-tenant .breadcrumb-item + .breadcrumb-item::before { color: rgba(84, 84, 88, 0.65) !important; } /* — Pagination — */ html[data-theme="dark"] body.arcprod-tenant .page-link { background: #1c1c1e !important; border-color: rgba(84, 84, 88, 0.50) !important; color: rgba(235, 235, 245, 0.85) !important; } html[data-theme="dark"] body.arcprod-tenant .page-link:hover { background: rgba(255, 255, 255, 0.10) !important; color: #ffffff !important; } html[data-theme="dark"] body.arcprod-tenant .page-item.active .page-link { background: var(--primary-color, #384376) !important; border-color: var(--primary-color, #384376) !important; color: var(--text-on-primary, #ffffff) !important; } html[data-theme="dark"] body.arcprod-tenant .page-item.disabled .page-link { background: rgba(28, 28, 30, 0.60) !important; color: rgba(235, 235, 245, 0.30) !important; } /* — Dropdowns Bootstrap généraux — */ html[data-theme="dark"] body.arcprod-tenant .dropdown-menu { background: #1c1c1e !important; border-color: rgba(84, 84, 88, 0.65) !important; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.65) !important; } html[data-theme="dark"] body.arcprod-tenant .dropdown-item { color: rgba(235, 235, 245, 0.85) !important; } html[data-theme="dark"] body.arcprod-tenant .dropdown-item:hover, html[data-theme="dark"] body.arcprod-tenant .dropdown-item:focus { background: rgba(255, 255, 255, 0.08) !important; color: #ffffff !important; } html[data-theme="dark"] body.arcprod-tenant .dropdown-divider { border-top-color: rgba(84, 84, 88, 0.50) !important; } /* — Progress bars — */ html[data-theme="dark"] body.arcprod-tenant .progress { background: rgba(255, 255, 255, 0.10) !important; } /* — Accordions — */ html[data-theme="dark"] body.arcprod-tenant .accordion-item { background: #1c1c1e !important; border-color: rgba(84, 84, 88, 0.50) !important; } html[data-theme="dark"] body.arcprod-tenant .accordion-button { background: #1c1c1e !important; color: rgba(235, 235, 245, 0.85) !important; } html[data-theme="dark"] body.arcprod-tenant .accordion-button:not(.collapsed) { background: rgba(255, 255, 255, 0.04) !important; color: #ffffff !important; } html[data-theme="dark"] body.arcprod-tenant .accordion-button::after { filter: invert(1) !important; } html[data-theme="dark"] body.arcprod-tenant .accordion-body { color: rgba(235, 235, 245, 0.85) !important; background: #1c1c1e !important; } /* — Toasts — */ html[data-theme="dark"] body.arcprod-tenant .toast { background: #2c2c2e !important; border-color: rgba(84, 84, 88, 0.65) !important; color: #ffffff !important; } html[data-theme="dark"] body.arcprod-tenant .toast-header { background: rgba(255, 255, 255, 0.04) !important; border-bottom-color: rgba(84, 84, 88, 0.50) !important; color: rgba(235, 235, 245, 0.85) !important; } /* ═══════════════════════════════════════════════════════════════════════════ §H — DataTables ═══════════════════════════════════════════════════════════════════════════ */ html[data-theme="dark"] body.arcprod-tenant .dataTables_filter input, html[data-theme="dark"] body.arcprod-tenant .dataTables_length select { background: #2c2c2e !important; border-color: rgba(84, 84, 88, 0.65) !important; color: #ffffff !important; } html[data-theme="dark"] body.arcprod-tenant .dataTables_filter label, html[data-theme="dark"] body.arcprod-tenant .dataTables_length label { color: rgba(235, 235, 245, 0.85) !important; } html[data-theme="dark"] body.arcprod-tenant table.dataTable thead th, html[data-theme="dark"] body.arcprod-tenant table.dataTable thead td { border-bottom-color: rgba(84, 84, 88, 0.50) !important; color: rgba(235, 235, 245, 0.60) !important; } html[data-theme="dark"] body.arcprod-tenant table.dataTable tbody tr { background: transparent !important; } html[data-theme="dark"] body.arcprod-tenant table.dataTable tbody tr:hover, html[data-theme="dark"] body.arcprod-tenant table.dataTable tbody tr:hover > * { background: rgba(255, 255, 255, 0.04) !important; } html[data-theme="dark"] body.arcprod-tenant table.dataTable tbody td { border-top-color: rgba(84, 84, 88, 0.30) !important; color: rgba(235, 235, 245, 0.85) !important; } html[data-theme="dark"] body.arcprod-tenant .dataTables_info { color: rgba(235, 235, 245, 0.60) !important; } html[data-theme="dark"] body.arcprod-tenant .dataTables_paginate .paginate_button { color: rgba(235, 235, 245, 0.85) !important; } html[data-theme="dark"] body.arcprod-tenant .dataTables_paginate .paginate_button.current, html[data-theme="dark"] body.arcprod-tenant .dataTables_paginate .paginate_button.current:hover { background: var(--primary-color, #384376) !important; border-color: var(--primary-color, #384376) !important; color: var(--text-on-primary, #ffffff) !important; } html[data-theme="dark"] body.arcprod-tenant .dataTables_paginate .paginate_button:hover { background: rgba(255, 255, 255, 0.08) !important; border-color: rgba(84, 84, 88, 0.50) !important; color: #ffffff !important; } /* Pastille de pagination courante. Le fond ET le texte sont poses ici, dans le meme bloc et sur les deux elements, volontairement : selon la page, l'etat de cette pastille differait — `
  • ` transparent sur /faq (misc.css impose `background: transparent !important`) mais fond de marque sur /templateLibrary (classe `current` en plus). Un `color` fixe donnait donc soit 1,25:1 (anthracite sur le noir de la page), soit 1,00:1 (marque sur marque), selon la page — les deux mesures du 2026-08-01. Forcer le fond du conteneur et la couleur du lien ensemble supprime cette dependance au contexte. */ html[data-theme="dark"] body.arcprod-tenant .dataTables_paginate .paginate_button.current, html[data-theme="dark"] body.arcprod-tenant .dataTables_paginate .paginate_button.active { background: var(--primary-color) !important; } html[data-theme="dark"] body.arcprod-tenant .dataTables_paginate .paginate_button.current .page-link, html[data-theme="dark"] body.arcprod-tenant .dataTables_paginate .paginate_button.active .page-link { background: transparent !important; color: var(--text-on-primary, #ffffff) !important; } html[data-theme="dark"] body.arcprod-tenant .dataTables_paginate .paginate_button:not(.current):not(.active) .page-link { color: rgba(235, 235, 245, 0.85) !important; } html[data-theme="dark"] body.arcprod-tenant .dataTables_paginate .paginate_button:not(.current):not(.active):hover .page-link { background: rgba(255, 255, 255, 0.08) !important; color: #ffffff !important; } /* ═══════════════════════════════════════════════════════════════════════════ §I — Toggle dark mode button styling ═══════════════════════════════════════════════════════════════════════════ */ /* Icône du toggle : visible dans les deux modes */ body.arcprod-tenant #arcprod-dark-toggle #arcprod-dark-icon { color: var(--token-text-secondary, #737373) !important; opacity: 1 !important; } /* En dark mode : icône soleil un peu plus vive */ html[data-theme="dark"] body.arcprod-tenant #arcprod-dark-toggle #arcprod-dark-icon { color: #ffd60a !important; opacity: 1 !important; } /* ═══════════════════════════════════════════════════════════════════════════ §J — Content areas / texte générique ═══════════════════════════════════════════════════════════════════════════ */ html[data-theme="dark"] body.arcprod-tenant .main-content-area { background: #000000 !important; } html[data-theme="dark"] body.arcprod-tenant h1, html[data-theme="dark"] body.arcprod-tenant h2, html[data-theme="dark"] body.arcprod-tenant h3, html[data-theme="dark"] body.arcprod-tenant h4, html[data-theme="dark"] body.arcprod-tenant h5, html[data-theme="dark"] body.arcprod-tenant h6 { color: #ffffff !important; } /* NE PAS RETIRER `span` de cette liste sans avoir d'abord converti les couleurs en dur des composants. Essai fait et ANNULE le 2026-08-01 : le retrait a fait passer les pages admin de 21 a 62 defauts de contraste en mode sombre. Cette regle n'est pas un pansement gratuit, elle COMPENSE des couleurs claires-mode restees en dur que rien d'autre ne couvre en sombre — `.sidebar-text` en #334155 (1,64:1), les marqueurs de champ obligatoire, et d'autres. Le vrai ordre des operations est donc : (1) convertir ces couleurs en dur en tokens, (2) verifier que le retrait ne decouvre plus rien, (3) alors seulement retirer `span` ici et supprimer la liste d'exemptions plus bas. */ /* DEUX mecanismes, deux cas d'usage — ne pas les confondre : - un qui EST lui-meme le composant colore (badge, libelle de chip) doit etre exclu ICI, dans la liste `:not()`. Sa propre regle ne peut pas gagner : ce selecteur pese (0,4,2) une fois les `:not()` comptes, contre (0,1,0) pour un `.mon-composant` ordinaire. - un DESCENDANT d'un composant colore releve de la regle groupee plus bas (§ composants a fond de marque), qui cible `:is(span, i)`. Mesures du 2026-08-01 : .admin-lang-badge-en 3,51:1 et .difficulty-chip-label 2,14:1 — tous deux sont le span lui-meme, d'ou leur presence ci-dessous. */ html[data-theme="dark"] body.arcprod-tenant p, html[data-theme="dark"] body.arcprod-tenant li, html[data-theme="dark"] body.arcprod-tenant span:not(.badge):not(.bi):not(.admin-lang-badge):not(.difficulty-chip-label) { color: rgba(235, 235, 245, 0.85); } html[data-theme="dark"] body.arcprod-tenant a { color: color-mix(in srgb, var(--primary-color, #384376) 60%, #ffffff) !important; } /* --------------------------------------------------------------------------- Composants dont le FOND est la couleur de marque du tenant. Les deux regles generiques ci-dessus (span, a) delavent le texte pour le poser sur une surface sombre. Sur un composant a fond de marque, elles produisent l'inverse : un texte pale sur un fond clair. Mesures du 2026-08-01 : `.xh-badge-cat.active` 1,52:1, `.cal-day-number` du jour 2,14:1, `.template-download-btn` 2,14:1. Pourquoi une regle groupee et non des `:not()` sur la regle generique : une regle qui cible directement l'element bat TOUJOURS l'heritage du parent, meme sans !important. La liste de `:not()` grossissait a chaque composant decouvert (elle en comptait deja cinq) alors qu'une seule regle placee APRES les generiques les couvre toutes — et le !important est necessaire pour battre celui de la regle `a`. AJOUTER ICI tout nouveau composant a fond de marque, mais SEULEMENT apres avoir MESURE son fond reel dans le navigateur, sur la page concernee et dans ce theme. Trois series de retraits l'ont montre : - `.stat-icon`, `.forum-hero-create-btn` etc. avaient ete ajoutes par deduction depuis le CSS ; leur fond de marque est conditionnel, et la regle a rendu 7 icones de l'accueil illisibles (1,01:1) ; - `.lifecycle-status-pill` (/reviewQueue) a un fond TRANSPARENT : l'anthracite calcule pour la marque s'est retrouve sur le noir de la page (1,25:1) ; - `.admin-lang-badge` a un fond FIXE (#15803d, pose pour sa propre conformite) : l'anthracite y donnait 3,36:1 la ou le blanc convient. - `.btn-stats.primary` semblait sur : il l'est, SAUF pour ses variantes `.xh-icon-only-btn--bare`, sans fond, dont les icones sont tombees a 1,25:1 sur /contentStats et /forumStats. Remplace par le selecteur precis `.lifecycle-filter-btn`, le seul dont le fond de marque a ete mesure. Puis `.lifecycle-filter-btn` a son tour : sa variante `--reset` porte `.secondary` et un fond de surface sombre, ou l'anthracite tombait a 1,21:1. Seule `--search` a le fond de marque. LECON GENERALE : ne cibler que la VARIANTE exacte, jamais la classe de base d'un composant. Une classe de base regroupe des variantes aux fonds differents, et une classe d'etat (`.primary`) ne garantit aucun fond. Application de cette lecon : `.visitor-lang-btn.active` est dans la liste, mais PAS `.visitor-lang-btn` seul — au repos ce bouton n'a qu'une bordure de marque sur fond transparent. Mesures du 2026-08-01 en mode VISITEUR, le seul contexte ou ces deux composants existent : 1,52:1 pour le bouton de langue actif et l'icone de connexion, 2,14:1 pour le libelle « Se connecter » — sur les huit pages publiques. Ne pas y mettre non plus de classe ambigue (`.active`, `.badge`, `.nav-link` seuls) : elles designent aussi des elements a fond neutre. 2026-08-02 : `.public-empty-state__cta` ajoute, mesure a 1,52:1. Ce bouton n'apparait QUE dans le cas `members_only` d'une page publique (du contenu existe mais rien n'est public). Les tenants de l'audit du 2026-08-01 etaient tous en `no_content`, ou le bouton n'est pas rendu : le defaut a donc traverse la campagne sans etre vu, sur les CINQ modules publics a la fois. LECON : un etat conditionnel non rencontre pendant l'audit n'est pas un etat conforme, c'est un etat non mesure. 2026-08-02, audit des cibles relevees par le controle 3 de css-tokens-check : - `.cal-avatar` ajoute (1,36:1 mesure, 1,21:1 sur la variante --mod-2). RESERVE CONNUE : les variantes --mod-1 et --mod-3 melangent la marque avec du NOIR (80 % et 60 %). Avec une marque claire, --mod-3 donne un fond #408b02 qui plafonne a 3,94:1 avec l'anthracite et 4,28:1 avec le blanc : AUCUN texte n'y est conforme, le fond est dans la zone morte de luminance. La regle fait donc passer ce cas de 1,21:1 a 3,94:1 sans atteindre AA. Corriger vraiment demanderait de revoir le taux de melange des avatars (un fond plus sombre laisserait passer le blanc), ce qui touche au design et non au contraste. - `.admin-lang-badge-fr:not(.input-group-text)` : la variante exclue a son fond ecrase en #3a3a3c par une autre regle du mode sombre et mesure 9,58:1 ; viser la classe seule y aurait impose l'anthracite, soit 1,48:1. Illustration directe de la lecon ci-dessus. NON retenues apres mesure, car leur fond de marque est conditionnel ou absent : `.btn-primary` (10,45:1, son texte est deja le token), `.sidebar-link` (14,37:1), `.xh-badge-cat` au repos (fond neutre), `.mcr-segment__count` (17,72:1 dans son contexte reel, ou une regle parente ecrase le fond). */ html[data-theme="dark"] body.arcprod-tenant :is( .admin-cat-count-badge, .admin-lang-badge-fr:not(.input-group-text), .cal-avatar, .edition-page-content .section-add-btn, .lifecycle-filter-btn--search, .cal-cell--today .cal-day-number, .dropdown-user-avatar, .guide-path-chip.is-active, .public-empty-state__cta, .template-download-btn, .user-avatar, .visitor-lang-btn.active, .visitor-login-btn, .xh-badge-cat.active ), html[data-theme="dark"] body.arcprod-tenant :is( .admin-cat-count-badge, .admin-lang-badge-fr:not(.input-group-text), .cal-avatar, .edition-page-content .section-add-btn, .lifecycle-filter-btn--search, .cal-cell--today .cal-day-number, .dropdown-user-avatar, .guide-path-chip.is-active, .public-empty-state__cta, .template-download-btn, .user-avatar, .visitor-lang-btn.active, .visitor-login-btn, .xh-badge-cat.active ) :is(span, i, small, strong, b) { color: var(--text-on-primary, #ffffff) !important; } /* Variantes de marque conditionnelles : le mode sombre generique force les * liens et les textes inline en !important. Ces etats portent pourtant un * fond de marque explicite dans leur module ; leur texte doit donc rester le * token de contraste, y compris au survol et dans les compteurs. */ html[data-theme="dark"] body.arcprod-tenant :is( .btn-primary, .btn-outline-primary:hover, .visitor-lang-btn.active, .visitor-lang-btn:hover, .sidebar-link:hover, .sidebar-link.active, .xh-badge-cat:hover, .xh-badge-cat.active, .cal-reg-export-btn:hover, .stats-container .dropdown-item:hover, .stats-container .dropdown-item:focus, .mcr-segment__count, .mcr-btn--view:hover ) { color: var(--text-on-primary, #ffffff) !important; } html[data-theme="dark"] body.arcprod-tenant a:hover { color: #ffffff !important; } /* Exception : cartes-liens et liens de titre dans les cartes — conservent la couleur du texte */ html[data-theme="dark"] body.arcprod-tenant .favorite-tutorial-card, html[data-theme="dark"] body.arcprod-tenant .favorite-video-card, html[data-theme="dark"] body.arcprod-tenant .mcr-event-link { color: var(--text-primary) !important; } html[data-theme="dark"] body.arcprod-tenant .favorite-tutorial-card:hover, html[data-theme="dark"] body.arcprod-tenant .favorite-video-card:hover { color: var(--text-primary) !important; } html[data-theme="dark"] body.arcprod-tenant .mcr-event-link:hover { color: color-mix(in srgb, var(--primary-color, #384376) 60%, #ffffff) !important; } /* Liens de titre dans le tableau admin calendrier */ html[data-theme="dark"] body.arcprod-tenant .cal-admin-title a { color: var(--text-primary) !important; } html[data-theme="dark"] body.arcprod-tenant .cal-admin-title a:hover { color: color-mix(in srgb, var(--primary-color, #384376) 60%, #ffffff) !important; } /* Elements dont le fond est une couleur de CATEGORIE choisie par l'admin, ou la marque du tenant a defaut. Le blanc y etait fige, au motif de « conserver le texte blanc sur fond colore » : mesures du 2026-08-02 sur un tenant a marque claire, 1,61:1 pour la pastille d'evenement et 1,36:1 pour le badge de categorie, ce dernier recevant en plus le texte pale de la regle generique span. --cat-text est calcule par la vue POUR LA COULEUR DE CATEGORIE ; le token --text-on-primary, calcule pour la marque, ne convient pas ici (sur une categorie bleu fonce #1e3a8a il donnerait 1,62:1) et ne sert que de repli quand l'element n'a pas de categorie coloree. */ html[data-theme="dark"] body.arcprod-tenant .cal-event-pill, html[data-theme="dark"] body.arcprod-tenant .cal-event-pill:hover, html[data-theme="dark"] body.arcprod-tenant .cal-cat-badge, html[data-theme="dark"] body.arcprod-tenant .xh-badge-cat.active { color: var(--cat-text, var(--text-on-primary, #ffffff)) !important; } html[data-theme="dark"] body.arcprod-tenant hr { border-color: rgba(84, 84, 88, 0.50) !important; } html[data-theme="dark"] body.arcprod-tenant code { background: rgba(255, 255, 255, 0.08) !important; color: #ff9f0a !important; border-radius: 4px !important; padding: 0.1em 0.4em !important; } html[data-theme="dark"] body.arcprod-tenant pre { background: #2c2c2e !important; border-color: rgba(84, 84, 88, 0.50) !important; color: rgba(235, 235, 245, 0.85) !important; } /* Section headers avec underline */ html[data-theme="dark"] body.arcprod-tenant .section-heading::after, html[data-theme="dark"] body.arcprod-tenant .module-title::after { background: var(--primary-color, #384376) !important; opacity: 0.70 !important; } /* ═══════════════════════════════════════════════════════════════════════════ §K — Announcements bar ═══════════════════════════════════════════════════════════════════════════ */ html[data-theme="dark"] body.arcprod-tenant .announcements-bar { background: rgba(28, 28, 30, 0.95) !important; border-bottom-color: rgba(84, 84, 88, 0.40) !important; color: rgba(235, 235, 245, 0.85) !important; } html[data-theme="dark"] body.arcprod-tenant .announcement-close-btn { color: rgba(235, 235, 245, 0.60) !important; } /* ═══════════════════════════════════════════════════════════════════════════ §L — Footer ═══════════════════════════════════════════════════════════════════════════ */ html[data-theme="dark"] body.arcprod-tenant footer, html[data-theme="dark"] body.arcprod-tenant .footer { background: #000000 !important; border-top-color: rgba(84, 84, 88, 0.40) !important; color: rgba(235, 235, 245, 0.60) !important; } /* ═══════════════════════════════════════════════════════════════════════════ §M — KPI cards (home page) ═══════════════════════════════════════════════════════════════════════════ */ html[data-theme="dark"] body.arcprod-tenant .kpi-card, html[data-theme="dark"] body.arcprod-tenant .stat-card { background: #1c1c1e !important; border-color: rgba(84, 84, 88, 0.40) !important; } html[data-theme="dark"] body.arcprod-tenant .kpi-value, html[data-theme="dark"] body.arcprod-tenant .stat-value { color: #ffffff !important; } html[data-theme="dark"] body.arcprod-tenant .kpi-label, html[data-theme="dark"] body.arcprod-tenant .stat-label { color: rgba(235, 235, 245, 0.60) !important; } /* ═══════════════════════════════════════════════════════════════════════════ §N — Forum dark ═══════════════════════════════════════════════════════════════════════════ */ html[data-theme="dark"] body.arcprod-tenant .forum-thread-item { background: #1c1c1e !important; border-color: rgba(84, 84, 88, 0.40) !important; } html[data-theme="dark"] body.arcprod-tenant .forum-thread-item:hover { background: rgba(255, 255, 255, 0.04) !important; } html[data-theme="dark"] body.arcprod-tenant .forum-thread-title { color: #ffffff !important; } html[data-theme="dark"] body.arcprod-tenant .forum-thread-meta { color: rgba(235, 235, 245, 0.60) !important; } html[data-theme="dark"] body.arcprod-tenant .forum-reply-item { background: #1c1c1e !important; border-color: rgba(84, 84, 88, 0.40) !important; } html[data-theme="dark"] body.arcprod-tenant .forum-post-body { color: rgba(235, 235, 245, 0.85) !important; } /* ═══════════════════════════════════════════════════════════════════════════ §O — Content items (tutoriels, vidéos, FAQ, guides, ressources) ═══════════════════════════════════════════════════════════════════════════ */ html[data-theme="dark"] body.arcprod-tenant .content-item, html[data-theme="dark"] body.arcprod-tenant .tutorial-card, html[data-theme="dark"] body.arcprod-tenant .video-card, html[data-theme="dark"] body.arcprod-tenant .guide-card, html[data-theme="dark"] body.arcprod-tenant .resource-card { background: #1c1c1e !important; border-color: rgba(84, 84, 88, 0.40) !important; } html[data-theme="dark"] body.arcprod-tenant .content-item:hover, html[data-theme="dark"] body.arcprod-tenant .tutorial-card:hover, html[data-theme="dark"] body.arcprod-tenant .video-card:hover, html[data-theme="dark"] body.arcprod-tenant .guide-card:hover, html[data-theme="dark"] body.arcprod-tenant .resource-card:hover { background: rgba(255, 255, 255, 0.04) !important; border-color: rgba(84, 84, 88, 0.60) !important; } html[data-theme="dark"] body.arcprod-tenant .content-item-title, html[data-theme="dark"] body.arcprod-tenant .tutorial-title, html[data-theme="dark"] body.arcprod-tenant .video-title, html[data-theme="dark"] body.arcprod-tenant .guide-title { color: #ffffff !important; } html[data-theme="dark"] body.arcprod-tenant .content-item-meta, html[data-theme="dark"] body.arcprod-tenant .tutorial-meta, html[data-theme="dark"] body.arcprod-tenant .video-meta { color: rgba(235, 235, 245, 0.60) !important; } /* Navigation prev/next vidéo */ html[data-theme="dark"] body.arcprod-tenant .video-adjacent-nav { border-top-color: rgba(84, 84, 88, 0.40) !important; } html[data-theme="dark"] body.arcprod-tenant .video-adj-btn { border-color: rgba(84, 84, 88, 0.40) !important; color: rgba(235, 235, 245, 0.85) !important; } html[data-theme="dark"] body.arcprod-tenant .video-adj-btn:hover { background: rgba(255, 255, 255, 0.05) !important; border-color: var(--primary-color, #384376) !important; color: rgba(235, 235, 245, 0.85) !important; } /* Cartes Guides — corrige le 2026-09-03, DEUX defauts mesures sur #1c1c1e : 1. ce bloc etait la seule exception a base.css §AJ, d'ou un titre qui restait a la marque quand toutes les autres familles avaient bascule ; 2. il employait --primary-color, la marque BRUTE (#035fb0 = 2,65:1, sous le seuil AA), la ou --brand-text porte la variante eclaircie par tenant. Titres : texte courant, comme partout. Liens d'action : marque lisible. */ html[data-theme="dark"] body.arcprod-tenant .guides-page-content .guide-card .card-title, html[data-theme="dark"] body.arcprod-tenant .guides-page-content .guide-card .card-title a, html[data-theme="dark"] body.arcprod-tenant .guides-page-content .guide-card .card-title .guide-card-title-link { color: var(--text-primary) !important; } html[data-theme="dark"] body.arcprod-tenant .guides-page-content .guide-card .guide-card-action a, html[data-theme="dark"] body.arcprod-tenant .guides-page-content .guide-card .guide-action-btn, html[data-theme="dark"] body.arcprod-tenant .guides-page-content .guide-card .guide-action-btn span { color: var(--brand-text) !important; } html[data-theme="dark"] body.arcprod-tenant .guides-page-content .guide-card :is( .card-title a:hover, .card-title .guide-card-title-link:hover, .guide-card-action a:hover, .guide-action-btn:hover, .guide-action-btn span:hover ) { color: var(--primary-color) !important; } html[data-theme="dark"] body.arcprod-tenant .video-adj-label { color: rgba(235, 235, 245, 0.60) !important; } html[data-theme="dark"] body.arcprod-tenant .video-adj-title { color: #ffffff !important; } /* Description vidéo — video_detail.css:302 color:var(--text-color,#333) → fallback #333 si var undefined */ html[data-theme="dark"] body.arcprod-tenant .description-content { color: rgba(235, 235, 245, 0.85) !important; } html[data-theme="dark"] body.arcprod-tenant .video-description h3 { color: #ffffff !important; } /* FAQ accordion overrides */ html[data-theme="dark"] body.arcprod-tenant .faq-question { color: #ffffff !important; background: transparent !important; border-color: rgba(84, 84, 88, 0.40) !important; } html[data-theme="dark"] body.arcprod-tenant .faq-answer { background: rgba(255, 255, 255, 0.02) !important; color: rgba(235, 235, 245, 0.85) !important; border-color: rgba(84, 84, 88, 0.30) !important; } html[data-theme="dark"] body.arcprod-tenant .faq-page-content :is(#faq-container, .faq-list, .faq-list .faq-item) { background: transparent !important; } /* ═══════════════════════════════════════════════════════════════════════════ §O2 — Favoris (mes vidéos, mes tutoriels, mes guides) Sources : modules/favorites.css, 10-design-system-fixes.css §AJ/3 Les feuilles my_favorite_videos.css et my_favorite_tutorials.css ont fusionne dans modules/favorites.css le 2026-08-03. Les numeros de ligne cites ci-dessous ont donc ete retires : ils etaient deja perimes avant la fusion (ils pointaient au-dela de la fin des fichiers, qui avaient retreci pendant la campagne CSS). ═══════════════════════════════════════════════════════════════════════════ */ /* Cards background — favorites.css §4 background:#fff + favorites.css §15 border:#e5e7eb !important */ html[data-theme="dark"] body.arcprod-tenant .favorite-videos-page-content .favorite-video-card, html[data-theme="dark"] body.arcprod-tenant .favorite-tutorials-page-content .favorite-tutorial-card, html[data-theme="dark"] body.arcprod-tenant .favorite-guides-page-content .favorite-guide-card { background: #1c1c1e !important; border-color: rgba(84, 84, 88, 0.40) !important; } html[data-theme="dark"] body.arcprod-tenant .favorite-videos-page-content .favorite-video-card:hover, html[data-theme="dark"] body.arcprod-tenant .favorite-tutorials-page-content .favorite-tutorial-card:hover, html[data-theme="dark"] body.arcprod-tenant .favorite-guides-page-content .favorite-guide-card:hover { background: rgba(255, 255, 255, 0.04) !important; border-color: rgba(84, 84, 88, 0.65) !important; } /* Titre au hover — spec (0,6,1) > (0,5,1) de 10-design-system-fixes.css §AJ/3 qui force color:#1d1d1f (noir) — invisible sur fond #1c1c1e */ html[data-theme="dark"] body.arcprod-tenant .favorite-videos-page-content .favorite-video-card:hover .video-title, html[data-theme="dark"] body.arcprod-tenant .favorite-tutorials-page-content .favorite-tutorial-card:hover .tutorial-title, html[data-theme="dark"] body.arcprod-tenant .favorite-guides-page-content .favorite-guide-card:hover .guide-title, html[data-theme="dark"] body.arcprod-tenant .favorite-guides-page-content .favorite-tutorial-card:hover .tutorial-title { color: color-mix(in srgb, var(--primary-color, #384376) 50%, #ffffff) !important; text-decoration: none !important; } /* Thumbnail — favorites.css §5 background: degrade #e9ecef */ html[data-theme="dark"] body.arcprod-tenant .favorite-videos-page-content .video-thumbnail { background: #2c2c2e !important; } /* Empty state — favorites.css §9 background:#fff */ html[data-theme="dark"] body.arcprod-tenant .favorite-videos-page-content .empty-favorites-state, html[data-theme="dark"] body.arcprod-tenant .favorite-tutorials-page-content .empty-favorites-state, html[data-theme="dark"] body.arcprod-tenant .favorite-guides-page-content .empty-favorites-state { background: #1c1c1e !important; border-color: rgba(84, 84, 88, 0.40) !important; } /* Badges catégories — favorites.css §15 background:#f1f5f9, color:#4b5563 */ html[data-theme="dark"] body.arcprod-tenant .favorite-tutorials-page-content .tutorial-category, html[data-theme="dark"] body.arcprod-tenant .favorite-tutorials-page-content .badge { background: rgba(255, 255, 255, 0.08) !important; color: rgba(235, 235, 245, 0.75) !important; } /* Boutons de navigation pagination — favorites.css §15 background:#fff */ html[data-theme="dark"] body.arcprod-tenant .favorite-videos-page-content .btn-nav, html[data-theme="dark"] body.arcprod-tenant .favorite-tutorials-page-content .btn-nav, html[data-theme="dark"] body.arcprod-tenant .favorite-guides-page-content .btn-nav { background: #2c2c2e !important; border-color: rgba(84, 84, 88, 0.50) !important; color: rgba(235, 235, 245, 0.85) !important; } /* ═══════════════════════════════════════════════════════════════════════════ §P — TinyMCE editor — dark mode complet Apple iOS 18 ═══════════════════════════════════════════════════════════════════════════ */ /* Conteneur principal */ html[data-theme="dark"] body.arcprod-tenant .tox-tinymce { border-color: rgba(84, 84, 88, 0.65) !important; background-color: #1c1c1e !important; } /* Barre de menu (Fichier, Édition, Insertion…) */ html[data-theme="dark"] body.arcprod-tenant .tox .tox-editor-header, html[data-theme="dark"] body.arcprod-tenant .tox .tox-menubar, html[data-theme="dark"] body.arcprod-tenant .tox .tox-toolbar-overlord, html[data-theme="dark"] body.arcprod-tenant .tox .tox-toolbar__primary, html[data-theme="dark"] body.arcprod-tenant .tox .tox-toolbar, html[data-theme="dark"] body.arcprod-tenant .tox .tox-toolbar__overflow { background-color: #2c2c2e !important; border-bottom-color: rgba(84, 84, 88, 0.5) !important; } /* Boutons de la barre de menu */ html[data-theme="dark"] body.arcprod-tenant .tox .tox-mbtn, html[data-theme="dark"] body.arcprod-tenant .tox .tox-tbtn { color: rgba(235, 235, 245, 0.85) !important; background-color: transparent !important; } html[data-theme="dark"] body.arcprod-tenant .tox .tox-mbtn:hover, html[data-theme="dark"] body.arcprod-tenant .tox .tox-mbtn--active, html[data-theme="dark"] body.arcprod-tenant .tox .tox-tbtn:hover, html[data-theme="dark"] body.arcprod-tenant .tox .tox-tbtn--enabled { background-color: rgba(255, 255, 255, 0.08) !important; color: rgba(235, 235, 245, 1) !important; } html[data-theme="dark"] body.arcprod-tenant .tox .tox-mbtn__select-label, html[data-theme="dark"] body.arcprod-tenant .tox .tox-tbtn__select-label { color: rgba(235, 235, 245, 0.85) !important; } /* Séparateurs toolbar */ html[data-theme="dark"] body.arcprod-tenant .tox .tox-toolbar__group { border-right-color: rgba(84, 84, 88, 0.5) !important; border-left-color: rgba(84, 84, 88, 0.5) !important; } /* Zone d'édition (iframe) */ html[data-theme="dark"] body.arcprod-tenant .tox .tox-edit-area, html[data-theme="dark"] body.arcprod-tenant .tox .tox-edit-area__iframe { background-color: #1c1c1e !important; border-color: rgba(84, 84, 88, 0.4) !important; } /* Statusbar en bas */ html[data-theme="dark"] body.arcprod-tenant .tox .tox-statusbar { background-color: #2c2c2e !important; border-top-color: rgba(84, 84, 88, 0.5) !important; color: rgba(235, 235, 245, 0.55) !important; } html[data-theme="dark"] body.arcprod-tenant .tox .tox-statusbar__path-item, html[data-theme="dark"] body.arcprod-tenant .tox .tox-statusbar__wordcount, html[data-theme="dark"] body.arcprod-tenant .tox .tox-statusbar__branding { color: rgba(235, 235, 245, 0.60) !important; } /* Resize handle */ html[data-theme="dark"] body.arcprod-tenant .tox .tox-statusbar__resize-handle svg { fill: rgba(235, 235, 245, 0.4) !important; } /* Icônes SVG dans les boutons */ html[data-theme="dark"] body.arcprod-tenant .tox .tox-icon svg, html[data-theme="dark"] body.arcprod-tenant .tox .tox-tbtn svg { fill: rgba(235, 235, 245, 0.8) !important; } html[data-theme="dark"] body.arcprod-tenant .tox .tox-tbtn:hover svg, html[data-theme="dark"] body.arcprod-tenant .tox .tox-tbtn--enabled svg { fill: rgba(235, 235, 245, 1) !important; } /* Dropdowns de sélection (format, taille) */ html[data-theme="dark"] body.arcprod-tenant .tox .tox-listboxfield .tox-listbox--select, html[data-theme="dark"] body.arcprod-tenant .tox .tox-selectfield select { background-color: #3a3a3c !important; border-color: rgba(84, 84, 88, 0.65) !important; color: rgba(235, 235, 245, 0.85) !important; } /* Splitter entre zones */ html[data-theme="dark"] body.arcprod-tenant .tox .tox-sidebar-wrap { background-color: #1c1c1e !important; } /* Focus ring */ html[data-theme="dark"] body.arcprod-tenant .tox .tox-tinymce:focus-within { border-color: var(--primary-color, #384376) !important; box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary-color, #384376) 20%, transparent) !important; } /* Contenu de l'iframe — injecté par TinyMCE dans le document interne */ /* Note: nécessite skin="oxide-dark" ou overrides via content_style dans l'init JS */ /* ── Menus déroulants / popups (format, couleur, tableaux…) ── */ html[data-theme="dark"] body.arcprod-tenant .tox .tox-menu, html[data-theme="dark"] body.arcprod-tenant .tox .tox-dialog, html[data-theme="dark"] body.arcprod-tenant .tox .tox-pop__dialog, html[data-theme="dark"] body.arcprod-tenant .tox .tox-tiered-menu { background-color: #2c2c2e !important; border-color: rgba(84, 84, 88, 0.55) !important; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45) !important; color: rgba(235, 235, 245, 0.9) !important; } /* Collection (liste d'items dans un menu) */ html[data-theme="dark"] body.arcprod-tenant .tox .tox-collection, html[data-theme="dark"] body.arcprod-tenant .tox .tox-collection__group { background-color: #2c2c2e !important; border-color: rgba(84, 84, 88, 0.35) !important; } /* Item individuel */ html[data-theme="dark"] body.arcprod-tenant .tox .tox-collection__item { background-color: transparent !important; color: rgba(235, 235, 245, 0.88) !important; border-radius: 4px !important; } /* Item au survol */ html[data-theme="dark"] body.arcprod-tenant .tox .tox-collection__item:hover, html[data-theme="dark"] body.arcprod-tenant .tox .tox-collection__item--active, html[data-theme="dark"] body.arcprod-tenant .tox .tox-collection__item--state-active { background-color: rgba(255, 255, 255, 0.08) !important; color: rgba(235, 235, 245, 1) !important; } /* Item sélectionné (coché — ex: "Paragraphe" actif) */ html[data-theme="dark"] body.arcprod-tenant .tox .tox-collection__item--enabled { background-color: var(--primary-color, #384376) !important; color: var(--text-on-primary, #fff) !important; } /* Label texte dans les items */ html[data-theme="dark"] body.arcprod-tenant .tox .tox-collection__item-label, html[data-theme="dark"] body.arcprod-tenant .tox .tox-collection__item-checkmark, html[data-theme="dark"] body.arcprod-tenant .tox .tox-collection__item-label * { color: inherit !important; } /* Icônes SVG dans les menus */ html[data-theme="dark"] body.arcprod-tenant .tox .tox-collection__item svg, html[data-theme="dark"] body.arcprod-tenant .tox .tox-menu svg { fill: rgba(235, 235, 245, 0.75) !important; } /* Séparateur entre groupes */ html[data-theme="dark"] body.arcprod-tenant .tox .tox-menu__divider { border-top-color: rgba(84, 84, 88, 0.35) !important; } /* Dialog TinyMCE (insérer lien, image, tableau…) */ html[data-theme="dark"] body.arcprod-tenant .tox .tox-dialog__header, html[data-theme="dark"] body.arcprod-tenant .tox .tox-dialog__footer { background-color: #2c2c2e !important; border-color: rgba(84, 84, 88, 0.45) !important; color: rgba(235, 235, 245, 0.9) !important; } html[data-theme="dark"] body.arcprod-tenant .tox .tox-dialog__body { background-color: #1c1c1e !important; color: rgba(235, 235, 245, 0.88) !important; } html[data-theme="dark"] body.arcprod-tenant .tox .tox-dialog__title { color: rgba(235, 235, 245, 0.95) !important; } html[data-theme="dark"] body.arcprod-tenant .tox .tox-label, html[data-theme="dark"] body.arcprod-tenant .tox .tox-form__group label { color: rgba(235, 235, 245, 0.75) !important; } html[data-theme="dark"] body.arcprod-tenant .tox .tox-textfield, html[data-theme="dark"] body.arcprod-tenant .tox .tox-textarea, html[data-theme="dark"] body.arcprod-tenant .tox .tox-listbox { background-color: #3a3a3c !important; border-color: rgba(84, 84, 88, 0.65) !important; color: rgba(235, 235, 245, 0.88) !important; } /* Overlay backdrop */ html[data-theme="dark"] body.arcprod-tenant .tox-overlay--dark { background-color: rgba(0, 0, 0, 0.55) !important; } /* Scrollbar dans les menus TinyMCE (Webkit) */ html[data-theme="dark"] body.arcprod-tenant .tox .tox-menu::-webkit-scrollbar, html[data-theme="dark"] body.arcprod-tenant .tox .tox-collection::-webkit-scrollbar { width: 5px !important; } html[data-theme="dark"] body.arcprod-tenant .tox .tox-menu::-webkit-scrollbar-track, html[data-theme="dark"] body.arcprod-tenant .tox .tox-collection::-webkit-scrollbar-track { background: transparent !important; } html[data-theme="dark"] body.arcprod-tenant .tox .tox-menu::-webkit-scrollbar-thumb, html[data-theme="dark"] body.arcprod-tenant .tox .tox-collection::-webkit-scrollbar-thumb { background: rgba(235, 235, 245, 0.25) !important; border-radius: 3px !important; } html[data-theme="dark"] body.arcprod-tenant .tox .tox-menu::-webkit-scrollbar-thumb:hover, html[data-theme="dark"] body.arcprod-tenant .tox .tox-collection::-webkit-scrollbar-thumb:hover { background: rgba(235, 235, 245, 0.45) !important; } /* ═══════════════════════════════════════════════════════════════════════════ §S — Tutorial detail (vue tutoriel ouvert) Source : tutorial_detail.css ═══════════════════════════════════════════════════════════════════════════ */ /* Carte principale du contenu — tutorial_detail.css:192 rgba(255,255,255,0.98) */ html[data-theme="dark"] body.arcprod-tenant .tutorial-content-wrapper { background: #1c1c1e !important; border-color: rgba(84, 84, 88, 0.40) !important; box-shadow: 0 4px 24px rgba(0, 0, 0, 0.55) !important; } /* Barre décorative top — garder la couleur primaire */ html[data-theme="dark"] body.arcprod-tenant .tutorial-content-wrapper::before { background: var(--primary-color, #384376) !important; } /* Meta (date, auteur, tags) — tutorial_detail.css:168 background: white */ html[data-theme="dark"] body.arcprod-tenant .tutorial-meta { background: #1c1c1e !important; border-color: rgba(84, 84, 88, 0.40) !important; } /* Zone actions — tutorial_detail.css:345 background: white */ html[data-theme="dark"] body.arcprod-tenant .tutorial-actions { background: #1c1c1e !important; border-color: rgba(84, 84, 88, 0.40) !important; } /* Section partage — tutorial_detail.css:288 var(--card-bg, #fff) */ html[data-theme="dark"] body.arcprod-tenant .tutorial-share-section { background: #2c2c2e !important; border-color: rgba(84, 84, 88, 0.40) !important; } /* Input URL de partage (tutorial, FAQ, vidéo, guide) — fond blanc navigateur par défaut */ html[data-theme="dark"] body.arcprod-tenant .tutorial-link-input, html[data-theme="dark"] body.arcprod-tenant .video-link-input, html[data-theme="dark"] body.arcprod-tenant .guide-link-input { background: #1c1c1e !important; color: rgba(235, 235, 245, 0.85) !important; border-color: rgba(84, 84, 88, 0.65) !important; } /* Boutons d'action partage (.share-btn) */ html[data-theme="dark"] body.arcprod-tenant .share-btn { color: rgba(235, 235, 245, 0.75) !important; background: transparent !important; border-color: rgba(84, 84, 88, 0.50) !important; } html[data-theme="dark"] body.arcprod-tenant .share-btn:hover { background: rgba(255, 255, 255, 0.10) !important; color: #ffffff !important; } /* Section partage vidéo / guide — même structure que tutorial */ html[data-theme="dark"] body.arcprod-tenant .video-share-section, html[data-theme="dark"] body.arcprod-tenant .guide-share-section { background: transparent !important; border-color: rgba(84, 84, 88, 0.40) !important; } /* Guide detail page: align with dark token surfaces (no light flashes) */ html[data-theme="dark"] body.arcprod-tenant .guide-detail-container .guide-detail-title { color: #ffffff !important; } html[data-theme="dark"] body.arcprod-tenant .guide-detail-container .guide-detail-description { color: rgba(235, 235, 245, 0.78) !important; } html[data-theme="dark"] body.arcprod-tenant .guide-detail-container .guide-steps-nav, html[data-theme="dark"] body.arcprod-tenant .guide-detail-container .guide-step-card, html[data-theme="dark"] body.arcprod-tenant .guide-detail-container .guide-empty-state { background: #1c1c1e !important; border-color: rgba(84, 84, 88, 0.45) !important; box-shadow: none !important; } html[data-theme="dark"] body.arcprod-tenant .guide-detail-container .guide-steps-nav .steps-nav-header, html[data-theme="dark"] body.arcprod-tenant .guide-detail-container .guide-step-card-header, html[data-theme="dark"] body.arcprod-tenant .guide-detail-container .guide-step-card-footer { background: rgba(255, 255, 255, 0.04) !important; border-color: rgba(84, 84, 88, 0.45) !important; } html[data-theme="dark"] body.arcprod-tenant .guide-detail-container .guide-steps-nav .step-nav-item { color: rgba(235, 235, 245, 0.85) !important; border-bottom-color: rgba(84, 84, 88, 0.38) !important; } html[data-theme="dark"] body.arcprod-tenant .guide-detail-container .guide-steps-nav .step-nav-item:hover { background: rgba(255, 255, 255, 0.06) !important; color: #ffffff !important; } html[data-theme="dark"] body.arcprod-tenant .guide-detail-container .guide-steps-nav .step-nav-item.active { background: rgba(255, 255, 255, 0.08) !important; color: var(--primary-color, #0a84ff) !important; } html[data-theme="dark"] body.arcprod-tenant .guide-detail-container .guide-steps-nav .step-nav-item .step-num { background: #2c2c2e !important; color: rgba(235, 235, 245, 0.70) !important; } html[data-theme="dark"] body.arcprod-tenant .guide-detail-container .guide-steps-nav .step-nav-item.done .step-num { background: var(--token-primary, var(--primary-color, #0a84ff)) !important; /* Etait #ffffff en dur : 2,90:1 sur le vert du tenant. */ color: var(--text-on-primary, #ffffff) !important; } html[data-theme="dark"] body.arcprod-tenant .guide-detail-container .guide-progress-header .progress-status--percent, html[data-theme="dark"] body.arcprod-tenant .guide-detail-container .guide-progress-header .progress-status--completed { color: var(--token-primary, var(--primary-color, #0a84ff)) !important; } html[data-theme="dark"] body.arcprod-tenant .guide-detail-container .guide-progress-header .progress-status--completed { background: color-mix(in srgb, var(--token-primary, var(--primary-color, #0a84ff)) 14%, transparent) !important; border-color: color-mix(in srgb, var(--token-primary, var(--primary-color, #0a84ff)) 26%, transparent) !important; } html[data-theme="dark"] body.arcprod-tenant .guide-detail-container .guide-step-content, html[data-theme="dark"] body.arcprod-tenant .guide-detail-container .guide-step-content p, html[data-theme="dark"] body.arcprod-tenant .guide-detail-container .guide-step-content li { color: rgba(235, 235, 245, 0.88) !important; } html[data-theme="dark"] body.arcprod-tenant .guide-detail-container .guide-step-content blockquote { border-left: 3px solid var(--token-primary, #0a84ff) !important; background: color-mix(in srgb, var(--token-primary, #0a84ff) 18%, rgba(255, 255, 255, 0.03)) !important; color: rgba(235, 235, 245, 0.90) !important; border-radius: 0 10px 10px 0 !important; padding: 1rem 1.2rem !important; } html[data-theme="dark"] body.arcprod-tenant .guide-detail-container .guide-progress-track { background: rgba(255, 255, 255, 0.14) !important; } html[data-theme="dark"] body.arcprod-tenant .guide-detail-container .guide-step-card-footer .btn-outline-secondary { background: #2c2c2e !important; border-color: rgba(84, 84, 88, 0.70) !important; color: rgba(235, 235, 245, 0.90) !important; } html[data-theme="dark"] body.arcprod-tenant .guide-detail-container .guide-step-card-footer .btn-outline-secondary:hover { background: rgba(255, 255, 255, 0.12) !important; border-color: rgba(120, 120, 128, 0.85) !important; color: #ffffff !important; } /* Progress indicator — tutorial_detail.css:116 background: #fff */ html[data-theme="dark"] body.arcprod-tenant .progress-indicator { background: #2c2c2e !important; border-color: rgba(84, 84, 88, 0.50) !important; color: rgba(235, 235, 245, 0.85) !important; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.55) !important; } /* — §AC override — spécificité (0,5,1) > §AC (0,4,1) — */ /* 10-design-system-fixes.css §AC force color:#1d1d1f sur titre, h2, h3, blockquote */ html[data-theme="dark"] body.arcprod-tenant .tutorial-detail-container:is([data-page="faq-detail"], [data-page="tutorial-detail"]) .tutorial-title { color: #ffffff !important; } html[data-theme="dark"] body.arcprod-tenant .tutorial-detail-container:is([data-page="faq-detail"], [data-page="tutorial-detail"]) .tutorial-meta { background: transparent !important; border: none !important; } html[data-theme="dark"] body.arcprod-tenant .tutorial-detail-container:is([data-page="faq-detail"], [data-page="tutorial-detail"]) .tutorial-content h2 { color: rgba(235, 235, 245, 0.92) !important; border-bottom-color: rgba(84, 84, 88, 0.40) !important; } html[data-theme="dark"] body.arcprod-tenant .tutorial-detail-container:is([data-page="faq-detail"], [data-page="tutorial-detail"]) .tutorial-content h3 { color: rgba(235, 235, 245, 0.92) !important; } html[data-theme="dark"] body.arcprod-tenant .tutorial-detail-container:is([data-page="faq-detail"], [data-page="tutorial-detail"]) .tutorial-content blockquote { border-left: 3px solid var(--token-primary, #0a84ff) !important; background: color-mix(in srgb, var(--token-primary, #0a84ff) 18%, rgba(255, 255, 255, 0.03)) !important; color: rgba(235, 235, 245, 0.90) !important; border-radius: 0 10px 10px 0 !important; padding: 1rem 1.2rem !important; } /* Contenu HTML riche (TinyMCE output) — règles générales */ html[data-theme="dark"] body.arcprod-tenant .tutorial-content { color: rgba(235, 235, 245, 0.85) !important; } html[data-theme="dark"] body.arcprod-tenant .tutorial-content h1, html[data-theme="dark"] body.arcprod-tenant .tutorial-content h4, html[data-theme="dark"] body.arcprod-tenant .tutorial-content h5 { color: #ffffff !important; } html[data-theme="dark"] body.arcprod-tenant .tutorial-content p, html[data-theme="dark"] body.arcprod-tenant .tutorial-content li, html[data-theme="dark"] body.arcprod-tenant .tutorial-content td, html[data-theme="dark"] body.arcprod-tenant .tutorial-content th { color: rgba(235, 235, 245, 0.85) !important; } html[data-theme="dark"] body.arcprod-tenant .tutorial-content a { color: color-mix(in srgb, var(--primary-color, #384376) 50%, #ffffff) !important; } html[data-theme="dark"] body.arcprod-tenant .tutorial-content table { border-color: rgba(84, 84, 88, 0.50) !important; } html[data-theme="dark"] body.arcprod-tenant .tutorial-content th { background: rgba(255, 255, 255, 0.06) !important; border-color: rgba(84, 84, 88, 0.50) !important; } html[data-theme="dark"] body.arcprod-tenant .tutorial-content td { border-color: rgba(84, 84, 88, 0.40) !important; } html[data-theme="dark"] body.arcprod-tenant .tutorial-content code { background: rgba(255, 255, 255, 0.08) !important; color: #ff9f0a !important; } html[data-theme="dark"] body.arcprod-tenant .tutorial-content pre { background: #2c2c2e !important; border-color: rgba(84, 84, 88, 0.50) !important; color: rgba(235, 235, 245, 0.85) !important; } html[data-theme="dark"] body.arcprod-tenant .tutorial-content hr { border-color: rgba(84, 84, 88, 0.40) !important; } /* Tags de catégorie */ html[data-theme="dark"] body.arcprod-tenant .tutorial-detail-page .tag-badge, html[data-theme="dark"] body.arcprod-tenant .tutorial-detail-page .category-tag { background: rgba(255, 255, 255, 0.10) !important; border-color: rgba(84, 84, 88, 0.50) !important; color: rgba(235, 235, 245, 0.85) !important; } /* ─────────────────────────────────────────────────────────────────────────── Contenu importé du module Fiches pratiques : encadrés dont le fond est figé DANS le HTML de la fiche. Les fiches reprises du portail de support portent des encadrés d'information écrits en dur, du type `
    `. Le sanitizer les conserve volontairement — `background-color` est la seule propriété de fond de sa liste blanche, mesuré — parce que ces encadrés portent du sens. Mais leur fond CLAIR ne suit pas le thème, alors que le texte qu'ils contiennent est éclairci par la règle générique p/li/span du §… ci-dessus : texte clair sur fond clair, donc illisible en mode sombre. On rétablit donc un texte sombre à l'intérieur de ces encadrés, et seulement là. Deux règles distinctes parce que les liens sont forcés en !important plus haut : sans traitement séparé, un lien resterait bleu pâle sur fond pâle. Limite connue, à mesurer sur du contenu réel : le cas SYMÉTRIQUE n'est pas traité — un `style="color:#333"` figé, sans fond, resterait sombre sur fond sombre (un style inline bat toute règle sans !important). Écraser toutes les couleurs figées détruirait aussi les couleurs voulues ; la bonne réponse est de convertir ces styles en classes sémantiques à l'import, pas ici. ─────────────────────────────────────────────────────────────────────────── */ html[data-theme="dark"] body.arcprod-tenant .practical-sheets-sheet-body [style*="background-color"], html[data-theme="dark"] body.arcprod-tenant .practical-sheets-sheet-body [style*="background-color"] :is(p, li, span, td, th, strong, em, b, i, h1, h2, h3, h4, h5, h6, blockquote) { color: #1c1c1e !important; } html[data-theme="dark"] body.arcprod-tenant .practical-sheets-sheet-body [style*="background-color"] a { color: #0a4f99 !important; } /* ═══════════════════════════════════════════════════════════════════════════ §Q — Scrollbars personnalisées (WebKit) ═══════════════════════════════════════════════════════════════════════════ */ html[data-theme="dark"] body.arcprod-tenant ::-webkit-scrollbar { width: 8px; height: 8px; } html[data-theme="dark"] body.arcprod-tenant ::-webkit-scrollbar-track { background: #000000; } html[data-theme="dark"] body.arcprod-tenant ::-webkit-scrollbar-thumb { background: rgba(84, 84, 88, 0.65); border-radius: 4px; } html[data-theme="dark"] body.arcprod-tenant ::-webkit-scrollbar-thumb:hover { background: rgba(84, 84, 88, 0.90); } /* ═══════════════════════════════════════════════════════════════════════════ §R — Forum Home — overrides dark (spec (0,4,2) > 10-design-system-fixes.css (0,3,1)) 100 % variables §A — zéro valeur hardcodée. ═══════════════════════════════════════════════════════════════════════════ */ /* Metric cards — surface iOS, bordure séparateur, ombre douce */ html[data-theme="dark"] body.arcprod-tenant .forum-home-content .metric-card { background: var(--bg-primary) !important; border-color: var(--border-color) !important; box-shadow: var(--shadow-sm) !important; } /* Sections "Tous les sujets" / form — flat, séparateur en haut */ html[data-theme="dark"] body.arcprod-tenant .forum-home-content .data-table-card { background: transparent !important; border: none !important; border-top: 1px solid var(--border-color) !important; border-radius: 0 !important; box-shadow: none !important; } /* Sujets épinglés — pas de séparateur au-dessus */ html[data-theme="dark"] body.arcprod-tenant .forum-home-content .data-table-card.pinned-threads { border-top: none !important; } /* Bootstrap .table-hover injecte --bs-table-hover-bg blanc sur les . On neutralise sur tr:hover > * pour éviter le flash blanc. */ html[data-theme="dark"] body.arcprod-tenant .forum-home-content tbody tr:hover > * { --bs-table-hover-color: inherit !important; --bs-table-hover-bg: transparent !important; --bs-table-bg: transparent !important; background-color: transparent !important; color: inherit !important; } /* Filter chips non-actives */ html[data-theme="dark"] body.arcprod-tenant .forum-home-content .forum-filter-chip:not(.is-active) { background: transparent !important; border-color: var(--border-color) !important; color: var(--text-secondary) !important; } html[data-theme="dark"] body.arcprod-tenant .forum-home-content .forum-filter-chip:hover:not(.is-active) { background: var(--bg-tertiary) !important; color: var(--text-primary) !important; } /* Filter chip active — primaire plein */ html[data-theme="dark"] body.arcprod-tenant .forum-home-content .forum-filter-chip.is-active { background: var(--primary-color) !important; color: var(--text-on-primary, #ffffff) !important; border-color: var(--primary-color) !important; } /* Search bar — fond tertiary doux, zéro bordure visible */ html[data-theme="dark"] body.arcprod-tenant .forum-home-content .search-box input { background: var(--bg-tertiary) !important; border: none !important; color: var(--text-primary) !important; } html[data-theme="dark"] body.arcprod-tenant .forum-home-content .search-box input::placeholder { color: var(--text-tertiary) !important; } /* === Glossary dark contrast — migré depuis base.css 2026-03-16 === */ /* === GLOSSARY — Dark contrast guardrail (title + accordion readability) === */ html[data-theme="dark"] body.arcprod-tenant .glossary-page-content .glossary-title { color: var(--token-text-primary, #f5f5f7) !important; } html[data-theme="dark"] body.arcprod-tenant .glossary-page-content .glossary-question .glossary-term-text, html[data-theme="dark"] body.arcprod-tenant .glossary-page-content .glossary-question .glossary-term-text strong, html[data-theme="dark"] body.arcprod-tenant .glossary-page-content .glossary-item.active .glossary-question .glossary-term-text, html[data-theme="dark"] body.arcprod-tenant .glossary-page-content .glossary-item.active .glossary-question .glossary-term-text strong { color: var(--token-text-primary, #f5f5f7) !important; } html[data-theme="dark"] body.arcprod-tenant .glossary-page-content .glossary-letter-badge { color: var(--token-text-secondary, #a1a1aa) !important; background: transparent !important; } /* === Stats contenu — Dark mode overrides (§AO) === */ /* Metric cards dark : transparents, bordure subtile */ html[data-theme="dark"] body.arcprod-tenant .stats-container .metric-card { background: transparent !important; border-color: rgba(84, 84, 88, 0.45) !important; box-shadow: none !important; } /* Boutons icône dark : couleur adaptée */ html[data-theme="dark"] body.arcprod-tenant .stats-container .btn-stats.btn-stats-icon { color: rgba(235, 235, 245, 0.55) !important; } html[data-theme="dark"] body.arcprod-tenant .stats-container .btn-stats.btn-stats-icon:hover { background: rgba(255, 255, 255, 0.08) !important; color: var(--primary-color, #384376) !important; } /* Stat items dark : transparents, minimaux */ html[data-theme="dark"] body.arcprod-tenant .stats-container .stat-item { background: transparent !important; border-color: rgba(84, 84, 88, 0.35) !important; } /* Lang items : tints sémantiques assombris */ /* Lang items dark : transparents, sans fond coloré */ html[data-theme="dark"] body.arcprod-tenant .stats-container .lang-item.fr-only, html[data-theme="dark"] body.arcprod-tenant .stats-container .lang-item.partial-en, html[data-theme="dark"] body.arcprod-tenant .stats-container .lang-item.fully-bilingual { background: transparent !important; border-color: rgba(84, 84, 88, 0.35) !important; } /* lang-code + lang-percentage dark */ html[data-theme="dark"] body.arcprod-tenant .stats-container .lang-code { background: rgba(84, 84, 88, 0.35) !important; border-color: rgba(84, 84, 88, 0.5) !important; color: rgba(235, 235, 245, 0.55) !important; } html[data-theme="dark"] body.arcprod-tenant .stats-container .lang-percentage { background: rgba(84, 84, 88, 0.25) !important; border-color: rgba(84, 84, 88, 0.4) !important; } /* Section total (cercle) dark : transparent */ html[data-theme="dark"] body.arcprod-tenant .stats-container .section-total { background: transparent !important; border-color: rgba(84, 84, 88, 0.45) !important; color: rgba(235, 235, 245, 0.55) !important; } /* Section header separator dark : supprimé */ html[data-theme="dark"] body.arcprod-tenant .stats-container .section-header { border-bottom: none !important; } /* Séparateurs dark : supprimés (fond noir sépare visuellement) */ html[data-theme="dark"] body.arcprod-tenant .stats-container .stats-header { border-bottom: none !important; } html[data-theme="dark"] body.arcprod-tenant .stats-container .chart-card, html[data-theme="dark"] body.arcprod-tenant .stats-container .data-table-card { border-top: none !important; } /* data-table-header : fond clair → transparent en dark */ html[data-theme="dark"] body.arcprod-tenant .stats-container .data-table-header { background: transparent !important; border-bottom: none !important; } html[data-theme="dark"] body.arcprod-tenant .stats-container .chart-header { border-bottom: none !important; } html[data-theme="dark"] body.arcprod-tenant .stats-container .data-table th { border-bottom-color: rgba(84, 84, 88, 0.45) !important; } html[data-theme="dark"] body.arcprod-tenant .stats-container .data-table td { border-bottom-color: rgba(84, 84, 88, 0.30) !important; } /* Couverture multilingue dark : transparent, sans contour */ html[data-theme="dark"] body.arcprod-tenant .stats-container .multilingual-summary { background: transparent !important; border: none !important; box-shadow: none !important; } html[data-theme="dark"] body.arcprod-tenant .stats-container .content-type-section { background: transparent !important; border: none !important; box-shadow: none !important; } /* === Segmented control tabs — dark mode === */ html[data-theme="dark"] body.arcprod-tenant .reports-container .alert-warning { background: rgba(245, 158, 11, 0.15) !important; color: #fbbf24 !important; } html[data-theme="dark"] body.arcprod-tenant .reports-container .alert-success { background: rgba(34, 197, 94, 0.15) !important; color: #4ade80 !important; } html[data-theme="dark"] body.arcprod-tenant .reports-container .d-flex:has(> .btn-stats:not(.btn-stats-icon)) { background: rgba(118, 118, 128, 0.28) !important; } html[data-theme="dark"] body.arcprod-tenant .reports-container .d-flex:has(> .btn-stats:not(.btn-stats-icon)) .btn-stats { color: rgba(235, 235, 245, 0.55) !important; } html[data-theme="dark"] body.arcprod-tenant .reports-container .d-flex:has(> .btn-stats:not(.btn-stats-icon)) .btn-stats.primary { background: rgba(255, 255, 255, 0.14) !important; color: rgba(235, 235, 245, 0.95) !important; box-shadow: none !important; } html[data-theme="dark"] body.arcprod-tenant .reports-container .d-flex:has(> .btn-stats:not(.btn-stats-icon)) .btn-stats .badge { background: rgba(255, 255, 255, 0.12) !important; color: inherit !important; } /* === Status badges & pending pill — dark mode === */ html[data-theme="dark"] body.arcprod-tenant .status-badge.pending { background: rgba(245, 158, 11, 0.15) !important; color: #fbbf24 !important; border-color: rgba(245, 158, 11, 0.30) !important; } html[data-theme="dark"] body.arcprod-tenant .reports-container .report-status-badge.status-open { background: var(--report-status-open-bg) !important; color: var(--report-status-open-text) !important; border-color: var(--report-status-open-border) !important; } html[data-theme="dark"] body.arcprod-tenant .reports-container .report-status-badge.status-resolved { background: var(--report-status-resolved-bg) !important; color: var(--report-status-resolved-text) !important; border-color: var(--report-status-resolved-border) !important; } html[data-theme="dark"] body.arcprod-tenant .reports-container .report-status-badge.status-rejected { background: var(--report-status-rejected-bg) !important; color: var(--report-status-rejected-text) !important; border-color: var(--report-status-rejected-border) !important; } /* ============================================================ §R — Audit tenant : Apple flat dark mode Correctif : forum_reports.css impose color:#0f172a !important sur .reports-container .stats-header .stats-title (spécificité 0,3,1) et son override dark mode exclut .tenant-audit-header via :not() ============================================================ */ /* Titre + sous-titre : correctif couleur (spécificité 0,6,1 bat 0,3,1) */ html[data-theme="dark"] body.arcprod-tenant .reports-container .stats-header.tenant-audit-header .stats-title, html[data-theme="dark"] body.arcprod-tenant .reports-container .tenant-audit-header .stats-title { color: rgba(235, 235, 245, 0.92) !important; } html[data-theme="dark"] body.arcprod-tenant .reports-container .stats-header.tenant-audit-header .stats-subtitle, html[data-theme="dark"] body.arcprod-tenant .reports-container .tenant-audit-header .stats-subtitle { color: rgba(235, 235, 245, 0.60) !important; } /* Back link : transparent, sans contour — Apple style */ html[data-theme="dark"] body.arcprod-tenant .tenant-audit-back-link { background: transparent !important; border: none !important; color: rgba(235, 235, 245, 0.50) !important; } html[data-theme="dark"] body.arcprod-tenant .tenant-audit-back-link:hover { background: transparent !important; border: none !important; color: rgba(235, 235, 245, 0.88) !important; } /* Metric cards : transparents, bordure subtile */ html[data-theme="dark"] body.arcprod-tenant .stats-container .tenant-audit-metric.metric-card { background: transparent !important; border-color: rgba(84, 84, 88, 0.40) !important; box-shadow: none !important; } /* Icônes metric : muted en dark */ html[data-theme="dark"] body.arcprod-tenant .stats-container .tenant-audit-metric .metric-icon { color: rgba(235, 235, 245, 0.60) !important; } html[data-theme="dark"] body.arcprod-tenant .stats-container .tenant-audit-delete .metric-icon { color: rgba(239, 68, 68, 0.60) !important; } /* Valeurs chiffrées : visibles */ html[data-theme="dark"] body.arcprod-tenant .stats-container .tenant-audit-metric .metric-value { color: rgba(235, 235, 245, 0.92) !important; } html[data-theme="dark"] body.arcprod-tenant .stats-container .tenant-audit-metric .metric-label { color: rgba(235, 235, 245, 0.60) !important; } /* Boutons secondary en dark mode — background forcé pour battre base.css */ html[data-theme="dark"] body.arcprod-tenant .stats-container .btn-stats.secondary, html[data-theme="dark"] body.arcprod-tenant .reports-container .btn-stats.secondary { background: rgba(44, 44, 46, 1) !important; color: rgba(235, 235, 245, 0.88) !important; border-color: rgba(84, 84, 88, 0.55) !important; } html[data-theme="dark"] body.arcprod-tenant .stats-container .btn-stats.secondary:hover, html[data-theme="dark"] body.arcprod-tenant .reports-container .btn-stats.secondary:hover { background: rgba(58, 58, 60, 1) !important; color: rgba(235, 235, 245, 1) !important; } html[data-theme="dark"] body.arcprod-tenant .stats-container .btn-stats.secondary .badge, html[data-theme="dark"] body.arcprod-tenant .reports-container .btn-stats.secondary .badge { background: rgba(72, 72, 74, 1) !important; color: rgba(235, 235, 245, 0.80) !important; border: none !important; } /* Icon-only bare variant must stay frame-less even when .btn-stats.secondary is dark-themed. */ html[data-theme="dark"] body.arcprod-tenant :is(.stats-container, .reports-container) .stats-actions .btn-stats.btn-stats-icon.xh-icon-only-btn--bare, html[data-theme="dark"] body.arcprod-tenant :is(.stats-container, .reports-container) .stats-actions .btn-stats.btn-stats-icon.xh-icon-only-btn--bare:hover, html[data-theme="dark"] body.arcprod-tenant :is(.stats-container, .reports-container) .stats-actions .btn-stats.btn-stats-icon.xh-icon-only-btn--bare:focus-visible { background: transparent !important; border: 0 !important; border-color: transparent !important; box-shadow: none !important; border-radius: 0 !important; } /* Lignes tableau audit : tints très discrets en dark */ html[data-theme="dark"] body.arcprod-tenant .tenant-audit-row-create { background: rgba(34, 197, 94, 0.03) !important; } html[data-theme="dark"] body.arcprod-tenant .tenant-audit-row-update { background: rgba(245, 158, 11, 0.03) !important; } html[data-theme="dark"] body.arcprod-tenant .tenant-audit-row-delete { background: rgba(239, 68, 68, 0.04) !important; } /* Action badges (code monospace) : couleurs adaptées dark */ html[data-theme="dark"] body.arcprod-tenant .stats-container .audit-action-badge, html[data-theme="dark"] body.arcprod-tenant .stats-container td code { background: rgba(84, 84, 88, 0.35) !important; color: rgba(235, 235, 245, 0.75) !important; border-color: rgba(84, 84, 88, 0.50) !important; } /* Liens dans le tableau : primary color adapté dark */ html[data-theme="dark"] body.arcprod-tenant .stats-container .data-table td a:not([class]), html[data-theme="dark"] body.arcprod-tenant .stats-container .tenant-audit-summary-link { color: var(--primary-color, #384376) !important; opacity: 0.88; } /* ===== Global search — overlay mobile dark mode ===== */ @media (max-width: 767.98px) { html[data-theme="dark"] body.arcprod-tenant .global-search-container.search-expanded { background: rgba(28, 28, 30, 0.96) !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45) !important; border-bottom: 1px solid rgba(84, 84, 88, 0.40) !important; } html[data-theme="dark"] body.arcprod-tenant .global-search-mobile-close:hover { background: rgba(255, 255, 255, 0.10) !important; } }