/* ════════════════════════════════════════════════════════════════════ BoB — design system (statique). Extrait de head.ejs + nav.ejs (ARCH-2). Le seul token dynamique (--accent, depuis settings.accent_color) reste injecté inline dans head.ejs et surcharge le repli défini ci-dessous. ════════════════════════════════════════════════════════════════════ */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; } :root { --accent: #3399CC; /* repli ; surchargé inline depuis settings.accent_color */ --accent-soft: color-mix(in srgb, var(--accent) 8%, transparent); --font-display: "Manrope", system-ui, sans-serif; --font-body: "Manrope", system-ui, sans-serif; --w-display: 800; color-scheme: light; --paper: #ffffff; --paper-2: #fafaf7; --ink: #0a0a0a; /* Encres atténuées — relevées pour repasser au-dessus du seuil WCAG AA (4,5:1) sur les petits labels, sans alourdir visuellement le rendu. */ --ink-mute: rgba(10, 10, 10, .72); --ink-soft: rgba(10, 10, 10, .62); --ink-faint: rgba(10, 10, 10, .5); --ink-line: rgba(10, 10, 10, .12); --ink-line-strong: rgba(10, 10, 10, .22); --ink-wash: rgba(10, 10, 10, .04); --ok: #16734a; --warn: #8a5a00; --err: #9c1c1c; --info: var(--accent); --r-sm: 2px; --r-md: 4px; --pad-x: clamp(20px, 5vw, 64px); --pad-y: clamp(28px, 4vw, 56px); --gap-section: clamp(36px, 5vw, 64px); } /* ═══════════ Thème sombre ═══════════ Activé via [data-theme="dark"] posé sur par le script pré-paint (préférence stockée, sinon prefers-color-scheme). On ne redéfinit que les tokens : tout le système, bâti dessus, s'adapte automatiquement. */ :root[data-theme="dark"] { color-scheme: dark; --paper: #131311; --paper-2: #1b1b18; --ink: #f3f2ec; --ink-mute: rgba(243, 242, 236, .74); --ink-soft: rgba(243, 242, 236, .60); --ink-faint: rgba(243, 242, 236, .46); --ink-line: rgba(243, 242, 236, .15); --ink-line-strong: rgba(243, 242, 236, .28); --ink-wash: rgba(243, 242, 236, .06); /* Couleurs sémantiques éclaircies : les teintes sombres du thème clair (#16734a, #9c1c1c…) seraient illisibles en texte sur fond foncé. */ --ok: #3ddc91; --warn: #f0b429; --err: #ff6b6b; --info: var(--accent); } /* La flèche du