/* ════════════════════════════════════════════════════════════════ ACURGYM V5 — DESIGN TOKENS Palette Bleu/Or — transposition depuis Educated (indigo) vers AcurGym Couleurs pipetées sur l'identité AcurGym (logo + couverture) : #0071BC bleu AcurGym (logo, sidebar actif, CTA) #F2C32F → #FFE467 or AcurGym (accent de marque) Seul fichier modifié pour la transposition Educated → AcurGym Contient aussi les tokens DevExpress Design System (--dxds-*) dans le même fichier — la rampe --dxds-primary-* est dérivée dynamiquement de var(--brand) via color-mix(), donc elle suit automatiquement tout changement de --brand ci-dessous, sans recalcul manuel. ⚠️ Note de transposition : --accent reste une déclinaison CLAIRE DU BRAND (bleu), comme dans Educated, pour ne casser aucun composant qui s'en sert comme teinte de marque. L'or de la marque est exposé à part via --gold-* / --gradient-gold, à utiliser délibérément (badges, liserés, chips, survols) plutôt que par effet de bord. ──────────────────────────────────────────────────────────────── DEUX THÈMES COHABITENT DANS CE FICHIER :root → thème CLAIR (défaut, inchangé) :root[data-theme="dark"] → thème SOMBRE (bloc en fin de fichier) Bascule : document.documentElement.dataset.theme = 'dark'; Retour : delete document.documentElement.dataset.theme; Rien d'autre à charger : seules les valeurs des variables changent. ════════════════════════════════════════════════════════════════ */ :root { /* ============================================================ BRAND — palette bleu AcurGym #0071BC bleu principal (logo, sidebar actif, CTA) #00558D bleu profond (hover / actif) #1B8FD6 bleu lumineux (gradient start / warm) #159FE0 intermédiaire (mid) ============================================================ */ --brand: #0071BC; --brand-2: #00558D; /* hover / actif — plus foncé */ --brand-warm: #1B8FD6; /* gradient start — plus lumineux */ --brand-mid: #159FE0; /* intermédiaire */ --brand-soft: #E3F1FB; /* fond bleu — halo bg (sidebar actif) */ --brand-soft-2: #C6E2F6; /* bordure carte plus visible */ --accent: #4DA8DE; /* bleu clair — éclairci du brand */ --accent-2: #1B8FD6; /* = brand-warm — hover accent */ --accent-soft: #EEF7FD; /* fond accent léger */ /* ── OR DE MARQUE — accent secondaire, à utiliser délibérément ── */ --gold: #F2C32F; /* or AcurGym (sigle du logo) */ --gold-lt: #FFE467; /* or clair — haut du dégradé */ --gold-2: #D9A91C; /* or profond — hover / bordure */ --gold-ink: #C88A0B; /* or lisible en TEXTE sur fond clair */ --gold-soft: #FFF6DC; /* fond or léger (badges, chips) */ --gold-btn-ink: #0A1A2B; /* encre marine POSÉE SUR l'or (CTA) */ --acur-blue: #0071BC; /* alias sémantique principal */ --acur-gold: #F2C32F; /* alias sémantique accent */ --acur-cyan: #43BFE3; /* data viz / charts UNIQUEMENT — inchangé */ /* Alias de compatibilité avec le code hérité d'Educated : tout composant écrit pour l'indigo continue de fonctionner, en bleu. */ --acur-indigo: var(--brand); --acur-violet: var(--brand-mid); /* ============================================================ GRADIENTS ============================================================ */ /* Dégradé bouton CTA */ --gradient-brand: linear-gradient(135deg, #159FE0 0%, #004E82 100%); --gradient-brand-h: linear-gradient(135deg, #2BB2F0 0%, #003D68 100%); --gradient-brand-soft: linear-gradient(135deg, #F2F9FD 0%, #DCEEFA 100%); /* Dégradé or — chips, badges, accents de marque */ --gradient-gold: linear-gradient(135deg, #FFE467 0%, #F2C32F 100%); --gradient-gold-h: linear-gradient(135deg, #FFEC8C 0%, #E7B620 100%); /* Dégradé "énergie" — bleu → or, réservé aux éléments vitrine */ --gradient-energy: linear-gradient(135deg, #0071BC 0%, #159FE0 45%, #F2C32F 100%); /* Wash interne de la welcome card : bleu très léger en haut-droite ET or très léger en bas-gauche (coins opposés), blanc pur ailleurs. */ --gradient-welcome: radial-gradient(circle at 85% 20%, rgba(0, 113, 188, .07) 0%, transparent 50%), radial-gradient(circle at 15% 80%, rgba(242, 195, 47, .07) 0%, transparent 50%), #FFFFFF; /* Gradient nom "Bonjour {prénom}" — bleu → or (équivalent sport du indigo → orange d'Educated). ⚠️ Un bleu→jaune direct traverse le VERT en sRGB : le prénom virait à l'olive. Deux stops chauds intermédiaires (ocre) font le pont et suppriment la bande verte. */ --gradient-name: linear-gradient(120deg, #0071BC 0%, #1E86C4 38%, #C08A2A 72%, #E0A312 100%); /* ============================================================ CHARTS ============================================================ */ --chart-1: #0071BC; --chart-2: #159FE0; --chart-3: #10B981; --chart-4: #F2C32F; --chart-5: #EF4444; /* ============================================================ BACKGROUND ============================================================ */ --bg: #F5F7FA; --bg-2: #EEF2F7; --surface-1: #FFFFFF; --surface-2: #FAFBFD; --surface-3: #F3F5F9; /* ============================================================ TEXT ============================================================ */ --ink-0: #0F172A; --ink-1: #1E293B; --ink-2: #475569; --ink-3: #94A3B8; --ink-4: #CBD5E1; /* ============================================================ BORDERS ============================================================ */ --line: #E5E7EB; --line-2: #DDE2EA; --line-3: #CBD5E1; /* ============================================================ TYPOGRAPHY ============================================================ */ --font-display: "Geist", system-ui, sans-serif; --font-body: "Geist", system-ui, sans-serif; --font-mono: "JetBrains Mono", monospace; /* ============================================================ MODULE COLORS — inchangés (sémantiques, jamais liés au brand) ============================================================ */ --tint-violet-fg: #6D5BFE; --tint-violet-bg: #EEEAFF; --tint-blue-fg: #2563EB; --tint-blue-bg: #DCEAFE; --tint-indigo-fg: #4F46E5; --tint-indigo-bg: #E0DEFA; --tint-teal-fg: #0D9488; --tint-teal-bg: #CFF5F0; --tint-emerald-fg: #059669; --tint-emerald-bg: #D0F4E2; --tint-amber-fg: #B45309; --tint-amber-bg: #FBE9CC; --tint-rose-fg: #E11D48; --tint-rose-bg: #FCDCE5; --tint-pink-fg: #DB2777; --tint-pink-bg: #FAD8EA; --tint-slate-fg: #475569; --tint-slate-bg: #E2E5EB; /* ============================================================ SEMANTIC ============================================================ */ --success: var(--tint-emerald-fg); --success-soft: var(--tint-emerald-bg); --danger: var(--tint-rose-fg); --danger-soft: var(--tint-rose-bg); --warning: var(--tint-amber-fg); --warning-soft: var(--tint-amber-bg); --info: var(--tint-blue-fg); --info-soft: var(--tint-blue-bg); /* ============================================================ SHADOWS — recalculées depuis le nouveau brand #0071BC RGB(0, 113, 188) ============================================================ */ --sh-1: 0 1px 2px rgba(15,23,42,.04); --sh-2: 0 2px 4px rgba(15,23,42,.05); --sh-3: 0 8px 24px rgba(15,23,42,.08); --sh-hover: 0 10px 28px rgba(0,113,188,.22); --sh-brand: 0 4px 14px rgba(0,113,188,.35); --sh-brand-h: 0 8px 22px rgba(0,113,188,.48); --sh-gold: 0 4px 14px rgba(242,195,47,.38); --sh-gold-h: 0 8px 22px rgba(242,195,47,.52); /* Welcome card — ombre neutre, avec juste une pointe bleue à faible opacité (aucun débordement coloré hors de la carte). */ --sh-welcome: 0 4px 16px rgba(15, 23, 42, .06), 0 16px 40px -8px rgba(0, 113, 188, .12); /* ============================================================ RADIUS ============================================================ */ --radius-xs: 6px; --radius-sm: 8px; --radius: 10px; --radius-lg: 12px; --radius-xl: 16px; --radius-2xl: 20px; /* ============================================================ LAYOUT ============================================================ */ --topbar-h: 56px; --ribbon-tabs-h: 34px; --ribbon-acts-h: 42px; --mdi-h: 40px; --side-w: 270px; --side-w-c: 64px; --row-h: 36px; /* ============================================================ ANIMATIONS ============================================================ */ --ease-fast: 80ms ease; --ease-std: 160ms cubic-bezier(.4,0,.2,1); --ease-spring: 220ms cubic-bezier(.34,1.2,.64,1); /* ════════════════════════════════════════════════════════════ DEVEXPRESS DESIGN SYSTEM TOKENS --dxds-primary-* dérivée dynamiquement de var(--brand) ci-dessus via color-mix() — suit automatiquement tout changement de brand, aucun hex à recalculer manuellement lors d'une transposition. Échelles secondary/info/success/warning/danger/neutral : INCHANGÉES (sémantiques, non liées au brand — ne pas toucher). ════════════════════════════════════════════════════════════ */ /* ── PRIMARY — dérivée dynamiquement de var(--brand) ──────────── */ --dxds-primary-10: var(--dxbl-accent-color-10, color-mix(in srgb, var(--brand) 7%, white 93%)); --dxds-primary-20: var(--dxbl-accent-color-20, color-mix(in srgb, var(--brand) 16%, white 84%)); --dxds-primary-30: var(--dxbl-accent-color-30, color-mix(in srgb, var(--brand) 26%, white 74%)); --dxds-primary-40: var(--dxbl-accent-color-40, color-mix(in srgb, var(--brand) 37%, white 63%)); --dxds-primary-50: var(--dxbl-accent-color-50, color-mix(in srgb, var(--brand) 48%, white 52%)); --dxds-primary-60: var(--dxbl-accent-color-60, color-mix(in srgb, var(--brand) 59%, white 41%)); --dxds-primary-70: var(--dxbl-accent-color-70, color-mix(in srgb, var(--brand) 71%, white 29%)); --dxds-primary-80: var(--dxbl-accent-color-80, color-mix(in srgb, var(--brand) 84%, white 16%)); --dxds-primary-90: var(--dxbl-accent-color-90, var(--brand)); /* = brand exact */ --dxds-primary-100: var(--dxbl-accent-color-100, color-mix(in srgb, var(--brand) 83%, black 17%)); --dxds-primary-110: var(--dxbl-accent-color-110, color-mix(in srgb, var(--brand) 69%, black 31%)); --dxds-primary-120: var(--dxbl-accent-color-120, color-mix(in srgb, var(--brand) 57%, black 43%)); --dxds-primary-130: var(--dxbl-accent-color-130, color-mix(in srgb, var(--brand) 45%, black 55%)); --dxds-primary-140: var(--dxbl-accent-color-140, color-mix(in srgb, var(--brand) 33%, black 67%)); --dxds-primary-150: var(--dxbl-accent-color-150, color-mix(in srgb, var(--brand) 22%, black 78%)); --dxds-primary-160: var(--dxbl-accent-color-160, color-mix(in srgb, var(--brand) 11%, black 89%)); --dxds-primary-170: var(--dxbl-accent-color-170, color-mix(in srgb, var(--brand) 7%, black 93%)); /* ── SECONDARY — neutre, inchangé ─────────────────────────────── */ --dxds-secondary-10: #ffffff; --dxds-secondary-20: #f7f7f7; --dxds-secondary-30: #eeeeee; --dxds-secondary-40: #e6e6e6; --dxds-secondary-50: #dedede; --dxds-secondary-60: #d6d6d6; --dxds-secondary-70: #cecece; --dxds-secondary-80: #c5c5c5; --dxds-secondary-90: #bebebe; --dxds-secondary-100: #a6a6a6; --dxds-secondary-110: #8f8f8f; --dxds-secondary-120: #797979; --dxds-secondary-130: #636363; --dxds-secondary-140: #4e4e4e; --dxds-secondary-150: #3a3a3a; --dxds-secondary-160: #282828; --dxds-secondary-170: #161616; /* ── INFO — sémantique, inchangé ──────────────────────────────── */ --dxds-info-10: #eaeefa; --dxds-info-20: #d4ddf7; --dxds-info-30: #becdf6; --dxds-info-40: #a8bcf5; --dxds-info-50: #92aaf5; --dxds-info-60: #7e99f3; --dxds-info-70: #6a87f0; --dxds-info-80: #5b7afd; --dxds-info-90: #4f6bed; --dxds-info-100: #4159db; --dxds-info-110: #3042bd; --dxds-info-120: #2632ab; --dxds-info-130: #1d2298; --dxds-info-140: #151a7b; --dxds-info-150: #0e125f; --dxds-info-160: #080b43; --dxds-info-170: #030529; /* ── SUCCESS — sémantique, inchangé ────────────────────────────── */ --dxds-success-10: #e7f2e6; --dxds-success-20: #c8e9c5; --dxds-success-30: #b0dcac; --dxds-success-40: #98cf93; --dxds-success-50: #80c17b; --dxds-success-60: #66b461; --dxds-success-70: #4ba747; --dxds-success-80: #299027; --dxds-success-90: #107c10; --dxds-success-100: #0c700c; --dxds-success-110: #0b680b; --dxds-success-120: #095809; --dxds-success-130: #064806; --dxds-success-140: #043904; --dxds-success-150: #022b02; --dxds-success-160: #021d02; --dxds-success-170: #011001; /* ── WARNING — sémantique, inchangé ────────────────────────────── */ --dxds-warning-10: #fbebe4; --dxds-warning-20: #ffd6c3; --dxds-warning-30: #ffc5ac; --dxds-warning-40: #fdb191; --dxds-warning-50: #f69c76; --dxds-warning-60: #f78e62; --dxds-warning-70: #f7804c; --dxds-warning-80: #f77132; --dxds-warning-90: #f7630c; --dxds-warning-100: #d54f00; --dxds-warning-110: #b24000; --dxds-warning-120: #913200; --dxds-warning-130: #722300; --dxds-warning-140: #501a01; --dxds-warning-150: #3c1301; --dxds-warning-160: #2a0b01; --dxds-warning-170: #180501; /* ── DANGER — sémantique, inchangé ─────────────────────────────── */ --dxds-danger-10: #fceae8; --dxds-danger-20: #ffd0ca; --dxds-danger-30: #febab3; --dxds-danger-40: #f8a59c; --dxds-danger-50: #f08f86; --dxds-danger-60: #e97970; --dxds-danger-70: #e0615a; --dxds-danger-80: #ce3f3c; --dxds-danger-90: #c50f1f; --dxds-danger-100: #ae0618; --dxds-danger-110: #a10b18; --dxds-danger-120: #890813; --dxds-danger-130: #72050d; --dxds-danger-140: #5b0309; --dxds-danger-150: #460205; --dxds-danger-160: #310203; --dxds-danger-170: #1d0102; /* ── NEUTRAL — inchangé ────────────────────────────────────────── */ --dxds-neutral-10: #fffffe; --dxds-neutral-20: #f4f4f3; --dxds-neutral-30: #e9e9e8; --dxds-neutral-40: #dededd; --dxds-neutral-50: #d3d3d2; --dxds-neutral-60: #c8c8c7; --dxds-neutral-70: #bdbebd; --dxds-neutral-80: #b3b3b2; --dxds-neutral-90: #a8a9a8; --dxds-neutral-100: #9e9e9e; --dxds-neutral-110: #949493; --dxds-neutral-120: #8a8a89; --dxds-neutral-130: #808080; --dxds-neutral-140: #767676; --dxds-neutral-150: #6c6d6c; --dxds-neutral-160: #636363; --dxds-neutral-170: #595a59; --dxds-neutral-180: #505150; --dxds-neutral-190: #474847; --dxds-neutral-200: #3f3f3e; --dxds-neutral-210: #363636; --dxds-neutral-220: #2e2e2d; --dxds-neutral-230: #252525; --dxds-neutral-240: #1d1e1d; --dxds-neutral-250: #161616; } /* ════════════════════════════════════════════════════════════════ ═══ THÈME SOMBRE — "AcurGym Club" ═════════════════════════════ ════════════════════════════════════════════════════════════════ S'active avec . Ce bloc ne fait que REDÉFINIR des variables déjà déclarées au-dessus : aucun composant n'a besoin d'être réécrit tant qu'il passe par les tokens. Trois principes de la transposition : 1. JAMAIS DE NOIR PUR. Le fond est un marine très profond (#070C16). Le noir pur écrase les ombres, supprime la profondeur et fatigue sur une journée entière d'ERP. 2. LE BLEU S'ÉCLAIRCIT, L'OR NE BOUGE PAS. #0071BC devient illisible sur fond sombre : --brand passe à #1E9BE0. L'or, lui, est déjà parfait sur marine — c'est lui qui devient la couleur d'accent dominante, exactement comme sur la communication de marque AcurGym. 3. LES FONDS DE TEINTE DEVIENNENT TRANSLUCIDES. Un pastel plein (#DCEAFE) fait une tache opaque sur du sombre ; un rgba() à 14 % laisse passer le fond et reste cohérent partout. ════════════════════════════════════════════════════════════════ */ :root[data-theme="dark"] { /* ============================================================ BRAND — bleu éclairci pour le fond sombre ============================================================ */ --brand: #1E9BE0; /* lisible en texte ET en aplat sur sombre */ --brand-2: #0071BC; /* hover / actif — le bleu d'origine */ --brand-warm: #38AFEC; --brand-mid: #159FE0; --brand-soft: rgba(30,155,224,.14); /* halo — translucide, pas un aplat */ --brand-soft-2: rgba(30,155,224,.28); --accent: #6FC5F5; --accent-2: #38AFEC; --accent-soft: rgba(30,155,224,.10); /* ── OR — inchangé en aplat, ÉCLAIRCI en encre ──────────────── */ --gold: #F2C32F; --gold-lt: #FFE467; --gold-2: #E7B620; --gold-ink: #FFD75E; /* ⚠️ inverse du clair : sur sombre, l'or lisible en TEXTE est le clair, pas le profond */ --gold-soft: rgba(242,195,47,.14); --gold-btn-ink: #0A1220; /* encre POSÉE SUR l'or — reste marine */ --acur-blue: #1E9BE0; --acur-gold: #F2C32F; --acur-cyan: #5FD2F0; /* ============================================================ GRADIENTS ============================================================ */ --gradient-brand: linear-gradient(135deg, #2BB2F0 0%, #0071BC 55%, #004E82 100%); --gradient-brand-h: linear-gradient(135deg, #46C0FA 0%, #0A81CF 55%, #005C99 100%); --gradient-brand-soft: linear-gradient(135deg, rgba(30,155,224,.18) 0%, rgba(30,155,224,.06) 100%); --gradient-gold: linear-gradient(135deg, #FFE467 0%, #F2C32F 100%); --gradient-gold-h: linear-gradient(135deg, #FFEF9C 0%, #F6CE45 100%); --gradient-energy: linear-gradient(135deg, #1E9BE0 0%, #38AFEC 45%, #F2C32F 100%); /* Wash de la welcome card — halos sur surface sombre */ --gradient-welcome: radial-gradient(circle at 85% 20%, rgba(30, 155, 224, .16) 0%, transparent 55%), radial-gradient(circle at 15% 80%, rgba(242, 195, 47, .10) 0%, transparent 55%), #101A2B; /* Nom "Bonjour {prénom}" — OR PLEIN. Sur sombre, le bleu→or reste boueux et l'or seul donne le contraste maximal. Dégradé d'or à or, aucune traversée de teinte. */ --gradient-name: linear-gradient(120deg, #FFE467 0%, #F2C32F 58%, #E7B620 100%); /* ============================================================ CHARTS — éclaircis : les couleurs du clair s'éteignent sur sombre ============================================================ */ --chart-1: #38AFEC; --chart-2: #7FD0FF; --chart-3: #34D399; --chart-4: #F2C32F; --chart-5: #FB7185; /* ============================================================ BACKGROUND — marine profond, jamais #000 ============================================================ */ --bg: #070C16; --bg-2: #0A1220; --surface-1: #101A2B; /* cartes, panneaux */ --surface-2: #0C1424; /* fonds creusés (champs, lignes paires) */ --surface-3: #16223A; /* survols, états actifs */ /* ============================================================ TEXT ============================================================ */ --ink-0: #F8FAFC; --ink-1: #E2E8F0; --ink-2: #A9B6CC; --ink-3: #7A8AA3; --ink-4: #4E5E75; /* ============================================================ BORDERS — translucides : elles suivent le fond qu'elles longent ============================================================ */ --line: rgba(255,255,255,.08); --line-2: rgba(255,255,255,.14); --line-3: rgba(255,255,255,.22); /* ============================================================ MODULE COLORS — encres éclaircies, fonds translucides ============================================================ */ --tint-violet-fg: #A78BFA; --tint-violet-bg: rgba(167,139,250,.14); --tint-blue-fg: #60A5FA; --tint-blue-bg: rgba(96,165,250,.14); --tint-indigo-fg: #818CF8; --tint-indigo-bg: rgba(129,140,248,.14); --tint-teal-fg: #2DD4BF; --tint-teal-bg: rgba(45,212,191,.14); --tint-emerald-fg: #34D399; --tint-emerald-bg: rgba(52,211,153,.14); --tint-amber-fg: #FBBF24; --tint-amber-bg: rgba(251,191,36,.14); --tint-rose-fg: #FB7185; --tint-rose-bg: rgba(251,113,133,.14); --tint-pink-fg: #F472B6; --tint-pink-bg: rgba(244,114,182,.14); --tint-slate-fg: #94A3B8; --tint-slate-bg: rgba(148,163,184,.14); /* SEMANTIC : --success / --danger / --warning / --info pointent déjà sur les tints ci-dessus, ils suivent automatiquement. */ /* ============================================================ SHADOWS — sur sombre une ombre n'est plus une teinte grise, c'est du noir franc ; et les ombres de marque deviennent des HALOS lumineux (c'est ce qui fait "vivre" un thème sombre). ============================================================ */ --sh-1: 0 1px 2px rgba(0,0,0,.45); --sh-2: 0 2px 6px rgba(0,0,0,.50); --sh-3: 0 10px 30px rgba(0,0,0,.55); --sh-hover: 0 10px 28px rgba(0,0,0,.60); --sh-brand: 0 6px 18px -6px rgba(30,155,224,.55); --sh-brand-h: 0 10px 26px -8px rgba(30,155,224,.70); --sh-gold: 0 8px 24px -8px rgba(242,195,47,.50), 0 0 40px -14px rgba(242,195,47,.60); --sh-gold-h: 0 12px 30px -8px rgba(242,195,47,.65), 0 0 48px -12px rgba(242,195,47,.75); --sh-welcome: 0 18px 44px -18px rgba(0,0,0,.80); /* ════════════════════════════════════════════════════════════ DEVEXPRESS — SECONDARY & NEUTRAL INVERSÉES La rampe --dxds-primary-* se dérive de var(--brand) : elle suit toute seule. Les rampes secondary et neutral, elles, vont du clair au foncé et servent aux SURFACES et BORDURES des composants DX : sur sombre il faut les inverser, sinon les grilles et popups restent blanches. ⚠️ Ceci ne remplace PAS la feuille de thème sombre de DevExpress (voir la note en fin de fichier) : c'est le complément côté design system. ════════════════════════════════════════════════════════════ */ --dxds-secondary-10: #0B121F; --dxds-secondary-20: #111A2A; --dxds-secondary-30: #172133; --dxds-secondary-40: #1D283C; --dxds-secondary-50: #232F45; --dxds-secondary-60: #2A374F; --dxds-secondary-70: #313F58; --dxds-secondary-80: #394862; --dxds-secondary-90: #43536F; --dxds-secondary-100: #556584; --dxds-secondary-110: #687899; --dxds-secondary-120: #7C8BAB; --dxds-secondary-130: #919FBC; --dxds-secondary-140: #A7B3CB; --dxds-secondary-150: #BEC7D9; --dxds-secondary-160: #D6DCE8; --dxds-secondary-170: #EEF1F6; --dxds-neutral-10: #0A111D; --dxds-neutral-20: #101827; --dxds-neutral-30: #151E30; --dxds-neutral-40: #1A2539; --dxds-neutral-50: #202C42; --dxds-neutral-60: #26334B; --dxds-neutral-70: #2C3A55; --dxds-neutral-80: #33425F; --dxds-neutral-90: #3B4B6A; --dxds-neutral-100: #455777; --dxds-neutral-110: #506384; --dxds-neutral-120: #5C7092; --dxds-neutral-130: #697EA0; --dxds-neutral-140: #778BAD; --dxds-neutral-150: #8698B9; --dxds-neutral-160: #96A6C5; --dxds-neutral-170: #A6B4D0; --dxds-neutral-180: #B3BFD8; --dxds-neutral-190: #C0CADF; --dxds-neutral-200: #CCD4E5; --dxds-neutral-210: #D7DEEB; --dxds-neutral-220: #E1E7F0; --dxds-neutral-230: #EAEFF5; --dxds-neutral-240: #F2F5F9; --dxds-neutral-250: #F8FAFC; } /* ── Fond de page ─────────────────────────────────────────────── Le d'un ERP XAF reste souvent blanc en dur ; on force la surface de base ici pour que la bascule soit franche. */ :root[data-theme="dark"] body { background: var(--bg); color: var(--ink-1); } /* ── Formulaires natifs + scrollbars ──────────────────────────── Sans ça, les champs natifs et les ascenseurs restent blancs et trahissent le thème clair par-dessous. */ :root[data-theme="dark"] { color-scheme: dark; } /* ════════════════════════════════════════════════════════════════ ⚠️ À FAIRE EN DEHORS DE CE FICHIER — _Host.cshtml DevExpress charge sa propre feuille de mode. Tant qu'elle reste en "light", les grilles, popups, calendriers et éditeurs DX resteront blancs quoi qu'on écrive ici : _content/DevExpress.Blazor.Themes.Fluent/modes/light.min.css → .../modes/dark.min.css _content/DevExpress.ExpressApp.Blazor/dx.light.css → .../dx.dark.css À charger conditionnellement selon le thème choisi. Un fichier "educ.dark.css" existe déjà dans wwwroot/css — à vérifier, il contient peut-être déjà ce travail. ════════════════════════════════════════════════════════════════ */ /* ════════════════════════════════════════════════════════════════ IMPRESSION — LE THÈME SOMBRE NE DOIT JAMAIS ATTEINDRE LE PAPIER Par défaut, un navigateur n'imprime PAS les couleurs de fond (sauf si l'utilisateur coche « Graphiques d'arrière-plan »), mais il imprime TOUJOURS les couleurs de texte. En thème sombre, les encres sont quasi blanches : le document sortirait blanc sur blanc, vierge à l'œil. On restaure donc la palette claire à l'impression, même quand data-theme="dark" est actif. L'écran reste sombre, le papier redevient lisible. Rien à faire côté utilisateur. ════════════════════════════════════════════════════════════════ */ @media print { :root[data-theme="dark"] { color-scheme: light; /* Fonds — blanc franc */ --bg: #FFFFFF; --bg-2: #FFFFFF; --surface-1: #FFFFFF; --surface-2: #FFFFFF; --surface-3: #F3F5F9; /* Encres — on repasse au contraste papier */ --ink-0: #0F172A; --ink-1: #1E293B; --ink-2: #475569; --ink-3: #64748B; --ink-4: #94A3B8; /* Filets — opaques : un rgba() blanc translucide disparaît sur du papier blanc, les tableaux perdraient leurs bordures. */ --line: #D9DEE6; --line-2: #C3CBD6; --line-3: #A9B3C1; /* Marque — la version foncée, lisible à l'encre */ --brand: #0071BC; --brand-2: #00558D; --brand-soft: #E3F1FB; --brand-soft-2: #C6E2F6; --gold-ink: #A8730A; --gold-soft: #FFF6DC; /* Teintes de module — fonds pastel opaques */ --tint-violet-fg: #6D5BFE; --tint-violet-bg: #EEEAFF; --tint-blue-fg: #2563EB; --tint-blue-bg: #DCEAFE; --tint-indigo-fg: #4F46E5; --tint-indigo-bg: #E0DEFA; --tint-teal-fg: #0D9488; --tint-teal-bg: #CFF5F0; --tint-emerald-fg: #059669; --tint-emerald-bg: #D0F4E2; --tint-amber-fg: #B45309; --tint-amber-bg: #FBE9CC; --tint-rose-fg: #E11D48; --tint-rose-bg: #FCDCE5; --tint-slate-fg: #475569; --tint-slate-bg: #E2E5EB; /* Ombres — inutiles sur papier */ --sh-1: none; --sh-2: none; --sh-3: none; --sh-hover: none; --sh-brand: none; --sh-brand-h: none; --sh-gold: none; --sh-gold-h: none; --sh-welcome: none; } /* Les surfaces forcées en dur par les réparations sombres doivent céder elles aussi : elles portent !important. */ :root[data-theme="dark"] body, :root[data-theme="dark"] .card, :root[data-theme="dark"] .card-header, :root[data-theme="dark"] .card-body, :root[data-theme="dark"] .dxbl-modal-content, :root[data-theme="dark"] .dxbl-modal-body, :root[data-theme="dark"] .dxbrv-wrapper, :root[data-theme="dark"] .dxbrv-viewbox, :root[data-theme="dark"] .dxbrv-document-surface { background: #FFFFFF !important; color: #0F172A !important; } /* Rien de décoratif sur le papier */ :root[data-theme="dark"] .xaf-sidebar, :root[data-theme="dark"] .dxbrv-toolbar, :root[data-theme="dark"] .dxbrv-tabs { display: none !important; } } /* ═══════════════════════════════════════════════════════════════════ PALETTE DES GRAPHIQUES — dashboards DevExpress ─────────────────────────────────────────────────────────────────── Source unique de vérité pour les charts : le patcher SVG (dashboard-events-scripts.js) lit ces variables à chaque rendu, il n'a plus une seule couleur en dur. Les huit teintes catégorielles sont VALIDÉES, pas choisies à l'œil : bande de clarté OKLCH, plancher de chroma, séparation des paires voisines en deutéranopie / protanopie / tritanopie, plancher en vision normale, contraste ≥ 3:1 sur la surface du mode. Les deux jeux sont des STEPS DISTINCTS, pas un jeu clair inversé — un basculement automatique sort de la bande de clarté du mode sombre. Ordre : bleu de marque, or, émeraude, violet, rose, cyan, orange, prune. L'ordre est FIXE — on n'assigne jamais une teinte au rang d'une série, sinon un filtre qui change le nombre de séries repeint les survivantes. ══════════════════════════════════════════════════════════════════ */ :root { /* Catégorielles — surface claire */ --chart-1: #0071BC; /* bleu de marque */ --chart-2: #B98600; /* or assombri pour tenir le contraste */ --chart-3: #0F8A5F; /* émeraude */ --chart-4: #7C3AED; /* violet */ --chart-5: #D1204A; /* rose */ --chart-6: #0E8AA8; /* cyan */ --chart-7: #D9610C; /* orange */ --chart-8: #A0499E; /* prune */ /* Chrome du graphique */ --chart-grid: #EEF2F7; --chart-axis-line: #E2E8F0; --chart-tick: #E2E8F0; --chart-axis-label: #64748B; --chart-axis-title: #0F172A; --chart-legend: #334155; --chart-series-label: #0F172A; --chart-value: #334155; /* Séparateur de secteurs et liseré des points : la surface, pour que le trait creuse au lieu de dessiner. */ --chart-separator: #FFFFFF; } :root[data-theme="dark"] { /* Catégorielles — surface sombre (--surface-1 #101A2B). Plus sourdes que les tokens d'interface : un aplat de #F2C32F sur une part de camembert écrase tout le reste du graphique. Le doré vif reste réservé aux accents d'interface. */ --chart-1: #1E8FD6; --chart-2: #B78C12; --chart-3: #17A77B; --chart-4: #8B5CF6; --chart-5: #E15A72; --chart-6: #17A2C4; --chart-7: #CF6825; --chart-8: #C061A8; --chart-grid: rgba(255,255,255,.06); --chart-axis-line: rgba(255,255,255,.12); --chart-tick: rgba(255,255,255,.12); --chart-axis-label: #A9B6CC; --chart-axis-title: #F8FAFC; --chart-legend: #E2E8F0; --chart-series-label: #F8FAFC; --chart-value: #E2E8F0; --chart-separator: #101A2B; }