/* Goulia — palette thème clair / sombre + tokens design system Unified. * * Variables consommées par toutes les pages via var(--name). * Toggle pilotée par data-theme sur + persist localStorage (theme.js). * * Mode dark = palette « Goulia Unified » (#06040f + violet/pink/cyan/lime/amber). * Mode light = adaptation WCAG AA, palette violet identité préservée. * * Invariants verrouillés par tests/test_invariants_theme.py : * - :root définit dark, [data-theme="light"] définit light * - --bg --text --muted --accent --border --surface --card-bg dans les deux blocs * * Couleurs vives en mode clair : décalées vs prototype dark pour rester * lisibles sur fond #fafaff (contraste min 4.5:1 attendu hors texte). * * pink #d946ad : WCAG AA OK sur #fafaff (~4.7:1) * cyan #06b6d4 : OK sur #fafaff (~3.8:1 — non-text, AA large OK) * lime #65a30d : OK sur #fafaff (~4.6:1) * amber #ea580c : OK sur #fafaff (~4.5:1) * primary #635bff : INCHANGÉ (identité Goulia, ~4.8:1 sur #fafaff) */ :root { /* === Mode sombre — Goulia Unified === */ /* Backgrounds */ --bg: #06040f; --bg-soft: #0d0a22; --bg2: #0c1022; /* alias legacy (panels secondaires) */ --bg-panel: rgba(255, 255, 255, 0.035); /* Text */ --text: #f0edff; --text-strong: #ffffff; --text-soft: rgba(240, 237, 255, 0.62); --text-muted: rgba(240, 237, 255, 0.40); --muted: rgba(240, 237, 255, 0.62); /* alias legacy = --text-soft */ --muted-2: rgba(240, 237, 255, 0.40);/* alias legacy = --text-muted */ /* Borders / surfaces */ --border: rgba(255, 255, 255, 0.08); --border-strong: rgba(255, 255, 255, 0.14); --surface: rgba(255, 255, 255, 0.025); --surface-2: rgba(255, 255, 255, 0.05); --card-bg: rgba(15, 15, 25, 0.7); --card-bg-solid: #0f0f1a; /* Glass (Unified) */ --glass-bg: rgba(255, 255, 255, 0.025); --glass-bg-2: rgba(255, 255, 255, 0.04); /* Accent / spectrum colors */ --accent: #635bff; /* Goulia violet — INCHANGÉ */ --primary: #635bff; --primary-hi: #7b73ff; /* hover sombre — éclaircit */ --accent2: #8b7dff; --accent-soft: rgba(99, 91, 255, 0.15); --glow: rgba(99, 91, 255, 0.25); --pink: #ff7ac6; --cyan: #5ee4ff; --lime: #a3ff5e; --amber: #ffb05a; /* Ambient (fond étoilé + halos) */ --halo-opacity: 0.33; --star-color: rgba(255, 255, 255, 0.5); --star-shadow: 0 0 4px rgba(255, 255, 255, 0.7); /* Status */ --success: #22c55e; --warn: #f59e0b; --danger: #ef4444; --danger-soft: rgba(239, 68, 68, 0.10); /* Shadows */ --shadow: 0 8px 32px rgba(0, 0, 0, 0.4); --shadow-cta: 0 16px 34px -10px rgba(99, 91, 255, 0.8); --shadow-table: 0 60px 100px -40px rgba(99, 91, 255, 0.33); /* Misc */ --overlay: rgba(0, 0, 0, 0.85); --input-bg: rgba(255, 255, 255, 0.05); --input-border: rgba(255, 255, 255, 0.1); /* Typography — Space Grotesk (chargé via Google Fonts dans ) */ --font-sans: 'Space Grotesk', system-ui, -apple-system, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace; /* Geometric tokens (Unified) */ --r-card: 16px; --r-pill: 999px; --r-cta: 14px; --r-block: 28px; --maxw: 1320px; /* === 3D inline-SVG (landing index.html) === * Verrouillé par tests/test_invariants_theme.py::TestThreeDVarsThemeAware. * En dark : prisme blanc translucide / bubbles noires / ombres noires. * En light : prisme violet identitaire / bubbles blanches / ombres violettes douces. * Sans ces vars, les composants 3D régressent à du noir-sur-clair * illisible (cas index.html 2026-05-20). NE PAS supprimer. */ --3d-prism-fill: var(--text-strong); --3d-prism-fill-opacity-top: 0.92; --3d-prism-fill-opacity-mid: 0.55; --3d-prism-stroke-opacity: 0.55; --3d-prism-edge-opacity: 0.8; --3d-prism-sparkle: var(--text-strong); --3d-prism-depth-fill-opacity: 0.35; --3d-prism-depth-stroke-opacity: 0.35; --3d-beam-stroke: var(--text-strong); --3d-beam-opacity: 0.9; --3d-tag-fill-opacity: 0.18; --3d-tag-stroke-w: 1.2; --3d-tag-text-shadow: none; --3d-floor-shadow: rgba(0, 0, 0, 0.22); --3d-avatar-shadow: rgba(0, 0, 0, 0.28); --3d-tag-bubble-bg: rgba(0, 0, 0, 0.55); --3d-tag-bubble-stroke-opacity: 1; --3d-tunnel-tag-bg: rgba(0, 0, 0, 0.4); --3d-tunnel-tag-stroke-w: 1.5; --3d-table-fill: var(--text-strong); --3d-table-fill-opacity: 0.05; --3d-table-stroke-opacity: 0.35; --3d-table-dash-opacity: 0.15; --3d-spectrogram-top-fill: var(--text-strong); --3d-spectrogram-top-opacity: 0.22; color-scheme: dark; } [data-theme="light"] { /* === Mode clair — palette dérivée pour préserver l'identité Goulia === * * Fond crème violacé (pas blanc pur). Texte foncé violacé. Couleurs * vives décalées vers darker pour WCAG AA sur fond clair. * Primary INCHANGÉ (#635bff) — identité marque. */ /* Backgrounds */ --bg: #fafaff; --bg-soft: #f1ecff; --bg2: #f1ecff; --bg-panel: rgba(99, 91, 255, 0.04); /* Text */ --text: #1a1230; --text-strong: #0a0420; --text-soft: rgba(26, 18, 48, 0.68); --text-muted: rgba(26, 18, 48, 0.48); --muted: rgba(26, 18, 48, 0.68); --muted-2: rgba(26, 18, 48, 0.48); /* Borders / surfaces */ --border: rgba(13, 10, 34, 0.10); --border-strong: rgba(13, 10, 34, 0.18); --surface: rgba(99, 91, 255, 0.04); --surface-2: rgba(99, 91, 255, 0.07); --card-bg: #ffffff; --card-bg-solid: #ffffff; /* Glass — blanc transparent au lieu de blanc-sur-noir */ --glass-bg: rgba(255, 255, 255, 0.7); --glass-bg-2: rgba(255, 255, 255, 0.85); /* Accent / spectrum — primary INCHANGÉ, autres décalés WCAG AA */ --accent: #635bff; --primary: #635bff; --primary-hi: #4f47e6; /* hover clair — assombrit */ --accent2: #4f47e6; --accent-soft: rgba(99, 91, 255, 0.10); --glow: rgba(99, 91, 255, 0.18); --pink: #d946ad; --cyan: #06b6d4; --lime: #65a30d; --amber: #ea580c; /* Ambient — étoiles deviennent points violets diffus, halos atténués */ --halo-opacity: 0.18; --star-color: rgba(99, 91, 255, 0.35); --star-shadow: none; /* Status */ --success: #15803d; --warn: #b45309; --danger: #dc2626; --danger-soft: rgba(220, 38, 38, 0.08); /* Shadows */ --shadow: 0 8px 24px rgba(15, 23, 42, 0.08); --shadow-cta: 0 12px 28px -8px rgba(99, 91, 255, 0.4); --shadow-table: 0 40px 70px -30px rgba(99, 91, 255, 0.25); /* Misc */ --overlay: rgba(15, 23, 42, 0.55); --input-bg: #ffffff; --input-border: rgba(13, 10, 34, 0.15); /* === 3D inline-SVG en light === * Prisme → violet identitaire (var(--primary)) au lieu de #0a0420 noir. * Tags chip → fond très léger, stroke épaissi (1.7 vs 1.2) pour rester * visible sur fond crème. * Ombres → violet doux (color-mix avec primary) au lieu de noir pur. * Bubbles meeting/tunnel → blanc 95 % au lieu de rgba(0,0,0,.55). * Sparkle prisme → cyan pour un pop coloré sur la face violet (le point * noir-sur-noir était invisible). * Top des barres spectrogram → primary translucide au lieu de noir. */ --3d-prism-fill: var(--primary); --3d-prism-fill-opacity-top: 0.78; --3d-prism-fill-opacity-mid: 0.34; --3d-prism-stroke-opacity: 0.72; --3d-prism-edge-opacity: 0.85; --3d-prism-sparkle: var(--cyan); --3d-prism-depth-fill-opacity: 0.22; --3d-prism-depth-stroke-opacity: 0.55; --3d-beam-stroke: var(--primary); --3d-beam-opacity: 0.85; --3d-tag-fill-opacity: 0.10; --3d-tag-stroke-w: 1.7; --3d-tag-text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6); --3d-floor-shadow: rgba(99, 91, 255, 0.18); --3d-avatar-shadow: rgba(13, 10, 34, 0.16); --3d-tag-bubble-bg: rgba(255, 255, 255, 0.94); --3d-tag-bubble-stroke-opacity: 1; --3d-tunnel-tag-bg: rgba(255, 255, 255, 0.92); --3d-tunnel-tag-stroke-w: 2; --3d-table-fill: var(--primary); --3d-table-fill-opacity: 0.07; --3d-table-stroke-opacity: 0.55; --3d-table-dash-opacity: 0.35; --3d-spectrogram-top-fill: var(--primary); --3d-spectrogram-top-opacity: 0.30; color-scheme: light; } /* Transition douce au changement de thème (mais pas au load initial : le * data-theme est posé AVANT le premier paint par theme.js dans ). */ html.theme-ready, html.theme-ready body, html.theme-ready * { transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease; } /* Bouton toggle — style commun, peut être surchargé par chaque page. * * NOTE 2026-05-21 : mode clair désactivé temporairement → bouton masqué * via `display: none !important` ci-dessous. L'élément reste dans le DOM * (l'invariant `TestToggleButton` continue de passer) mais n'est plus * cliquable. Pour réactiver : retirer la ligne `display:none !important` * ET passer `LIGHT_MODE_ENABLED = true` dans theme.js. */ .theme-toggle { display: none !important; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0; border-radius: 10px; background: var(--surface); border: 1px solid var(--border); color: var(--text); cursor: pointer; font-family: inherit; font-size: 18px; line-height: 1; transition: background-color 150ms ease, border-color 150ms ease, transform 150ms ease; } .theme-toggle:hover { background: var(--surface-2); border-color: var(--border-strong); } .theme-toggle:active { transform: scale(0.94); } .theme-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* Affiche soleil en mode sombre (= action : passer au clair), * lune en mode clair (= action : passer au sombre). */ .theme-toggle .theme-icon-sun { display: inline; } .theme-toggle .theme-icon-moon { display: none; } [data-theme="light"] .theme-toggle .theme-icon-sun { display: none; } [data-theme="light"] .theme-toggle .theme-icon-moon { display: inline; } /* Bouton bascule langue FR / EN. * Style aligné sur .theme-toggle pour cohérence visuelle. Affiche la langue * VERS LAQUELLE on bascule (data-lang du bouton = langue actuelle). * Câblage et injection des spans dans frontend/i18n.js. */ .lang-toggle { display: inline-flex; align-items: center; justify-content: center; min-width: 48px; height: 38px; padding: 0 10px; border-radius: 10px; background: var(--surface); border: 1px solid var(--border); color: var(--text); cursor: pointer; font-family: inherit; font-size: 13px; font-weight: 600; letter-spacing: 0.03em; line-height: 1; transition: background-color 150ms ease, border-color 150ms ease, transform 150ms ease; } .lang-toggle:hover { background: var(--surface-2); border-color: var(--border-strong); } .lang-toggle:active { transform: scale(0.94); } .lang-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* En FR, montre "EN" (action : passer en anglais). En EN, montre "FR". */ .lang-toggle .lang-icon-fr { display: none; } .lang-toggle .lang-icon-en { display: inline; } .lang-toggle[data-lang="en"] .lang-icon-fr { display: inline; } .lang-toggle[data-lang="en"] .lang-icon-en { display: none; }