/* * Jetons de couleur du site vitrine, thème sombre (défaut) et thème clair. * Le thème est posé sur par assets/prefs.js ; * sans JavaScript, on suit prefers-color-scheme. * * Le clair reste dans la charte Axe (cf. identite-visuelle/ et * app/lib/app/theme.dart) : fond ivoire, encre noir bleuté, bleu nuit en * accent d'action. Les mêmes valeurs sont reprises côté Flutter (AxePalette). */ :root, :root[data-theme="dark"] { --bg: #050505; --surface: #101114; --surface-2: #16171B; --ink: #F4EFE6; --muted: #8A8783; --line: #1D1E22; --brand: #12284B; --brand-2: #1E3A66; --on-brand: #F4EFE6; --accent: #F4EFE6; --on-accent: #050505; --accent-hover: #FFFFFF; --cocon: #201C19; --cocon-ink: #B8B0A6; --cta-ink: #B9BBC2; --cta-bg: linear-gradient(135deg, var(--brand) 0%, var(--surface-2) 62%, var(--surface) 100%); --brand-tint: 22%; --hero-glow: 0.75; --danger: #E5484D; --soft: rgba(255, 255, 255, 0.06); color-scheme: dark; } :root[data-theme="light"] { --bg: #F7F4EE; --surface: #FFFFFF; --surface-2: #FDFBF7; --ink: #11151D; --muted: #5C5852; --line: #E3DDD2; --brand: #12284B; --brand-2: #2A4A7F; --on-brand: #F4EFE6; --accent: #12284B; --on-accent: #F4EFE6; --accent-hover: #1E3A66; --cocon: #F0E7DC; --cocon-ink: #5B4E42; --cta-ink: #4A4F5A; --cta-bg: linear-gradient(135deg, color-mix(in srgb, var(--brand) 16%, var(--surface)) 0%, var(--surface) 72%); --brand-tint: 9%; --hero-glow: 0.16; --danger: #C4282E; --soft: rgba(17, 21, 29, 0.05); color-scheme: light; } /* Sans JavaScript (data-theme absent) : on suit le système. */ @media (prefers-color-scheme: light) { :root:not([data-theme]) { --bg: #F7F4EE; --surface: #FFFFFF; --surface-2: #FDFBF7; --ink: #11151D; --muted: #5C5852; --line: #E3DDD2; --brand-2: #2A4A7F; --accent: #12284B; --on-accent: #F4EFE6; --accent-hover: #1E3A66; --cocon: #F0E7DC; --cocon-ink: #5B4E42; --cta-ink: #4A4F5A; --cta-bg: linear-gradient(135deg, color-mix(in srgb, var(--brand) 16%, var(--surface)) 0%, var(--surface) 72%); --brand-tint: 9%; --hero-glow: 0.16; --danger: #C4282E; --soft: rgba(17, 21, 29, 0.05); color-scheme: light; } } body { background: var(--bg); color: var(--ink); transition: background-color 200ms ease, color 200ms ease; } @media (prefers-reduced-motion: reduce) { body { transition: none; } } /* ---------- Contrôles thème + langue (injectés par prefs.js) ---------- */ .prefs { display: flex; align-items: center; gap: 0.5rem; min-width: 96px; /* réserve la place avant l'injection : pas de saut de mise en page */ min-height: 34px; } .pref-btn { width: 34px; height: 34px; display: inline-grid; place-items: center; padding: 0; border-radius: 50%; border: 1px solid var(--line); background: transparent; color: var(--muted); cursor: pointer; transition: color 160ms ease, border-color 160ms ease; } .pref-btn:hover { color: var(--ink); border-color: var(--muted); } .lang { position: relative; } .lang-pill { display: inline-flex; align-items: center; gap: 0.4rem; height: 34px; padding: 0 0.7rem; border-radius: 17px; border: 1px solid var(--line); background: transparent; color: var(--muted); font: inherit; font-size: 0.78rem; letter-spacing: 0.08em; cursor: pointer; transition: color 160ms ease, border-color 160ms ease; } .lang-pill:hover, .lang-pill[aria-expanded="true"] { color: var(--ink); border-color: var(--muted); } .lang-pill svg, .lang-menu svg { display: block; border-radius: 2px; flex: none; } .lang-menu { position: absolute; right: 0; top: calc(100% + 0.45rem); min-width: 10rem; margin: 0; padding: 0.35rem; list-style: none; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18); z-index: 20; } .lang-menu[hidden] { display: none; } .lang-menu a { display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0.65rem; border-radius: 5px; font-size: 0.88rem; letter-spacing: 0; color: var(--ink); text-decoration: none; } .lang-menu a:hover { background: var(--soft); color: var(--ink); } .lang-menu a[aria-current="true"] { font-weight: 600; } .pref-btn:focus-visible, .lang-pill:focus-visible, .lang-menu a:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }