/* ── Fonts ── */ @font-face { font-family: 'Cinzel'; font-weight: 700; font-display: swap; src: url('/assets/fonts/Cinzel-Bold.woff2') format('woff2'); } @font-face { font-family: 'Cutive Mono'; font-weight: 400; font-display: swap; src: url('/assets/fonts/CutiveMono-Regular.woff2') format('woff2'); } /* ── Variables « legal » ── Consommées par /legal/*. La home (index.html) a sa propre section plus bas dans ce fichier, avec sa propre palette (--primary-dark…), volontairement distincte — voir CLAUDE.md § Site root et § Convention de variables CSS. Ces valeurs sont le thème SOMBRE (défaut historique de la section legal) — voir plus bas le bloc [data-color-scheme="light"] pour le thème clair, et docs/theme-light-dark-spec.md pour la spec complète du toggle. */ :root { --bg: #0c0608; --bg2: #130a0c; --c1: #e8822a; /* ambre chaud — accent principal */ --c2: #a04828; /* bordeaux-ambre — secondaire */ --c3: #3a1408; /* très sombre */ --c4: #1e0c0a; /* fond cards */ --text: #f0e4d8; /* blanc cassé chaud */ --text2: #8a6050; /* texte secondaire */ --border: #3a1a10; --gradient: linear-gradient(135deg, #8c1432 0%, #c84020 40%, #f6a608 100%); --font-title: 'Cinzel', Georgia, serif; --font-mono: 'Cutive Mono', monospace; --header-height: 56px; color-scheme: dark; } /* ── Thème clair « legal » ── Bascule via www/color-scheme.js — attribut data-color-scheme sur . Valeurs réutilisées de la palette HOME claire (§ plus bas) : même dégradé de marque, juste appliqué sur fond clair au lieu de fond sombre. ⚠️ --c2 : valeur candidate, contraste texte à valider avec un outil réel avant de considérer ce thème comme définitif (voir docs/theme-light-dark-spec.md §4.3). */ :root[data-color-scheme="light"] { --bg: #fafaf8; --bg2: #f1ece4; --c1: #8c1432; /* bordeaux — l'ambre n'a pas assez de contraste texte sur fond clair */ --c2: #8a5a20; --c3: #e8e2d8; --c4: #f5f0e8; --text: #2a2a28; --text2: #6b6b69; --border: #e8e8e6; color-scheme: light; } /* ── Reset ── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } /* ─── ASCENSEUR THÉMÉ (legal, défaut) ──────────────────────────────────── scrollbar-color est une propriété héritée : une seule déclaration ici couvre le scroll de page ET tout panel interne sans règle plus spécifique — voir docs/scrollbar-theme-spec.md. Thumb = --border (a déjà sa propre valeur clair/sombre via [data-color-scheme], voir plus haut) — surchargé pour la home par html:has(body.home) plus bas (--home-border), --border étant scopé legal uniquement dans son usage visuel malgré sa portée :root. */ :root { scrollbar-width: thin; scrollbar-color: var(--border) transparent; } *::-webkit-scrollbar { width: 8px; height: 8px; } *::-webkit-scrollbar-track { background: transparent; } *::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; } *::-webkit-scrollbar-thumb:hover { background: var(--c1, var(--border)); } body { background: var(--bg); color: var(--text); font-family: var(--font-mono); font-size: 14px; line-height: 1.7; overflow-x: hidden; } a { color: var(--c1); text-decoration: none; } a:hover { color: var(--text); } /* ── Grain overlay ── */ body::before { content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0.04; background-image: url("/assets/grain.svg"); background-size: 256px 256px; } /* ── Toggle clair/sombre — icônes partagées (home + header.js) ── Les deux boutons (home custom, header.js) contiennent en permanence les deux icônes .theme-toggle-icon--sun/--moon ; seule celle qui ne correspond pas au thème courant est masquée, en pur CSS, sans JS ni flash au clic. Voir docs/theme-light-dark-spec.md §5.4/§5.5. */ :root[data-color-scheme="light"] .theme-toggle-icon--sun, :root[data-color-scheme="dark"] .theme-toggle-icon--moon { display: none; } /* ══════════════════════════════════════════════════ HOME (www/index.html) Déplacé depuis le