/* ═══════════════════════════════════════════════════════════════════════════ ev-director-readability-pro-v302.css — 2026-05-25 ─────────────────────────────────────────────────────────────────────────── COMPLÉMENTAIRE à ev-readability-v290 / v290c (inline dans index.html). Cible : pages Manager / Director ("session directeur"), où le Directeur constate que la typo reste trop petite et le contraste insuffisant. PRINCIPES ───────── • Minimum typo 16px partout (td, labels, inputs, listes). • Section headings & KPI titles → 18-20px, font-weight 800-900. • KPI values → 28-32px, font-weight 900, tabular-nums, blanc pur. • Contraste foolproof : – Sur fond sombre → texte #FFFFFF (main) / #F1F5F9 (secondary). – Sur fond clair (cartes blanches) → texte #020617 (main) / #334155 (sec). • Audit logs : padding vertical 14-16px, font 16px, texte slate-100. • Charts (axes / labels) : forcer #FFFFFF (souvent invisibles black-on-black). • Listes clients / équipe : nom 18px semibold, email 16px slate-200. STRATÉGIE ───────── • Surcouche externe (pas d'inline) pour faciliter futurs ajustements. • !important systématique pour battre les styles inline injectés par app.js. • Sélecteurs ciblés sur #s-* / #pg-* admin pages → ne touche pas l'opérateur. ═══════════════════════════════════════════════════════════════════════════ */ /* ─── 0. SCOPE ROOT — toutes les pages admin "session directeur" ──────── */ :root { --ev-text-base: 16px; --ev-text-lg: 18px; --ev-text-xl: 20px; --ev-text-2xl: 24px; --ev-text-3xl: 30px; --ev-text-on-dark-1: #FFFFFF; --ev-text-on-dark-2: #F1F5F9; --ev-text-on-dark-3: #CBD5E1; --ev-text-on-light-1: #020617; --ev-text-on-light-2: #1E293B; --ev-text-on-light-3: #334155; --ev-row-pad-y: 14px; } /* Liste des pages directeur/manager — utilisé pour scope */ #s-acc, #s-mbrs, #s-eqp, #s-pln, #s-msg, #s-env, #s-envhist, #s-fin, #s-hist, #s-rp, #s-ctrl, #s-stock, #s-pointage, #s-audit, #s-caissectrl, #s-caisseRpt, #s-monservice, #s-caisseAlerts, #pg-acc, #pg-mbrs, #pg-eqp, #pg-pln, #pg-msg, #pg-env, #pg-envhist, #pg-fin, #pg-audit, #pg-caissectrl, #pg-caisseRpt, #pg-monservice, #pg-caisseAlerts, #pg-staff, #pg-tarifs, #pg-depenses { font-size: var(--ev-text-base) !important; line-height: 1.55 !important; color: var(--ev-text-on-dark-2) !important; } /* ═══════════════════════════════════════════════════════════════════════ §1. TYPO DE BASE — paragraphes, labels, valeurs simples ─────────────────────────────────────────────────────── */ /* Texte courant dans toutes les pages directeur */ [id^="s-"] p, [id^="s-"] li, [id^="s-"] label, [id^="s-"] .fl, [id^="s-"] .lb, [id^="s-"] .k, [id^="s-"] .bd, [id^="pg-"] p, [id^="pg-"] li, [id^="pg-"] label, [id^="pg-"] .fl, [id^="pg-"] .lb { font-size: var(--ev-text-base) !important; line-height: 1.55 !important; } /* Inputs / textarea / select — palette + typo confort */ [id^="s-"] input, [id^="s-"] textarea, [id^="s-"] select, [id^="pg-"] input, [id^="pg-"] textarea, [id^="pg-"] select, [id^="s-"] .fi, [id^="s-"] .fta, [id^="pg-"] .fi, [id^="pg-"] .fta { font-size: var(--ev-text-base) !important; line-height: 1.4 !important; padding: 10px 12px !important; } /* ═══════════════════════════════════════════════════════════════════════ §2. SECTION HEADINGS & KPI TITLES — text-lg/text-xl + font-extrabold ──────────────────────────────────────────────────────────────────── */ [id^="s-"] h1, [id^="pg-"] h1 { font-size: 28px !important; font-weight: 900 !important; letter-spacing: -0.01em !important; color: var(--ev-text-on-dark-1) !important; } [id^="s-"] h2, [id^="pg-"] h2 { font-size: 22px !important; font-weight: 800 !important; color: var(--ev-text-on-dark-1) !important; } [id^="s-"] h3, [id^="pg-"] h3 { font-size: var(--ev-text-xl) !important; /* 20px */ font-weight: 800 !important; color: var(--ev-text-on-dark-1) !important; } [id^="s-"] h4, [id^="pg-"] h4 { font-size: var(--ev-text-lg) !important; /* 18px */ font-weight: 800 !important; color: var(--ev-text-on-dark-1) !important; } /* ═══════════════════════════════════════════════════════════════════════ §3. KPI VALUES — chiffres ronds 24-30px, blanc pur, font-black, tabular ─────────────────────────────────────────────────────────────────────── */ [id^="s-"] div[style*="font-size:22px" i], [id^="s-"] div[style*="font-size:24px" i], [id^="s-"] div[style*="font-size:26px" i], [id^="s-"] div[style*="font-size:28px" i], [id^="s-"] div[style*="font-size:30px" i], [id^="s-"] div[style*="font-size:32px" i], [id^="s-"] div[style*="font-size:36px" i], [id^="s-"] div[style*="font-size:40px" i], [id^="s-"] div[style*="font-size:48px" i], [id^="pg-"] div[style*="font-size:22px" i], [id^="pg-"] div[style*="font-size:24px" i], [id^="pg-"] div[style*="font-size:28px" i], [id^="pg-"] div[style*="font-size:30px" i], [id^="pg-"] div[style*="font-size:36px" i] { font-size: var(--ev-text-3xl) !important; /* min 30px */ font-weight: 900 !important; font-variant-numeric: tabular-nums !important; letter-spacing: -0.02em !important; line-height: 1.1 !important; } /* Si parent est card claire (bg blanc/slate-50), force le NOIR */ [style*="background:#FFFFFF" i] div[style*="font-size:22px" i], [style*="background:#FFFFFF" i] div[style*="font-size:24px" i], [style*="background:#FFFFFF" i] div[style*="font-size:28px" i], [style*="background:#FFFFFF" i] div[style*="font-size:30px" i], [style*="background:#FFFFFF" i] div[style*="font-size:36px" i], [style*="background:#fff" i] div[style*="font-size:22px" i], [style*="background:#fff" i] div[style*="font-size:24px" i], [style*="background:#fff" i] div[style*="font-size:28px" i], [style*="background:#fff" i] div[style*="font-size:30px" i], [style*="background:#fff" i] div[style*="font-size:36px" i], [style*="background:#F8FAFC" i] div[style*="font-size:22px" i], [style*="background:#F8FAFC" i] div[style*="font-size:24px" i], [style*="background:#F8FAFC" i] div[style*="font-size:28px" i], [style*="background:#F8FAFC" i] div[style*="font-size:30px" i], [style*="background:#F1F5F9" i] div[style*="font-size:24px" i], [style*="background:#F1F5F9" i] div[style*="font-size:30px" i] { color: var(--ev-text-on-light-1) !important; /* slate-950 / quasi noir */ } /* Sinon (fond sombre par défaut), force le BLANC pur */ [id^="s-"]:not([style*="background:#FFFFFF" i]):not([style*="background:#fff" i]):not([style*="background:#F8FAFC" i]) div[style*="font-size:22px" i], [id^="s-"]:not([style*="background:#FFFFFF" i]):not([style*="background:#fff" i]):not([style*="background:#F8FAFC" i]) div[style*="font-size:28px" i], [id^="s-"]:not([style*="background:#FFFFFF" i]):not([style*="background:#fff" i]):not([style*="background:#F8FAFC" i]) div[style*="font-size:30px" i], [id^="s-"]:not([style*="background:#FFFFFF" i]):not([style*="background:#fff" i]):not([style*="background:#F8FAFC" i]) div[style*="font-size:36px" i] { color: var(--ev-text-on-dark-1) !important; /* blanc pur */ } /* ═══════════════════════════════════════════════════════════════════════ §4. AUDIT LOGS / TABLES SYSTÈME — 16px, padding row généreux ─────────────────────────────────────────────────────────── */ #s-audit table, #pg-audit table, #s-caissectrl table, #pg-caissectrl table, #s-caisseRpt table, #pg-caisseRpt table, #s-caisseAlerts table, #pg-caisseAlerts table, #s-monservice table, #pg-monservice table { font-size: var(--ev-text-base) !important; width: 100% !important; } #s-audit table td, #pg-audit table td, #s-caissectrl table td, #pg-caissectrl table td, #s-caisseRpt table td, #pg-caisseRpt table td, #s-caisseAlerts table td, #pg-caisseAlerts table td, #s-monservice table td, #pg-monservice table td { font-size: var(--ev-text-base) !important; padding: var(--ev-row-pad-y) 14px !important; /* py-4-ish */ color: var(--ev-text-on-dark-2) !important; vertical-align: middle !important; border-bottom: 1px solid rgba(51, 65, 85, 0.45) !important; } #s-audit table th, #pg-audit table th, #s-caissectrl table th, #pg-caissectrl table th, #s-caisseRpt table th, #pg-caisseRpt table th, #s-caisseAlerts table th, #pg-caisseAlerts table th, #s-monservice table th, #pg-monservice table th { font-size: 14px !important; padding: 12px 14px !important; background: #1E293B !important; color: #F1F5F9 !important; font-weight: 900 !important; text-transform: uppercase; letter-spacing: 0.05em !important; border-bottom: 2px solid #475569 !important; position: sticky; top: 0; z-index: 2; } /* Catch inline font-size < 14px dans les td audit (cas Date/User pills) */ #s-audit td[style*="font-size:10px" i], #s-audit td[style*="font-size:11px" i], #s-audit td[style*="font-size:12px" i], #s-audit td[style*="font-size:13px" i], #pg-audit td[style*="font-size:10px" i], #pg-audit td[style*="font-size:11px" i], #pg-audit td[style*="font-size:12px" i], #pg-audit td[style*="font-size:13px" i] { font-size: 15px !important; } /* Pills / badges dans audit : texte un poil plus gros */ #s-audit td span[style*="border-radius" i], #s-audit td span[style*="background" i], #pg-audit td span[style*="border-radius" i] { font-size: 13.5px !important; font-weight: 700 !important; padding: 3px 8px !important; } /* Toutes les tables admin (catch-all) → typo 16px aussi */ [id^="s-"] table:not(.t-mini) td, [id^="pg-"] table:not(.t-mini) td { font-size: var(--ev-text-base) !important; } /* Zebra striping subtle (par-dessus v290 §8 plus discret) */ [id^="s-"] table:not(.t-mini) tr:nth-child(even) td { background: rgba(15, 23, 42, 0.55) !important; } /* ═══════════════════════════════════════════════════════════════════════ §5. KPI CARDS DASHBOARD (Top 4 cards) — fond clair → texte NOIR ────────────────────────────────────────────────────────────── */ /* Toute card avec bg blanc/slate-50 dans pages directeur force noir partout */ #s-acc [style*="background:#FFFFFF" i] *:not(svg):not(path), #s-acc [style*="background:#fff" i] *:not(svg):not(path), #s-acc [style*="background:#F8FAFC" i] *:not(svg):not(path), #s-acc [style*="background:#F1F5F9" i] *:not(svg):not(path), #pg-acc [style*="background:#FFFFFF" i] *:not(svg):not(path), #pg-acc [style*="background:#fff" i] *:not(svg):not(path), #pg-acc [style*="background:#F8FAFC" i] *:not(svg):not(path) { color: var(--ev-text-on-light-1) !important; } /* La card elle-même (avec bg clair) + border + shadow pour intégration */ #s-acc [style*="background:#FFFFFF" i], #s-acc [style*="background:#fff" i], #s-acc [style*="background:#F8FAFC" i], #pg-acc [style*="background:#FFFFFF" i], #pg-acc [style*="background:#fff" i], #pg-acc [style*="background:#F8FAFC" i] { color: var(--ev-text-on-light-1) !important; border: 1px solid #CBD5E1 !important; box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.45), 0 2px 6px rgba(15, 23, 42, 0.25) !important; } /* Labels secondaires (10-13px) sur card claire → slate-700 lisible */ #s-acc [style*="background:#FFFFFF" i] [style*="font-size:10px" i], #s-acc [style*="background:#FFFFFF" i] [style*="font-size:11px" i], #s-acc [style*="background:#FFFFFF" i] [style*="font-size:12px" i], #s-acc [style*="background:#FFFFFF" i] [style*="font-size:13px" i], #s-acc [style*="background:#fff" i] [style*="font-size:10px" i], #s-acc [style*="background:#fff" i] [style*="font-size:11px" i], #s-acc [style*="background:#fff" i] [style*="font-size:12px" i], #s-acc [style*="background:#fff" i] [style*="font-size:13px" i], #s-acc [style*="background:#F8FAFC" i] [style*="font-size:10px" i], #s-acc [style*="background:#F8FAFC" i] [style*="font-size:12px" i] { font-size: 14px !important; color: var(--ev-text-on-light-3) !important; /* slate-700 */ font-weight: 700 !important; letter-spacing: 0.03em !important; text-transform: uppercase; } /* ═══════════════════════════════════════════════════════════════════════ §6. CLIENTS / OPÉRATEUR LISTS — nom 18px semibold, email 16px slate-200 ────────────────────────────────────────────────────────────────────── */ /* Tables Clients (#s-mbrs) / Équipe (#s-eqp) / Staff */ #s-mbrs table td, #pg-mbrs table td, #s-eqp table td, #pg-eqp table td, #pg-staff table td { font-size: var(--ev-text-base) !important; padding: 12px 14px !important; color: var(--ev-text-on-dark-2) !important; vertical-align: middle !important; } /* Première colonne (souvent le nom) → 18px semibold blanc */ #s-mbrs table td:first-child, #s-eqp table td:first-child, #s-mbrs table td:nth-child(2), /* parfois avatar puis nom */ #s-eqp table td:nth-child(2), #pg-mbrs table td:first-child, #pg-eqp table td:first-child, #pg-staff table td:first-child { font-size: var(--ev-text-lg) !important; /* 18px */ font-weight: 700 !important; color: var(--ev-text-on-dark-1) !important; } /* Email / phone / secondary info → font 16px slate-100 */ #s-mbrs table td a[href^="mailto" i], #s-mbrs table td a[href^="tel" i], #s-eqp table td a[href^="mailto" i], #pg-mbrs table td a[href^="mailto" i] { font-size: var(--ev-text-base) !important; color: #F1F5F9 !important; text-decoration: none !important; border-bottom: 1px dashed rgba(241, 245, 249, 0.35) !important; } /* Badges rôles (Manager/Director/Operator) — pill plus lisible */ #s-eqp [style*="border-radius" i][style*="background" i], #pg-staff [style*="border-radius" i][style*="background" i] { font-size: 13px !important; font-weight: 800 !important; padding: 4px 10px !important; letter-spacing: 0.04em !important; text-transform: uppercase; } /* ═══════════════════════════════════════════════════════════════════════ §7. CHARTS — axes / data labels — souvent invisibles (noir sur noir) ──────────────────────────────────────────────────────────────────── */ /* Tous textes SVG dans pages directeur → blanc pur par défaut */ [id^="s-"] svg text, [id^="pg-"] svg text { fill: var(--ev-text-on-dark-1) !important; font-size: 13px !important; font-weight: 700 !important; } /* Axis lines / gridlines → slate-600 (visible mais discret) */ [id^="s-"] svg line[stroke="#000" i], [id^="s-"] svg line[stroke="#0F172A" i], [id^="s-"] svg line[stroke="#1F2937" i], [id^="s-"] svg path[stroke="#000" i], [id^="s-"] svg path[stroke="#0F172A" i] { stroke: #475569 !important; } /* Bar chart CSS (cf. fbGetDashboardTrends) : axes & labels en blanc */ #s-acc div[style*="font-size:9px" i], #s-acc div[style*="font-size:10px" i]:not([style*="background" i]) { color: var(--ev-text-on-dark-2) !important; font-size: 12px !important; font-weight: 700 !important; } /* ═══════════════════════════════════════════════════════════════════════ §8. BUTTONS dans pages directeur — typo 15-16px lisible ──────────────────────────────────────────────────────── */ [id^="s-"] button, [id^="pg-"] button, [id^="s-"] .ib, [id^="pg-"] .ib { font-size: 15px !important; font-weight: 700 !important; letter-spacing: 0.01em !important; } [id^="s-"] button.btn-primary, [id^="s-"] button[style*="background:#06B6D4" i], [id^="s-"] button[style*="background:#0E7490" i], [id^="s-"] button[style*="background:#1F4E4A" i] { font-size: var(--ev-text-base) !important; font-weight: 800 !important; } /* ═══════════════════════════════════════════════════════════════════════ §9. MESSAGE BUBBLES (page Messages) — bg clair → texte sombre ──────────────────────────────────────────────────────────── */ #s-msg [style*="background:#FFFFFF" i], #s-msg [style*="background:#fff" i], #s-msg [style*="background:#F8FAFC" i], #s-msg [style*="background:#F1F5F9" i], #s-msg [style*="background:#E0E7FF" i], #s-msg [style*="background:#DBEAFE" i], #s-msg [style*="background:#DCFCE7" i] { color: var(--ev-text-on-light-1) !important; font-size: var(--ev-text-base) !important; border: 1px solid rgba(15, 23, 42, 0.08) !important; box-shadow: 0 2px 8px rgba(15, 23, 42, 0.25) !important; } #s-msg [style*="background:#FFFFFF" i] *, #s-msg [style*="background:#fff" i] *, #s-msg [style*="background:#F8FAFC" i] *, #s-msg [style*="background:#F1F5F9" i] * { color: var(--ev-text-on-light-1) !important; } /* ═══════════════════════════════════════════════════════════════════════ §10. RESPONSIVE — tablette/mobile : ne pas écraser, mais garder ≥16px ──────────────────────────────────────────────────────────────────── */ @media (max-width: 768px) { [id^="s-"], [id^="pg-"] { font-size: var(--ev-text-base) !important; } [id^="s-"] table td, [id^="pg-"] table td { font-size: 15px !important; padding: 11px 9px !important; } [id^="s-"] div[style*="font-size:30px" i], [id^="s-"] div[style*="font-size:36px" i] { font-size: var(--ev-text-2xl) !important; /* 24px mobile */ } } /* ═══════════════════════════════════════════════════════════════════════ §11. BACKSTOP — éléments avec inline color < AAA contrast ───────────────────────────────────────────────────────── Ces couleurs étaient utilisées dans app.js pour des "secondary text" mais sur fond sombre elles deviennent invisibles. On les remap. */ [id^="s-"] [style*="color:#6B7280" i], [id^="pg-"] [style*="color:#6B7280" i], [id^="s-"] [style*="color:#9CA3AF" i], [id^="pg-"] [style*="color:#9CA3AF" i], [id^="s-"] [style*="color:#D1D5DB" i], [id^="pg-"] [style*="color:#D1D5DB" i] { color: var(--ev-text-on-dark-3) !important; /* #CBD5E1 — lisible AAA */ } /* ═══════════════════════════════════════════════════════════════════════ §12. SIDEBAR / DRAWER — typo nav 16px (l'opérateur garde sa nav compacte) ────────────────────────────────────────────────────────────────────── */ body.role-director #pro-nav .nav-item, body.role-director #pro-nav a, body.role-manager #pro-nav .nav-item, body.role-manager #pro-nav a { font-size: var(--ev-text-base) !important; font-weight: 700 !important; padding: 11px 14px !important; } /* ═══════════════════════════════════════════════════════════════════════ §KPI. Cartes Tableau de bord — fond BLANC, texte NOIR PUR ─────────────────────────────────────────────────────────────────────── Les .tbd-card sont délibérément blanches (#FFFFFF) au-dessus du thème sombre global, pour contraster comme des "tuiles KPI premium". Mais plusieurs surcouches v283/v290/v290c forcent .tbd-card-label, .tbd-card-suffix et .tbd-trend-sub à #CBD5E1 (slate-300) — pensé pour fond sombre, et donc INVISIBLE sur fond blanc. Cette section bat ces règles avec une spécificité supérieure (.tbd-card .X au lieu de .X seul) pour rester valide partout où les cartes apparaissent (dashboard directeur + autres pages). Texte = slate-950 (#020617) ≈ noir pur, font-weight 800 minimum. */ .tbd-card .tbd-card-label, .tbd-trends .tbd-card-label, body:has(#p-app.on) #p-app .tbd-card .tbd-card-label { color: #020617 !important; font-weight: 800 !important; font-size: 12px !important; } .tbd-card .tbd-card-suffix, .tbd-trends .tbd-card-suffix, body:has(#p-app.on) #p-app .tbd-card .tbd-card-suffix { color: #020617 !important; font-weight: 800 !important; } .tbd-card .tbd-card-value, .tbd-trends .tbd-card-value, body:has(#p-app.on) #p-app .tbd-card .tbd-card-value { color: #020617 !important; font-weight: 900 !important; } .tbd-card .tbd-trend-sub, .tbd-trends .tbd-trend-sub, body:has(#p-app.on) #p-app .tbd-card .tbd-trend-sub { color: #020617 !important; font-weight: 800 !important; font-size: 12px !important; margin-top: 4px !important; } /* Trio "CA Brut / Dépenses / Bénéfice Net" injecté inline par app.js trio() — on a déjà retiré var(--tx2) dans le HTML inline ; ce bloc fait office de garde-fou si une autre surcouche venait à repeindre les span enfants. */ .tbd-card > div > span, .tbd-card > div > b { /* Pas de color forcée ici — laisse l'inline style décider (rouge pour Dépenses, vert pour Bénéfice Net), on ne casse pas la sémantique. */ } /* Fin du fichier — ev-director-readability-pro-v302.css */