/* static/css/theme.css ════════════════════════════════════════════════════════════ Système de thèmes BizGest Pro — source unique des couleurs. Fonctionnement : - Le thème actif est porté par , posé AVANT le rendu par le script anti-FOUC (cf. base.html). - Variables SÉMANTIQUES (canoniques — à utiliser pour tout nouveau code) : --bg, --bg-elevated, --text, --text-muted, --border, --accent, --danger, --warning, --success. - Les anciens noms (--card, --muted, --accent2, --accent3…) restent des ALIAS valides pour le code existant. - Les templates « papier » (PDF, impressions, ticket 80 mm) n'utilisent PAS ce fichier : ils restent en clair. Contraste (WCAG AA, vérifié) : en thème clair, le vert de marque #2ea043 ne tient pas 4.5:1 sur fond blanc → l'accent clair utilise la déclinaison #1f883d (fonds de boutons, texte blanc 4.52:1) et #1a7f37 (texte vert sur fond clair, 5.08:1). La teinte de marque est conservée telle quelle en sombre. ════════════════════════════════════════════════════════════ */ /* ── TYPOGRAPHIE (Sprint E) ────────────────────────────────── */ /* Inter variable, self-hosted (pas de CDN externe : RGPD + perf). WhiteNoise réécrit l'url() relative vers le fichier hashé. */ @font-face { font-family: 'Inter'; src: url("../fonts/InterVariable.2bf3d951bf9d.woff2") format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; } :root { --font-sans: 'Inter', 'Segoe UI', system-ui, sans-serif; --font-mono: ui-monospace, 'Cascadia Mono', Consolas, monospace; /* Échelle typographique (base 13px = densité actuelle de l'app) */ --text-xs: 11px; --text-sm: 12px; --text-base: 13px; --text-md: 14px; --text-lg: 16px; --text-xl: 18px; --text-2xl: 22px; --text-3xl: 28px; /* Hauteurs de ligne */ --lh-corps: 1.5; --lh-titres: 1.2; /* Échelle d'espacement (multiples de 4) */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 32px; --space-8: 48px; } /* ── THÈME SOMBRE (défaut — palette actuelle conservée) ────── */ :root, html[data-theme='dark'] { color-scheme: dark; /* Surfaces */ --bg: #0d1117; /* fond global */ --bg-elevated: #1c2128; /* cartes, panneaux */ --bg-subtle: #21262d; /* en-têtes de tableaux, champs */ --sidebar: #161b22; /* sidebar et topbar */ --border: #30363d; --hover: rgba(255, 255, 255, .05); --zebra: rgba(255, 255, 255, .02); /* Ombres (discrètes en sombre : les bordures structurent déjà) */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4); --shadow-md: 0 4px 16px rgba(0, 0, 0, .45); /* Texte */ --text: #e6edf3; --text-muted: #7d8590; /* Accent (vert de marque) */ --accent: #2ea043; /* fonds pleins (boutons) */ --accent-hover: #3fb950; --accent-text: #3fb950; /* vert utilisé comme TEXTE */ /* Statuts — fond plein, texte sur fond clair/sombre, tinte */ --success: #2ea043; --success-text: #3fb950; --success-bg: rgba(46, 160, 67, .12); --success-border: rgba(46, 160, 67, .3); --danger: #da3633; --danger-text: #f85149; --danger-bg: rgba(218, 54, 51, .12); --danger-border: rgba(218, 54, 51, .3); --warning: #d29922; --warning-text: #e3b341; --warning-bg: rgba(210, 153, 34, .12); --warning-border: rgba(210, 153, 34, .3); --info: #1f6feb; --info-text: #58a6ff; --info-bg: rgba(31, 111, 235, .12); --info-border: rgba(31, 111, 235, .3); /* Familles complémentaires utilisées par le métier : violet = produits/services virtuels, severe = paiement partiel */ --violet: #8b5cf6; --violet-text: #a78bfa; --violet-bg: rgba(139, 92, 246, .15); --severe: #e84c1e; --severe-text: #e84c1e; --severe-bg: rgba(232, 76, 30, .15); } /* ── THÈME CLAIR (palette professionnelle, pas une inversion) ─ */ html[data-theme='light'] { color-scheme: light; /* Surfaces — fond doux, cartes blanches, bordures nettes */ --bg: #fafafa; --bg-elevated: #ffffff; --bg-subtle: #f6f8fa; --sidebar: #ffffff; --border: #d0d7de; --hover: rgba(0, 0, 0, .04); --zebra: rgba(0, 0, 0, .02); /* Ombres douces : donnent le relief des cartes en clair */ --shadow-sm: 0 1px 2px rgba(16, 24, 40, .06); --shadow-md: 0 4px 16px rgba(16, 24, 40, .12); /* Texte */ --text: #1a1a1a; --text-muted: #57606a; /* Accent — déclinaisons AA du vert de marque (cf. en-tête) */ --accent: #1f883d; --accent-hover: #1a7f37; --accent-text: #1a7f37; /* Statuts */ --success: #1f883d; --success-text: #1a7f37; --success-bg: rgba(26, 127, 55, .08); --success-border: rgba(26, 127, 55, .35); --danger: #cf222e; --danger-text: #cf222e; --danger-bg: rgba(207, 34, 46, .07); --danger-border: rgba(207, 34, 46, .35); --warning: #9a6700; --warning-text: #9a6700; --warning-bg: rgba(154, 103, 0, .08); --warning-border: rgba(154, 103, 0, .35); --info: #0969da; --info-text: #0969da; --info-bg: rgba(9, 105, 218, .07); --info-border: rgba(9, 105, 218, .35); /* Déclinaisons AA sur fond clair (violet 5.6:1, severe 4.6:1) */ --violet: #8250df; --violet-text: #6f42c1; --violet-bg: rgba(130, 80, 223, .08); --severe: #bc4c00; --severe-text: #bc4c00; --severe-bg: rgba(188, 76, 0, .08); } /* ── ALIAS HISTORIQUES (compatibilité du code existant) ────── */ :root { --card: var(--bg-elevated); --card2: var(--bg-subtle); --muted: var(--text-muted); --accent2: var(--info); --accent3: var(--warning); } /* ── TRANSITION DE BASCULE (200 ms) ────────────────────────── */ /* La classe est posée par theme.js juste le temps du switch, pour ne pas ralentir tous les rendus en continu. */ html.theme-transition, html.theme-transition *, html.theme-transition *::before, html.theme-transition *::after { transition: background-color .2s ease, color .2s ease, border-color .2s ease, fill .2s ease !important; } /* ── TOGGLE SOLEIL/LUNE (bouton de la topbar) ──────────────── */ .theme-toggle { width: 32px; height: 32px; border-radius: 6px; background: var(--bg-subtle); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; flex-shrink: 0; color: var(--text-muted); } .theme-toggle:hover { color: var(--text); background: var(--hover); } .theme-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .theme-toggle svg { width: 16px; height: 16px; transition: transform .2s ease, opacity .2s ease; } /* Soleil visible en sombre (= « passer en clair »), lune visible en clair (= « passer en sombre ») */ html[data-theme='dark'] .theme-toggle .icone-lune { display: none; } html[data-theme='light'] .theme-toggle .icone-soleil { display: none; } .theme-toggle:hover svg { transform: rotate(15deg); }