/* ============================================================ OC PLANNER — Design system « Foundry » (source de vérité) Chargé par le layout React (toutes les pages) ET par l'éditeur. Thème clair par défaut, sombre via prefers-color-scheme, forçable via [data-theme="light|dark"] sur . Classes primitives préfixées .fd-* pour ne jamais entrer en collision avec l'ancien public/styles.css pendant la migration. ============================================================ */ :root { /* — surfaces (clair : béton / sable) — */ --bg: #e7e3da; --bg-deep: #ddd7ca; --panel: #f5f2ec; --panel-2: #ece7dd; --ink: #1c1a16; --ink-dim: #46423b; --muted: #6f6a60; /* — accent : orange brûlé / ambre — */ --accent: #c2521f; --accent-2: #d98a2b; --accent-ink: #fff8f2; --accent-soft: rgba(194, 82, 31, 0.12); --accent-line: rgba(194, 82, 31, 0.30); /* — lignes & ombres — */ --border: #cfc9bc; --border-strong: #b6afa0; --shadow-1: 0 1px 0 rgba(255, 255, 255, 0.5); --shadow-2: 0 18px 44px -28px rgba(60, 40, 20, 0.45); /* — sémantiques (distinctes de l'accent) — */ --good: #3f7d3a; --warn: #b7791f; --bad: #b23a2e; --info: #2f6fb3; /* — composantes RGB (pour rgba(var(--x-rgb), α)) : theme-aware — */ --ink-rgb: 28, 26, 22; --accent-rgb: 194, 82, 31; /* — typo — */ --font-display: "Saira Condensed", "Arial Narrow", system-ui, sans-serif; --font-body: "Saira", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; /* — rayons — */ --r-sm: 6px; --r: 9px; --r-lg: 16px; --r-pill: 999px; color-scheme: light; } /* dark = préférence OS (sauf si l'utilisateur a forcé le clair) */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #0d0e11; --bg-deep: #090a0c; --panel: #16181d; --panel-2: #1b1e25; --ink: #ece9e2; --ink-dim: #b6b1a7; --muted: #8b877e; --accent: #ee7a37; --accent-2: #ffb454; --accent-ink: #16100a; --accent-soft: rgba(238, 122, 55, 0.14); --accent-line: rgba(238, 122, 55, 0.38); --border: rgba(255, 255, 255, 0.10); --border-strong: rgba(255, 255, 255, 0.18); --shadow-1: 0 1px 0 rgba(255, 255, 255, 0.04); --shadow-2: 0 24px 60px -34px rgba(0, 0, 0, 0.7); --good: #5fae54; --warn: #e0a13a; --bad: #e0685a; --info: #6aa9e0; --ink-rgb: 236, 233, 226; --accent-rgb: 238, 122, 55; color-scheme: dark; } } /* dark forcé explicitement (le toggle gagne toujours) */ :root[data-theme="dark"] { --bg: #0d0e11; --bg-deep: #090a0c; --panel: #16181d; --panel-2: #1b1e25; --ink: #ece9e2; --ink-dim: #b6b1a7; --muted: #8b877e; --accent: #ee7a37; --accent-2: #ffb454; --accent-ink: #16100a; --accent-soft: rgba(238, 122, 55, 0.14); --accent-line: rgba(238, 122, 55, 0.38); --border: rgba(255, 255, 255, 0.10); --border-strong: rgba(255, 255, 255, 0.18); --shadow-1: 0 1px 0 rgba(255, 255, 255, 0.04); --shadow-2: 0 24px 60px -34px rgba(0, 0, 0, 0.7); --good: #5fae54; --warn: #e0a13a; --bad: #e0685a; --info: #6aa9e0; --ink-rgb: 236, 233, 226; --accent-rgb: 238, 122, 55; color-scheme: dark; } /* ============ base ============ Pose le fond Foundry par défaut. Les pages non encore migrées chargent public/styles.css APRÈS ce fichier et le réécrivent → elles restent inchangées tant qu'on n'a pas retiré leur lien. */ body { background: var(--bg); color: var(--ink); font-family: var(--font-body); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; min-height: 100vh; } /* grille « blueprint » réutilisable en fond de section/hero */ .fd-grid-bg { background-image: linear-gradient(var(--border) 1px, transparent 1px), linear-gradient(90deg, var(--border) 1px, transparent 1px); background-size: 34px 34px; background-position: center; } /* ============ primitives ============ */ .fd-eyebrow { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent); display: inline-flex; align-items: center; gap: 9px; margin: 0; } .fd-eyebrow::before { content: ""; width: 22px; height: 1px; background: var(--accent); } .fd-btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; cursor: pointer; font-family: var(--font-body); font-size: 14px; font-weight: 600; line-height: 1; padding: 12px 20px; border-radius: var(--r); border: 1px solid transparent; text-decoration: none; white-space: nowrap; transition: transform 0.12s ease, filter 0.2s ease, background 0.2s ease, border-color 0.2s ease; } .fd-btn:active { transform: translateY(1px); } .fd-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .fd-btn-primary { background: var(--accent); color: var(--accent-ink); } .fd-btn-primary:hover { filter: brightness(1.07); } .fd-btn-ghost { background: transparent; color: var(--ink); border-color: var(--border-strong); } .fd-btn-ghost:hover { background: var(--panel-2); border-color: var(--accent-line); } .fd-btn-sm { padding: 8px 14px; font-size: 13px; } .fd-tag { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.02em; color: var(--accent); background: var(--accent-soft); border: 1px solid var(--accent-line); padding: 4px 10px; border-radius: var(--r-sm); } .fd-card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-2); } .fd-chip { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 12px; font-weight: 600; padding: 5px 11px; border-radius: var(--r-pill); background: var(--accent-soft); border: 1px solid var(--accent-line); color: var(--accent); text-decoration: none; white-space: nowrap; } /* labels/titres en capitales condensées = signature Foundry */ .fd-kicker { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); } @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; } }