/* ========================================================================== DÉPANN'UP — Couche de thème unifiée (V3.5) -------------------------------------------------------------------------- Chargée en DERNIER (après style.css et v3.css) depuis includes/header.php. Toutes les couleurs passent par les variables --dt-* définies ci-dessous pour le thème sombre et le thème clair : un tableau ou un composant ne garde plus de couleur « sombre » codée en dur quand on passe en clair (et inversement). Contraste texte/fond ≥ 4,5:1 (WCAG AA) pour chaque couple de couleurs. Ne sont pas concernés : la page de connexion (body.login-view), qui garde son habillage sombre, et le mode capture Discord (body.discord-capture), qui conserve son propre rendu clair prévu pour les captures. ========================================================================== */ /* --- 1. Palette ---------------------------------------------------------- */ body.v3, :root[data-theme="dark"] body.v3{ /* V4 : couleurs du logo — bleu nuit du camion, rouge DÉPANN'UP */ --dt-page:#0B1622; --dt-card:#102032; /* cartes, panneaux */ --dt-surface-2:#16293D; /* zones secondaires, pieds de tableau */ --dt-head:#16293D; /* en-têtes de tableaux */ --dt-row:#102032; /* lignes de tableaux */ --dt-row-alt:#0E1C2C; /* une ligne sur deux */ --dt-row-hover:#15304B; --dt-input:#0B1622; --dt-code-bg:#0B1622; --dt-chip-bg:rgba(157,177,197,.14); --dt-locked:#16293D; --dt-text:#DCE6F0; --dt-strong:#F3F7FB; --dt-muted:#9DB1C5; --dt-head-text:#9DB1C5; --dt-code-text:#DCE6F0; --dt-accent:#7FB2E5; /* liens, repères */ --dt-eyebrow:#FF8A7E; --dt-money:#48C891; --dt-warn:#F7C46E; --dt-danger:#FF8A7E; --dt-border:#22384F; --dt-border-strong:#33506C; --dt-border-hot:#4F95D6; --dt-shadow:0 10px 30px rgba(0,0,0,.22); --dt-tint-direction:#172A48; --dt-tint-total:#143A5E; --dt-tint-green:#11301F; --dt-tint-red:#3A1D22; --dt-tint-amber:#33290F; --dt-icon-bg:#13304D; --dt-btn:#D52B1E; --dt-red:#D52B1E; --dt-navy:#1B5584; --dt-nav-active:#13304D; --dt-nav-icon:#FF7466; --dt-side:#08111B; } :root[data-theme="light"] body.v3{ --dt-page:#F2F5F8; --dt-card:#FFFFFF; --dt-surface-2:#EDF2F7; --dt-head:#EDF2F7; --dt-row:#FFFFFF; --dt-row-alt:#F7F9FB; --dt-row-hover:#E3EDF7; --dt-input:#FFFFFF; --dt-code-bg:#F2F5F8; --dt-chip-bg:#EDF2F7; --dt-locked:#EDF2F7; --dt-text:#24313F; --dt-strong:#0F1B29; --dt-muted:#526275; --dt-head-text:#3D4C5E; --dt-code-text:#24313F; --dt-accent:#1B5584; --dt-eyebrow:#B3231A; --dt-money:#10744A; --dt-warn:#6E4300; --dt-danger:#9A1F17; --dt-border:#DCE4EC; --dt-border-strong:#BFCBD8; --dt-border-hot:rgba(27,85,132,.45); --dt-shadow:0 8px 24px rgba(15,27,41,.06); --dt-tint-direction:#EAF1F8; --dt-tint-total:#E3EDF7; --dt-tint-green:#DDF3E7; --dt-tint-red:#FBE3E1; --dt-tint-amber:#FCEBCC; --dt-icon-bg:#E3EDF7; --dt-btn:#D52B1E; --dt-red:#D52B1E; --dt-navy:#1B5584; --dt-nav-active:#E3EDF7; --dt-nav-icon:#D52B1E; --dt-side:#FFFFFF; /* variables historiques utilisées par les styles intégrés aux pages */ --surface:#ffffff;--surface-2:#EDF2F7;--surface-3:#E3EDF7; --text:#24313F;--muted:#526275;--line:#DCE4EC;--line-strong:#BFCBD8; --primary-soft:#E3EDF7;--primary-strong:#1B5584; } /* --- 2. Textes de page ---------------------------------------------------- */ :root[data-theme] body.v3.app-view:not(.discord-capture) main{color:var(--dt-text)} :root[data-theme] body.v3.app-view:not(.discord-capture) main :is(h1,h2,h3,h4,.title):not(:is(.tax-summary,.capture-brand,.repair-guide-title) *){color:var(--dt-strong)!important} :root[data-theme] body.v3.app-view:not(.discord-capture) :is(.panel-title h2,.panelx h2,.menu-heading strong,.account-section-head h2,.notification-empty h2,.discord-empty h3){color:var(--dt-strong)!important} :root[data-theme] body.v3.app-view:not(.discord-capture) main :is(.subtitle,.muted,.menu-heading small,.menu-side,.panel-label,.section-kicker,.week-dates small,.personal-toolbar p,.card-heading p,.service-card-head p,.payroll-panel-head p){color:var(--dt-muted)!important} :root[data-theme] body.v3.app-view:not(.discord-capture) main .eyebrow{color:var(--dt-eyebrow)!important} :root[data-theme] body.v3.app-view:not(.discord-capture) main :is(.field,.fg) > label{color:var(--dt-head-text)!important} :root[data-theme] body.v3.app-view:not(.discord-capture) main :is(.cell-main){color:var(--dt-strong)!important} :root[data-theme] body.v3.app-view:not(.discord-capture) main :is(.cell-sub){color:var(--dt-muted)!important} :root[data-theme] body.v3.app-view:not(.discord-capture) main .money{color:var(--dt-money)!important} :where(:root[data-theme] body.v3.app-view:not(.discord-capture) main) a:not([class]){color:var(--dt-accent)} :root[data-theme] body.v3.app-view:not(.discord-capture) main :is(.back-link,.payslip-link,.document-body a,.file-button span,.payroll-history-link){color:var(--dt-accent)!important} /* --- 3. Tableaux (toutes les classes : tbl, daytable, payroll-table, …) --- */ :root[data-theme] body.v3.app-view:not(.discord-capture) main table{color:var(--dt-text)} :root[data-theme] body.v3.app-view:not(.discord-capture) main :is(.modern-table-wrap,.payroll-table-wrap,.history-table-wrap,.profile-salary-wrap,.table-wrap,.service-table-wrap,.custom-table-wrap){background:var(--dt-surface-2)!important;border-color:var(--dt-border)!important} :root[data-theme] body.v3.app-view:not(.discord-capture) main table thead th{ background:var(--dt-head)!important;color:var(--dt-head-text)!important;border-color:var(--dt-border)!important } :root[data-theme] body.v3.app-view:not(.discord-capture) main table tbody :is(td,th){ background:var(--dt-row)!important;color:var(--dt-text)!important;border-color:var(--dt-border)!important;box-shadow:none!important;filter:none!important } :root[data-theme] body.v3.app-view:not(.discord-capture) main table tbody tr:nth-child(even) > :is(td,th){background:var(--dt-row-alt)!important} :root[data-theme] body.v3.app-view:not(.discord-capture) main table tbody tr:hover > :is(td,th){background:var(--dt-row-hover)!important;border-color:var(--dt-border-hot)!important} :root[data-theme] body.v3.app-view:not(.discord-capture) main table tbody th{color:var(--dt-strong)!important;font-weight:750} :root[data-theme] body.v3.app-view:not(.discord-capture) main table tfoot :is(td,th){ background:var(--dt-surface-2)!important;color:var(--dt-strong)!important;border-color:var(--dt-border)!important;font-weight:850 } /* lignes à sens particulier : on garde leur teinte, lisible dans les deux thèmes */ :root[data-theme] body.v3.app-view:not(.discord-capture) main table tbody tr.direction-row > :is(td,th){background:var(--dt-tint-direction)!important} :root[data-theme] body.v3.app-view:not(.discord-capture) main table tbody tr.total > :is(td,th){background:var(--dt-tint-total)!important;color:var(--dt-strong)!important;font-weight:800} :root[data-theme] body.v3.app-view:not(.discord-capture) main table tbody tr.green > :is(td,th){background:var(--dt-tint-green)!important;color:var(--dt-strong)!important} :root[data-theme] body.v3.app-view:not(.discord-capture) main table tbody tr.red > :is(td,th){background:var(--dt-tint-red)!important;color:var(--dt-danger)!important} :root[data-theme] body.v3.app-view:not(.discord-capture) main table tbody tr.after-close-row > :is(td,th){background:var(--dt-tint-amber)!important;color:var(--dt-warn)!important} :root[data-theme] body.v3.app-view:not(.discord-capture) main table tbody td.locked{background:var(--dt-locked)!important;color:var(--dt-muted)!important} /* contenu des cellules */ :root[data-theme] body.v3.app-view:not(.discord-capture) main table a:not([class*="btn"]):not(.action-icon):not(.action-link){color:var(--dt-accent)!important} :root[data-theme] body.v3.app-view:not(.discord-capture) main table :is(.salary-cell,.hours-cell,.total-cell) strong, :root[data-theme] body.v3.app-view:not(.discord-capture) main table :is(.employee-link,.employee-identity) strong{color:var(--dt-strong)!important} :root[data-theme] body.v3.app-view:not(.discord-capture) main table :is(.salary-cell,.hours-cell,.employee-link,.employee-identity,.cap-cell) small, :root[data-theme] body.v3.app-view:not(.discord-capture) main table td > small, :root[data-theme] body.v3.app-view:not(.discord-capture) main :is(.history-table,.payroll-table) small{color:var(--dt-muted)!important} :root[data-theme] body.v3.app-view:not(.discord-capture) main table .total-cell small{color:var(--dt-warn)!important} :root[data-theme] body.v3.app-view:not(.discord-capture) main table .cap-cell{color:var(--dt-muted)!important} :root[data-theme] body.v3.app-view:not(.discord-capture) main table .money-input span{color:var(--dt-muted)!important} :root[data-theme] body.v3.app-view:not(.discord-capture) main :is(.rank,.duration-pill){background:var(--dt-chip-bg)!important;color:var(--dt-strong)!important} :root[data-theme] body.v3.app-view:not(.discord-capture) main :is(.action-icon,.action-link){background:var(--dt-chip-bg)!important;border-color:var(--dt-border-strong)!important;color:var(--dt-head-text)!important} :root[data-theme] body.v3.app-view:not(.discord-capture) main :is(.action-icon,.action-link):hover{border-color:var(--dt-border-hot)!important;color:var(--dt-accent)!important} /* --- 4. Pastilles (grades, statuts, compteurs) ---------------------------- */ :root[data-theme] body.v3.app-view:not(.discord-capture) main :is(.grade-gold,.grade-red,.grade-green,.grade-purple,.grade-blue,.grade-teal,.grade-gray){filter:none!important} :root[data-theme="light"] body.v3.app-view:not(.discord-capture) main .grade-gold{background:#ffedb1!important;color:#6b4d00!important} :root[data-theme="light"] body.v3.app-view:not(.discord-capture) main .grade-red{background:#ffe0de!important;color:#9b231d!important} :root[data-theme="light"] body.v3.app-view:not(.discord-capture) main .grade-green{background:#d9f6e7!important;color:#07704a!important} :root[data-theme="light"] body.v3.app-view:not(.discord-capture) main .grade-purple{background:#efdefa!important;color:#6a338f!important} :root[data-theme="light"] body.v3.app-view:not(.discord-capture) main .grade-blue{background:#dceaff!important;color:#174f8f!important} :root[data-theme="light"] body.v3.app-view:not(.discord-capture) main .grade-teal{background:#dff2f4!important;color:#23606f!important} :root[data-theme="light"] body.v3.app-view:not(.discord-capture) main .grade-gray{background:#e9edf2!important;color:#4a5a6e!important} :root[data-theme="dark"] body.v3.app-view:not(.discord-capture) main .grade-gold{background:rgba(255,196,0,.16)!important;color:#ffd46b!important} :root[data-theme="dark"] body.v3.app-view:not(.discord-capture) main .grade-red{background:rgba(255,99,90,.17)!important;color:#ffaaa4!important} :root[data-theme="dark"] body.v3.app-view:not(.discord-capture) main .grade-green{background:rgba(41,226,154,.14)!important;color:#6ee7b3!important} :root[data-theme="dark"] body.v3.app-view:not(.discord-capture) main .grade-purple{background:rgba(186,120,255,.18)!important;color:#d6b0ff!important} :root[data-theme="dark"] body.v3.app-view:not(.discord-capture) main .grade-blue{background:rgba(98,160,255,.18)!important;color:#a9c8ff!important} :root[data-theme="dark"] body.v3.app-view:not(.discord-capture) main .grade-teal{background:rgba(64,200,210,.16)!important;color:#8ee3ea!important} :root[data-theme="dark"] body.v3.app-view:not(.discord-capture) main .grade-gray{background:rgba(160,175,195,.16)!important;color:#c3cfdc!important} /* Totals de réparations (tableau des salaires) : code couleur de l'ancien Google Sheets */ :root[data-theme] body.v3.app-view:not(.discord-capture) main .quota-pill{display:inline-block;min-width:38px;padding:4px 9px;border-radius:999px;font-size:11px;font-weight:850;text-align:center} :root[data-theme="light"] body.v3.app-view:not(.discord-capture) main .quota-green{background:#d9f6e7;color:#07704a} :root[data-theme="light"] body.v3.app-view:not(.discord-capture) main .quota-yellow{background:#fff1c7;color:#7a5200} :root[data-theme="light"] body.v3.app-view:not(.discord-capture) main .quota-red{background:#ffe0de;color:#9b231d} :root[data-theme="dark"] body.v3.app-view:not(.discord-capture) main .quota-green{background:rgba(41,226,154,.15);color:#6ee7b3} :root[data-theme="dark"] body.v3.app-view:not(.discord-capture) main .quota-yellow{background:rgba(255,196,0,.16);color:#ffd46b} :root[data-theme="dark"] body.v3.app-view:not(.discord-capture) main .quota-red{background:rgba(255,99,90,.17);color:#ffaaa4} :root[data-theme] body.v3.app-view:not(.discord-capture) main .quota-legend{display:flex;align-items:center;gap:6px;color:var(--dt-muted)} :root[data-theme] body.v3.app-view:not(.discord-capture) main .quota-legend .quota-pill{min-width:0;font-size:9px;padding:3px 7px} :root[data-theme] body.v3.app-view:not(.discord-capture) main .payroll-table .num{white-space:nowrap} :root[data-theme] body.v3.app-view:not(.discord-capture) main :is(.count-badge,.total-pill,.warning-none,.profile-tags span:not(.state)){background:var(--dt-chip-bg)!important;color:var(--dt-head-text)!important} :root[data-theme] body.v3.app-view:not(.discord-capture) main .status-present{color:var(--dt-money)!important} :root[data-theme] body.v3.app-view:not(.discord-capture) main .status-absent{color:var(--dt-danger)!important} :root[data-theme] body.v3.app-view:not(.discord-capture) main .auto-badge{background:var(--dt-tint-green)!important;color:var(--dt-money)!important} :root[data-theme] body.v3.app-view:not(.discord-capture) main :is(.avatar,.employee-avatar,.service-avatar,.identity-avatar){background:linear-gradient(135deg,#2456d0,#1678b3)!important;color:#fff!important} :root[data-theme] body.v3.app-view:not(.discord-capture) main .week-number{background:#1f56c9!important;color:#fff!important} :root[data-theme] body.v3.app-view:not(.discord-capture) main :is(.period-open,.period-status,.rct-state.open,.account-security){color:var(--dt-money)!important} :root[data-theme] body.v3.app-view:not(.discord-capture) main .profile-tags span:not(.state){color:var(--dt-strong)!important} :root[data-theme="light"] body.v3.app-view:not(.discord-capture) main .discord-mark{color:#4b55c7!important} /* --- 5. Boutons ------------------------------------------------------------ */ :root[data-theme] body.v3.app-view:not(.discord-capture) :is(.btn:not(.btn-outline):not(.discord-connect-btn),.save-cell button){background:var(--dt-btn)!important;color:#fff!important} :root[data-theme="light"] body.v3.app-view:not(.discord-capture) .btn-outline{background:rgba(10,95,156,.06)!important;border-color:rgba(10,95,156,.35)!important;color:var(--dt-accent)!important} /* --- 6. Cartes chiffrées (KPI) --------------------------------------------- */ :root[data-theme] body.v3.app-view:not(.discord-capture) main :is(.staff-stats>*,.payroll-kpis>*,.service-kpis>*,.month-kpis>*,.archive-kpis>*,.quick-stats>*,.kpi,.employee-kpis>div,.mk,.ak,.notification-stats>div,.slip-breakdown article){ background:var(--dt-card)!important;border-color:var(--dt-border)!important;color:var(--dt-text)!important;box-shadow:var(--dt-shadow)!important } :root[data-theme] body.v3.app-view:not(.discord-capture) main :is(.staff-stats>*,.payroll-kpis>*,.service-kpis>*,.month-kpis>*,.archive-kpis>*,.quick-stats>*,.kpi,.employee-kpis>div,.mk,.ak,.notification-stats>div,.slip-breakdown article) :is(small,em,span:not(.kpi-icon):not(.kpi-letter)){color:var(--dt-muted)!important} :root[data-theme] body.v3.app-view:not(.discord-capture) main :is(.staff-stats>*,.payroll-kpis>*,.service-kpis>*,.month-kpis>*,.archive-kpis>*,.quick-stats>*,.kpi,.employee-kpis>div,.mk,.ak,.notification-stats>div,.slip-breakdown article) :is(strong,b){color:var(--dt-strong)!important} :root[data-theme] body.v3.app-view:not(.discord-capture) main .kpi.service-live strong{color:var(--dt-money)!important} :root[data-theme] body.v3.app-view:not(.discord-capture) main :is(.kpi-icon,.kpi-letter,.menu-icon,.account-icon,.notification-type){background:var(--dt-icon-bg)!important;color:var(--dt-accent)!important;border-color:var(--dt-border)!important} /* --- 7. Sections dépliables, panneaux, fiches ----------------------------- */ :root[data-theme="light"] body.v3.app-view:not(.discord-capture) main :is(.panel,.panelx,.card,.weekbar,.dashboard-menu,.employee-card,.profile-hero,.action-card,.document-card,.slip-panel,.payroll-panel,.history-panel,.archive-card,.rct-card,.service-card,.notification-list,.modal-card,.profile-modal-card,.archive,.repair-guide-card){background:var(--dt-card)!important;border-color:var(--dt-border)!important;box-shadow:var(--dt-shadow)!important} :root[data-theme] body.v3.app-view:not(.discord-capture) main :is(.dashboard-menu,.archive-card,.rct-card) > summary{background:var(--dt-card)!important;border-color:var(--dt-border)!important;color:var(--dt-text)!important} :root[data-theme] body.v3.app-view:not(.discord-capture) main :is(.dashboard-menu,.archive-card,.rct-card)[open] > summary{background:var(--dt-surface-2)!important;border-bottom:1px solid var(--dt-border)!important} :root[data-theme] body.v3.app-view:not(.discord-capture) main :is(.dashboard-menu,.archive-card,.rct-card) > summary :is(strong,.archive-title){color:var(--dt-strong)!important} :root[data-theme] body.v3.app-view:not(.discord-capture) main :is(.dashboard-menu,.archive-card,.rct-card) > summary :is(small,.muted,span:not([class*="grade-"]):not([class*="status"]):not(.menu-icon):not(.menu-arrow):not(.count-badge)){color:var(--dt-muted)!important} :root[data-theme] body.v3.app-view:not(.discord-capture) main .menu-arrow{background:var(--dt-surface-2)!important;border:1px solid var(--dt-border);color:var(--dt-strong)!important} :root[data-theme] body.v3.app-view:not(.discord-capture) main .dashboard-menu-body{background:var(--dt-surface-2)!important} :root[data-theme="light"] body.v3.app-view:not(.discord-capture) main .dashboard-hero{background:linear-gradient(115deg,#fff,#f4f8fd 58%,#eef7fb)!important;border-color:var(--dt-border)!important;box-shadow:var(--dt-shadow)} /* accès rapides Direction (tableau de bord) */ :root[data-theme="light"] body.v3.app-view:not(.discord-capture) main .direction-links a{background:var(--dt-surface-2)!important;border-color:var(--dt-border-strong)!important;color:var(--dt-strong)!important} :root[data-theme="light"] body.v3.app-view:not(.discord-capture) main .direction-links a:hover{background:var(--dt-row-hover)!important;border-color:var(--dt-border-hot)!important;color:var(--dt-accent)!important} :root[data-theme] body.v3.app-view:not(.discord-capture) main .direction-links a span{color:var(--dt-head-text)!important} :root[data-theme="light"] body.v3.app-view:not(.discord-capture) main :is(.dashboard-menu-body,.archive-body){color:var(--dt-text)} :root[data-theme] body.v3.app-view:not(.discord-capture) main :is(.staff-search,.salary-search,.history-search){background:var(--dt-input)!important;border-color:var(--dt-border-strong)!important;color:var(--dt-muted)!important} :root[data-theme] body.v3.app-view:not(.discord-capture) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),select,textarea){background:var(--dt-input)!important;color:var(--dt-strong)!important;border-color:var(--dt-border-strong)!important} :root[data-theme] body.v3.app-view:not(.discord-capture) main :is(.staff-search,.salary-search,.history-search) input{background:transparent!important} :root[data-theme] body.v3.app-view:not(.discord-capture) :is(input,textarea)::placeholder{color:var(--dt-muted)!important;opacity:1} :root[data-theme] body.v3.app-view:not(.discord-capture) main :is(.empty-state,.empty-history,.salary-empty,.history-empty,.service-empty,.blocked-note){background:var(--dt-surface-2)!important;border-color:var(--dt-border-strong)!important;color:var(--dt-muted)!important} :root[data-theme] body.v3.app-view:not(.discord-capture) main :is(.document-preview,.proofbox,.itemrow,.repair-guide-prices,.repair-guide-list,.slip-identity div,.archived-slip header,.identity-card,.discord-profile){background:var(--dt-surface-2)!important;border-color:var(--dt-border)!important;color:var(--dt-text)!important} :root[data-theme] body.v3.app-view:not(.discord-capture) main :is(.repair-guide-prices,.repair-guide-list,.identity-card,.discord-profile) strong{color:var(--dt-strong)!important} :root[data-theme] body.v3.app-view:not(.discord-capture) main .slip-identity{background:var(--dt-border)!important} :root[data-theme] body.v3.app-view:not(.discord-capture) main .archived-grid span{color:var(--dt-muted)!important} :root[data-theme] body.v3.app-view:not(.discord-capture) main .archived-grid b{color:var(--dt-strong)!important} /* textes secondaires codés en gris clair (#667085, #7a8798) dans les styles propres aux pages */ :root[data-theme] body.v3.app-view:not(.discord-capture) main :is(.document-body small,.action-head p,.section-heading p,.staff-search span,summary small,.slip-heading p,.estimate-note,.slip-identity span,.archived-slip header small,.archived-grid small,dl dt,time small,.activity-list span){color:var(--dt-muted)!important} :root[data-theme] body.v3.app-view:not(.discord-capture) main :is(.seniority-value,.slip-identity strong,.archived-slip header span,.slip-header-actions strong,.big-total,.activity-list strong,dl dd){color:var(--dt-strong)!important} :root[data-theme] body.v3.app-view:not(.discord-capture) main :is(.repair-guide-list,.repair-guide-prices) span{color:var(--dt-text)!important} :root[data-theme] body.v3.app-view:not(.discord-capture) main .proof-box label{color:var(--dt-text)!important} :root[data-theme] body.v3.app-view:not(.discord-capture) main :is(.danger-note){background:var(--dt-tint-amber)!important;color:var(--dt-warn)!important} :root[data-theme] body.v3.app-view:not(.discord-capture) main :is(.success-note){background:var(--dt-tint-green)!important;color:var(--dt-money)!important} /* --- 8. Historique ---------------------------------------------------------- */ :root[data-theme] body.v3.app-view:not(.discord-capture) main .history-row{background:var(--dt-card)!important;border:1px solid var(--dt-border)!important;border-left:4px solid var(--dt-accent)!important;color:var(--dt-text)!important} :root[data-theme] body.v3.app-view:not(.discord-capture) main .history-row:hover{border-color:var(--dt-border-hot)!important;border-left-color:var(--dt-accent)!important} :root[data-theme] body.v3.app-view:not(.discord-capture) main .history-date{color:var(--dt-muted)!important} :root[data-theme] body.v3.app-view:not(.discord-capture) main .history-date strong{color:var(--dt-text)!important} :root[data-theme] body.v3.app-view:not(.discord-capture) main :is(.history-user,.history-main > strong,.history-changes strong){color:var(--dt-strong)!important} :root[data-theme] body.v3.app-view:not(.discord-capture) main :is(.history-target,.history-details,.history-summary){color:var(--dt-muted)!important} :root[data-theme] body.v3.app-view:not(.discord-capture) main .history-summary strong{color:var(--dt-text)!important} :root[data-theme] body.v3.app-view:not(.discord-capture) main .history-changes summary{color:var(--dt-accent)!important} :root[data-theme] body.v3.app-view:not(.discord-capture) main .history-module{background:var(--dt-icon-bg)!important;color:var(--dt-accent)!important} :root[data-theme] body.v3.app-view:not(.discord-capture) main pre{background:var(--dt-code-bg)!important;color:var(--dt-code-text)!important;border-color:var(--dt-border)!important} /* --- 9. Notifications, compte, recrutements --------------------------------- */ :root[data-theme] body.v3.app-view:not(.discord-capture) main .notification-row{border-color:var(--dt-border)!important;background:var(--dt-card)!important} :root[data-theme] body.v3.app-view:not(.discord-capture) main .notification-row.unread{background:var(--dt-row-hover)!important} :root[data-theme] body.v3.app-view:not(.discord-capture) main .notification-row.read{opacity:1!important} :root[data-theme] body.v3.app-view:not(.discord-capture) main .notification-row.read :is(strong,p){color:var(--dt-muted)!important} :root[data-theme] body.v3.app-view:not(.discord-capture) main .notification-title strong{color:var(--dt-strong)!important} :root[data-theme] body.v3.app-view:not(.discord-capture) main :is(.notification-title time,.notification-row p,.notification-empty p,.discord-empty p,.discord-connect-card > p,.account-data dt,.account-section-head small,.identity-card span:not(.identity-avatar),.discord-profile small,.connection-state){color:var(--dt-muted)!important} :root[data-theme] body.v3.app-view:not(.discord-capture) main :is(.notification-actions a,.notification-actions button){color:var(--dt-accent)!important} :root[data-theme] body.v3.app-view:not(.discord-capture) main .account-data dd{color:var(--dt-text)!important} :root[data-theme] body.v3.app-view:not(.discord-capture) main .connected .connection-state{color:var(--dt-money)!important} :root[data-theme] body.v3.app-view:not(.discord-capture) main .rct-filters a{background:var(--dt-card)!important;border-color:var(--dt-border-strong)!important;color:var(--dt-head-text)!important} :root[data-theme] body.v3.app-view:not(.discord-capture) main .rct-filters a:hover{color:var(--dt-accent)!important;border-color:var(--dt-border-hot)!important} /* --- 10. Tableaux coupés ----------------------------------------------------- La largeur minimale de 760px (V3.2) n'a de sens que dans un conteneur qui défile. Dans un panneau à overflow:hidden (synthèse financière, contrats, archives, factures) elle masquait les colonnes de droite (montants, PDF). */ :root[data-theme] body.v3.app-view:not(.discord-capture) main table:not(:is(.modern-table-wrap,.payroll-table-wrap,.history-table-wrap,.profile-salary-wrap,.table-wrap,.service-table-wrap,.custom-table-wrap,[style*="overflow"]) > table){min-width:0!important} /* si l'écran est trop étroit, le tableau défile au lieu d'être coupé */ :root[data-theme] body.v3.app-view:not(.discord-capture) main :is(.panel,.panelx,.employee-card,.two > section,.archive-body section){overflow-x:auto;min-width:0} /* Champs « Remplacer la photo » (fiche employé) : le champ fichier invisible débordait de 1 200px à droite et créait un défilement horizontal. */ :root[data-theme] body.v3.app-view:not(.discord-capture) main .file-button{position:relative;overflow:hidden} :root[data-theme] body.v3.app-view:not(.discord-capture) main .file-button input[type="file"]{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;min-height:0!important;padding:0!important;opacity:0!important;cursor:pointer} /* --- 11. Tableau des salaires : colonne « Employé » fixe au défilement -------- Avec les colonnes par contrat, le tableau est plus large que l'écran : le nom reste visible quand on fait défiler vers Recrutement / Administration / Total. */ :root[data-theme] body.v3.app-view:not(.discord-capture) main .payroll-table :is(thead th,tbody td):nth-child(2){position:sticky;left:0;z-index:2} :root[data-theme] body.v3.app-view:not(.discord-capture) main .payroll-table thead th:nth-child(2){z-index:4} :root[data-theme] body.v3.app-view:not(.discord-capture) main .payroll-table tbody td:nth-child(2){box-shadow:6px 0 12px -8px rgba(0,0,0,.35)!important} :root[data-theme] body.v3.app-view:not(.discord-capture) main .payroll-table .hours-cell :is(strong,small){display:block} /* --- 12. Barre du haut, menu latéral, menus déroulants ---------------------- */ body.v3,:root[data-theme="dark"] body.v3{--dt-faint:#8195ad} :root[data-theme="light"] body.v3{--dt-faint:#5a6c81} :root[data-theme] body.v3.app-view:not(.discord-capture) :is(.side-label,.nav-group > summary,.nav-group > summary *,.topbar-context small,.sidebar-brand small,.sidebar-user small,.profile-summary small,.profile-dropdown small,.profile-chevron,.notification-dropdown header small,.sidebar a em){color:var(--dt-faint)!important} :root[data-theme] body.v3.app-view:not(.discord-capture) :is(.sidebar-brand strong,.sidebar-user strong,.topbar-context strong,.profile-summary strong,.profile-dropdown strong,.notification-mini strong,.notification-dropdown header strong){color:var(--dt-strong)!important} :root[data-theme] body.v3.app-view:not(.discord-capture) .topbar-context small b{color:var(--dt-accent)!important} :root[data-theme] body.v3.app-view:not(.discord-capture) .topbar-quick a{color:var(--dt-head-text)!important} :root[data-theme] body.v3.app-view:not(.discord-capture) .topbar-quick a span{color:var(--dt-accent)!important} :root[data-theme] body.v3.app-view:not(.discord-capture) .profile-dropdown a{color:var(--dt-text)!important} :root[data-theme] body.v3.app-view:not(.discord-capture) .profile-dropdown a span{color:var(--dt-faint)!important} :root[data-theme] body.v3.app-view:not(.discord-capture) .profile-dropdown a:hover{color:var(--dt-accent)!important} :root[data-theme="light"] body.v3.app-view:not(.discord-capture) .profile-dropdown a.profile-logout, :root[data-theme="light"] body.v3.app-view:not(.discord-capture) .profile-dropdown a.profile-logout span{color:#b3261e!important} :root[data-theme] body.v3.app-view:not(.discord-capture) :is(.notification-dropdown header a,.notification-mini > span){color:var(--dt-accent)!important} :root[data-theme] body.v3.app-view:not(.discord-capture) .notification-mini small{color:var(--dt-muted)!important} :root[data-theme] body.v3.app-view:not(.discord-capture) .notification-menu summary b{background:#c81e45!important;color:#fff!important} :root[data-theme] body.v3.app-view:not(.discord-capture) .sidebar-user a{color:var(--dt-faint)!important} /* --- 13. Tableau des salaires façon Google Sheets (page Salaires) ----------- */ body.v3,:root[data-theme="dark"] body.v3{--sheet-head:#1B5584;--sheet-row:#102032;--sheet-row-alt:#0E1C2C;--sheet-line:#22384F;--sheet-text:#DCE6F0} :root[data-theme="light"] body.v3{--sheet-head:#1B5584;--sheet-row:#FFFFFF;--sheet-row-alt:#F4F7FA;--sheet-line:#DCE4EC;--sheet-text:#24313F} :root[data-theme] body.v3.app-view:not(.discord-capture) main .sheet-recap{margin:16px 0;border:1px solid var(--dt-border);border-radius:12px;overflow:hidden;background:var(--dt-card);box-shadow:var(--dt-shadow)} :root[data-theme] body.v3.app-view:not(.discord-capture) main .sheet-banner{display:grid;grid-template-columns:minmax(120px,1fr) 1.4fr 1.4fr minmax(120px,1fr);background:var(--sheet-head);color:#fff} :root[data-theme] body.v3.app-view:not(.discord-capture) main .sheet-banner>*{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:96px;padding:12px;border-left:1px solid rgba(255,255,255,.18)} :root[data-theme] body.v3.app-view:not(.discord-capture) main .sheet-banner>*:first-child{border-left:0} :root[data-theme] body.v3.app-view:not(.discord-capture) main .sheet-logo{width:auto;height:72px;object-fit:contain;margin:auto;padding:0!important;min-height:0!important;border:0!important} :root[data-theme] body.v3.app-view:not(.discord-capture) main .sheet-logo-mirror{transform:scaleX(-1)} :root[data-theme] body.v3.app-view:not(.discord-capture) main .sheet-figure strong{font-size:30px;font-weight:600;color:#fff!important;line-height:1.1;font-variant-numeric:tabular-nums} :root[data-theme] body.v3.app-view:not(.discord-capture) main .sheet-figure small{margin-top:6px;font-size:14px;letter-spacing:.02em;color:#fff!important} :root[data-theme] body.v3.app-view:not(.discord-capture) main .sheet-figure-icon{font-size:20px;line-height:1;margin-bottom:4px} :root[data-theme] body.v3.app-view:not(.discord-capture) main .sheet-table-wrap{overflow-x:auto} :root[data-theme] body.v3.app-view:not(.discord-capture) main table.sheet-table{width:100%;min-width:980px!important;border-collapse:collapse!important;border-spacing:0!important;padding:0!important;font-size:13px} :root[data-theme] body.v3.app-view:not(.discord-capture) main table.sheet-table thead th{position:static;height:auto;padding:8px 7px!important;background:var(--sheet-head)!important;color:#fff!important;font-size:13px!important;font-weight:700!important;letter-spacing:0!important;text-transform:none!important;text-align:center;border:1px solid rgba(255,255,255,.2)!important;border-radius:0!important;white-space:nowrap} :root[data-theme] body.v3.app-view:not(.discord-capture) main table.sheet-table tbody td{height:auto;padding:5px 7px!important;text-align:center;background:var(--sheet-row)!important;color:var(--sheet-text)!important;border:1px solid var(--sheet-line)!important;border-radius:0!important;font-variant-numeric:tabular-nums;white-space:nowrap} :root[data-theme] body.v3.app-view:not(.discord-capture) main table.sheet-table tbody tr:nth-child(even) td{background:var(--sheet-row-alt)!important} :root[data-theme] body.v3.app-view:not(.discord-capture) main table.sheet-table tbody tr:hover td{background:var(--dt-row-hover)!important} :root[data-theme] body.v3.app-view:not(.discord-capture) main table.sheet-table .sheet-name{color:var(--dt-strong)!important;font-weight:600} /* code couleur des totals, comme la mise en forme conditionnelle du Sheets */ :root[data-theme="light"] body.v3.app-view:not(.discord-capture) main table.sheet-table td.sheet-total.quota-green{background:#c8efd9!important;color:#07704a!important;font-weight:800} :root[data-theme="light"] body.v3.app-view:not(.discord-capture) main table.sheet-table td.sheet-total.quota-yellow{background:#fbe8a6!important;color:#6b4800!important;font-weight:800} :root[data-theme="light"] body.v3.app-view:not(.discord-capture) main table.sheet-table td.sheet-total.quota-red{background:#f4c7c7!important;color:#8e1f1a!important;font-weight:800} :root[data-theme="dark"] body.v3.app-view:not(.discord-capture) main table.sheet-table td.sheet-total.quota-green{background:#12382a!important;color:#7ff0bd!important;font-weight:800} :root[data-theme="dark"] body.v3.app-view:not(.discord-capture) main table.sheet-table td.sheet-total.quota-yellow{background:#3d3210!important;color:#ffd978!important;font-weight:800} :root[data-theme="dark"] body.v3.app-view:not(.discord-capture) main table.sheet-table td.sheet-total.quota-red{background:#44201f!important;color:#ffb3ad!important;font-weight:800} /* pastilles de grade pleines, comme dans le Sheets */ :root[data-theme] body.v3.app-view:not(.discord-capture) main .sheet-grade{display:block;min-width:118px;padding:2px 8px;border-radius:999px;font-size:12px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} :root[data-theme] body.v3.app-view:not(.discord-capture) main .sheet-gold{background:#d8ae3b;color:#5a1d10} :root[data-theme] body.v3.app-view:not(.discord-capture) main .sheet-red{background:#f6cccb;color:#1f3f8f} :root[data-theme] body.v3.app-view:not(.discord-capture) main .sheet-green{background:#1c7a4b;color:#fff} :root[data-theme] body.v3.app-view:not(.discord-capture) main .sheet-purple{background:#5b2d8e;color:#fff} :root[data-theme] body.v3.app-view:not(.discord-capture) main .sheet-blue{background:#1556ad;color:#fff} :root[data-theme] body.v3.app-view:not(.discord-capture) main .sheet-teal{background:#1d5c6b;color:#fff} :root[data-theme] body.v3.app-view:not(.discord-capture) main .sheet-gray{background:#5b6675;color:#fff} :root[data-theme] body.v3.app-view:not(.discord-capture) main .sheet-note{padding:10px 16px;border-top:1px solid var(--dt-border);background:var(--dt-surface-2);color:var(--dt-muted);font-size:11px} @media(max-width:700px){ :root[data-theme] body.v3.app-view:not(.discord-capture) main .sheet-banner{grid-template-columns:1fr 1fr} :root[data-theme] body.v3.app-view:not(.discord-capture) main .sheet-banner>div:has(.sheet-logo){display:none} } /* --- 14. Barre du haut sur téléphone et tablette ------------------------------ La règle « écran < 1100px » (padding-left:286px pour le menu latéral) gagnait sur la règle « écran < 900px » : sur téléphone toute la barre était décalée de 286px vers la droite et la cloche de notifications sortait de l'écran. */ @media(max-width:900px){ :root body.v3.app-view .topbar{padding-left:13px;padding-right:13px} :root body.v3.app-view .topbar-actions{gap:8px;min-width:0} } @media(max-width:520px){ :root body.v3.app-view .header-service-form .btn, :root body.v3.app-view .header-service-form button{padding-left:10px;padding-right:10px} :root body.v3.app-view .profile-summary, :root body.v3.app-view .profile-chevron{display:none} } /* --- 15. Pagination de l'Historique ----------------------------------------- */ :root[data-theme] body.v3.app-view:not(.discord-capture) main .history-pager{display:flex;align-items:center;justify-content:center;gap:14px;margin:18px 0 6px;color:var(--dt-muted);font-size:12px} /* --- 16. Mode capture Discord des Archives ----------------------------------- Déjà dans la V3.4, les tableaux gardaient une largeur minimale de 760px : la colonne « Salaire » de droite et tout le bloc « Contrats de la semaine » sortaient de l'image. Les salaires occupent maintenant toute la largeur, les contrats et factures passent en dessous. */ body.v3.discord-capture .capture-target :is(.tbl,.salary-capture .tbl){min-width:0!important;width:100%!important} body.v3.discord-capture .capture-target .two{grid-template-columns:1fr!important} body.v3.discord-capture .capture-target .salary-capture{gap:12px} body.v3.discord-capture .capture-target .tbl thead th{white-space:normal!important}