/* ════════════════════════════════════════════════════════════════════════ Thème clair/sombre partagé des outils SaaS. Modèle : les pages sont des « cartes blanches » (bulles) posées sur une coquille. L'INTÉRIEUR des cartes est déjà clair et ne change pas selon le thème ; seule la COQUILLE (fond de page, topbar, textes/onglets directement sur le fond, filets) bascule. D'où un petit jeu de variables sémantiques. Défaut (sans attribut) = CLAIR (« Papier »). Le thème sombre reste disponible et continue de s'appliquer aux utilisateurs qui l'ont explicitement choisi. Le choix est piloté par l'attribut data-theme sur , appliqué au plus tôt par un court script en ligne, basculé et mémorisé par theme.js (localStorage « liquidTheme » + PUT /api/auth/preferences). ════════════════════════════════════════════════════════════════════════ */ /* Le noir du thème sombre est NEUTRE : R = V = B. Toute teinte, même de 3 ou 4 points sur le canal bleu, se lit « bleu marine » sur un grand aplat. */ :root[data-theme="dark"] { --t-bg: #000000; --t-topbar-bg: #000000; --t-topbar-border: rgba(255,255,255,0.07); --t-on-bg: #ffffff; /* texte/icônes directement sur le fond */ --t-on-bg-muted: rgba(255,255,255,0.55); --t-on-bg-faint: rgba(255,255,255,0.5); --t-divider: rgba(255,255,255,0.12); --t-card: #ffffff; --t-card-border: transparent; /* contraste suffit sur fond noir */ --t-card-shadow: 0 12px 40px rgba(0,0,0,0.35); --t-accent: #3b82f6; --t-hamburger-border: rgba(255,255,255,0.22); --t-hamburger-border-hov: rgba(255,255,255,0.55); --t-hamburger-hover-bg: rgba(255,255,255,0.06); /* Échelons de texte/icône sur le fond (pages « dark-native » : Avocat, Tâches…) */ --t-on-bg-90: rgba(255,255,255,0.90); --t-on-bg-80: rgba(255,255,255,0.80); --t-on-bg-70: rgba(255,255,255,0.70); --t-on-bg-60: rgba(255,255,255,0.60); --t-on-bg-40: rgba(255,255,255,0.40); /* Surfaces translucides posées sur le fond */ --t-surface: rgba(255,255,255,0.04); --t-surface-brd: rgba(255,255,255,0.10); --t-chip: rgba(255,255,255,0.10); --t-chip-2: rgba(255,255,255,0.06); --t-border: rgba(255,255,255,0.14); --t-outline: rgba(255,255,255,0.35); --t-outline-hov: rgba(255,255,255,0.65); /* Surface « élevée » opaque (popovers, menus) */ --t-elevated: #121212; --t-elevated-shadow: 0 24px 60px rgba(0,0,0,0.5); /* Pastille/segment « solide » à fort contraste (actif) */ --t-solid: #ffffff; --t-on-solid: #000000; } :root, :root[data-theme="paper"] { --t-bg: #f7f6f3; --t-topbar-bg: #f7f6f3; --t-topbar-border: #ddd9d1; --t-on-bg: #111111; --t-on-bg-muted: #57534a; --t-on-bg-faint: #8a8578; --t-divider: #ddd9d1; --t-card: #ffffff; --t-card-border: #e4e0d8; /* bordure nécessaire sur fond clair */ --t-card-shadow: 0 8px 24px rgba(8,9,12,0.08); --t-accent: #3b82f6; --t-hamburger-border: rgba(0,0,0,0.18); --t-hamburger-border-hov: rgba(0,0,0,0.45); --t-hamburger-hover-bg: rgba(0,0,0,0.05); --t-on-bg-90: rgba(17,17,17,0.90); --t-on-bg-80: rgba(17,17,17,0.78); --t-on-bg-70: rgba(17,17,17,0.68); --t-on-bg-60: rgba(17,17,17,0.58); --t-on-bg-40: rgba(17,17,17,0.42); --t-surface: rgba(17,17,17,0.035); --t-surface-brd: rgba(17,17,17,0.12); --t-chip: rgba(17,17,17,0.06); --t-chip-2: rgba(17,17,17,0.05); --t-border: rgba(17,17,17,0.14); --t-outline: rgba(17,17,17,0.32); --t-outline-hov: rgba(17,17,17,0.55); --t-elevated: #ffffff; --t-elevated-shadow: 0 20px 50px rgba(8,9,12,0.14); --t-solid: #111111; --t-on-solid: #f7f6f3; } /* ── Composants de coquille partagés (topbar) ─────────────────────────── */ .topbar .hamburger { color: var(--t-on-bg) !important; border-color: var(--t-hamburger-border) !important; } .topbar .hamburger:hover { border-color: var(--t-hamburger-border-hov) !important; background: var(--t-hamburger-hover-bg) !important; } .topbar .brand__logo path { stroke: var(--t-on-bg) !important; } /* ── Bouton bascule clair/sombre (injecté par theme.js dans la topbar) ── Même gabarit que le hamburger. L'icône montre l'action à venir : soleil en mode sombre (→ passer au clair), lune en mode clair (→ passer au sombre). */ .topbar .theme-toggle { flex: none; width: 38px; height: 38px; display: grid; place-items: center; padding: 0; border: 1px solid var(--t-hamburger-border); border-radius: 10px; background: transparent; color: var(--t-on-bg); cursor: pointer; transition: border-color .15s, background .15s, color .15s; } .topbar .theme-toggle:hover { border-color: var(--t-hamburger-border-hov); background: var(--t-hamburger-hover-bg); } .topbar .theme-toggle svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .theme-toggle__moon { display: none; } .theme-toggle__sun { display: block; } /* sombre (défaut) → propose le clair */ :root[data-theme="paper"] .theme-toggle__moon { display: block; } :root[data-theme="paper"] .theme-toggle__sun { display: none; }