/* ================================================================= FUTURACARS — DESIGN SYSTEM (self-contained, zero-build) Source: _BLUEPRINT/BP_1_design_system.md (mesuré au pixel sur les 10 maquettes) Principe: monochrome encre/gris + UN seul orange d'action. Charge Inter + Geist Mono via Google Fonts dans le . ================================================================= */ /* ---- 1. TOKENS BRUTS (raw scale, chroma 0 sauf accent/sémantiques) ---- */ :root { color-scheme: light; /* Neutres / encre */ --color-ink-950: oklch(15.4% 0 0); --color-ink-900: oklch(19.1% 0 0); --color-ink-800: oklch(23.1% 0 0); --color-ink-700: oklch(30.9% 0 0); --color-ink-600: oklch(37.1% 0 0); --color-ink-500: oklch(48.8% 0 0); --color-ink-400: oklch(60.0% 0 0); --color-ink-300: oklch(70.6% 0 0); --color-ink-200: oklch(85.8% 0 0); --color-ink-100: oklch(90.7% 0 0); --color-ink-50: oklch(95.5% 0 0); --color-ink-0: oklch(99.0% 0 0); /* Accent orange (UNIQUE couleur d'action) */ --color-accent-400: oklch(72.0% 0.170 45); --color-accent: oklch(66.6% 0.192 42); /* FOND only */ --color-accent-600: oklch(63.0% 0.200 40); --color-accent-700: oklch(56.0% 0.190 42); --color-accent-ink: oklch(50.0% 0.160 40); /* TEXTE/lien orange (AA) */ /* Sémantiques */ --color-success: oklch(61.0% 0.170 147); --color-success-ink: oklch(52.0% 0.130 147); --color-success-bg: oklch(95.0% 0.030 147); --color-danger: oklch(57.0% 0.190 30); --color-danger-ink: oklch(50.0% 0.180 30); --color-danger-bg: oklch(95.0% 0.035 30); --color-warning: oklch(75.0% 0.150 80); --color-warning-ink: oklch(52.0% 0.120 80); --color-warning-bg: oklch(96.0% 0.030 85); --color-info: oklch(64.0% 0.060 240); --color-info-ink: oklch(48.0% 0.060 240); --color-info-bg: oklch(95.0% 0.020 240); /* Rayons */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 20px; --radius-full: 9999px; /* Typo */ --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --font-mono: "Geist Mono", ui-monospace, "JetBrains Mono", monospace; --text-label: .75rem; --text-sm: .875rem; --text-base: 1rem; --text-lg: 1.125rem; --text-h4: 1.25rem; --text-h3: 1.563rem; --text-h2: 1.953rem; --text-h1: 2.441rem; --text-display: 3.052rem; /* Ombres */ --shadow-xs: 0 1px 2px oklch(20% 0 0 / .05); --shadow-sm: 0 1px 3px oklch(20% 0 0 / .08), 0 1px 2px oklch(20% 0 0 / .05); --shadow-md: 0 4px 12px oklch(20% 0 0 / .08), 0 2px 4px oklch(20% 0 0 / .05); --shadow-lg: 0 12px 28px oklch(20% 0 0 / .10), 0 4px 8px oklch(20% 0 0 / .05); /* Motion */ --ease-out: cubic-bezier(.16,1,.3,1); --ease-in: cubic-bezier(.7,0,.84,0); --ease-in-out: cubic-bezier(.65,0,.35,1); --duration-fast: 150ms; --duration-base: 250ms; --duration-slow: 400ms; /* ---- 2. TOKENS SÉMANTIQUES (les composants ne consomment QUE ceux-ci) ---- */ --fc-bg: var(--color-ink-50); --fc-surface: var(--color-ink-0); --fc-surface-raised: oklch(98% 0 0); --fc-surface-sunken: oklch(93.7% 0 0); --fc-border: var(--color-ink-200); --fc-border-weak: var(--color-ink-100); --fc-border-strong: var(--color-ink-300); --fc-text: var(--color-ink-900); --fc-text-muted: var(--color-ink-500); --fc-text-subtle: var(--color-ink-400); --fc-text-on-accent: var(--color-ink-0); --fc-accent: var(--color-accent); --fc-accent-hover: var(--color-accent-600); --fc-accent-text: var(--color-accent-ink); --fc-ring: var(--color-accent); --fc-shadow: var(--shadow-md); --fc-shadow-hover: var(--shadow-lg); } /* ---- DARK : espace client (préférence) + sidebars admin. Public = toujours clair ---- */ [data-theme="dark"] { color-scheme: dark; --fc-bg: oklch(19.1% 0 0); --fc-surface: oklch(20.9% 0 0); --fc-surface-raised: oklch(22.6% 0 0); --fc-surface-sunken: oklch(15.4% 0 0); --fc-border: oklch(27.0% 0 0); --fc-border-weak: oklch(24.0% 0 0); --fc-border-strong: oklch(32.0% 0 0); --fc-text: oklch(97.0% .003 264); --fc-text-muted: oklch(70.6% 0 0); --fc-text-subtle: oklch(55.0% 0 0); --fc-text-on-accent: oklch(99% 0 0); --fc-accent-text: var(--color-accent-400); --fc-ring: var(--color-accent-400); --fc-shadow: 0 8px 24px oklch(0% 0 0 / .40); --fc-shadow-hover: 0 16px 40px oklch(0% 0 0 / .50); } /* ---- BASE ---- */ .fc-scope, .fc-client { background: var(--fc-bg); color: var(--fc-text); } body.fc-body { background: var(--fc-bg); color: var(--fc-text); font-family: var(--font-sans); font-size: var(--text-base); line-height: 1.6; font-feature-settings: "tnum" 1, "kern" 1, "liga" 1; -webkit-font-smoothing: antialiased; } .fc-scope :focus-visible, .fc-client :focus-visible { outline: 2px solid var(--fc-ring); outline-offset: 2px; border-radius: var(--radius-sm); } /* ---- TYPOGRAPHIE ---- */ .fc-display { font-family: var(--font-sans); font-size: var(--text-display); line-height: 1.05; font-weight: 800; letter-spacing: -.02em; text-wrap: balance; } .fc-h1 { font-size: var(--text-h1); line-height: 1.1; font-weight: 700; letter-spacing: -.02em; text-wrap: balance; } .fc-h2 { font-size: var(--text-h2); line-height: 1.15; font-weight: 700; letter-spacing: -.01em; } .fc-h3 { font-size: var(--text-h3); line-height: 1.2; font-weight: 600; letter-spacing: -.01em; } .fc-h4 { font-size: var(--text-h4); line-height: 1.3; font-weight: 600; } .fc-body-lg { font-size: var(--text-lg); line-height: 1.55; } .fc-body-txt { font-size: var(--text-base); line-height: 1.6; } .fc-sm { font-size: var(--text-sm); line-height: 1.5; } .fc-label { font-size: var(--text-label); line-height: 1.4; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; } .fc-kpi { font-family: var(--font-mono); font-size: var(--text-h2); line-height: 1.1; font-weight: 600; font-feature-settings: "tnum" 1; } .fc-mono { font-family: var(--font-mono); font-feature-settings: "tnum" 1; } .fc-eyebrow { font-size: var(--text-label); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--fc-text-muted); display: inline-flex; align-items: center; gap: .5em; } .fc-eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 9999px; background: var(--color-accent); } .fc-link { color: var(--fc-accent-text); text-decoration: none; } .fc-link:hover { text-decoration: underline; } .fc-measure { max-width: 65ch; } /* ---- BOUTONS ---- */ .fc-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 44px; padding: 0 1.25rem; font-family: var(--font-sans); font-size: var(--text-base); font-weight: 600; line-height: 1; border-radius: var(--radius-md); border: 1px solid transparent; cursor: pointer; user-select: none; white-space: nowrap; text-decoration: none; transition: background var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out); } .fc-btn:active { transform: translateY(1px); } .fc-btn[disabled], .fc-btn.is-disabled { opacity: .5; cursor: not-allowed; transform: none; } .fc-btn--primary { background: var(--fc-accent); color: var(--fc-text-on-accent); box-shadow: var(--shadow-xs); } .fc-btn--primary:hover:not([disabled]) { background: var(--fc-accent-hover); } .fc-btn--secondary { background: transparent; border-color: var(--fc-border-strong); color: var(--fc-text); } .fc-btn--secondary:hover:not([disabled]) { background: var(--fc-surface-sunken); } .fc-btn--ghost { background: transparent; color: var(--fc-text-muted); } .fc-btn--ghost:hover:not([disabled]) { background: var(--fc-surface-sunken); color: var(--fc-text); } .fc-btn--danger { background: var(--color-danger); color: #fff; } .fc-btn--sm { min-height: 36px; padding: 0 .875rem; font-size: var(--text-sm); } .fc-btn--lg { min-height: 52px; padding: 0 1.75rem; font-size: var(--text-lg); } /* ---- CHAMPS ---- */ .fc-field { display: flex; flex-direction: column; gap: .375rem; } .fc-field__label { font-size: var(--text-sm); font-weight: 600; color: var(--fc-text-muted); } .fc-input, .fc-field__input, .fc-select, .fc-textarea { min-height: 44px; padding: .625rem .875rem; background: var(--fc-surface); color: var(--fc-text); border: 1px solid var(--fc-border); border-radius: var(--radius-md); font-family: var(--font-sans); font-size: var(--text-base); width: 100%; transition: border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out); } .fc-textarea { min-height: 96px; } .fc-input::placeholder, .fc-textarea::placeholder { color: var(--fc-text-subtle); } .fc-input:focus-visible, .fc-select:focus-visible, .fc-textarea:focus-visible { outline: none; border-color: var(--fc-accent); box-shadow: 0 0 0 3px oklch(66.6% .192 42 / .20); } .fc-input:user-invalid { border-color: var(--color-danger); } .fc-field__hint { font-size: var(--text-label); color: var(--fc-text-subtle); } .fc-field__error { font-size: var(--text-label); color: var(--color-danger-ink); } /* ---- CARTE VÉHICULE ---- */ .fc-vehicle-card { display: flex; flex-direction: column; overflow: hidden; background: var(--fc-surface); border: 1px solid var(--fc-border-weak); border-radius: var(--radius-lg); box-shadow: var(--fc-shadow); transition: box-shadow var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out); } .fc-vehicle-card:hover { box-shadow: var(--fc-shadow-hover); transform: translateY(-2px); } .fc-vehicle-card:focus-within { outline: 2px solid var(--fc-ring); outline-offset: 2px; } .fc-vehicle-card__media { position: relative; display: block; aspect-ratio: 16/10; } .fc-vehicle-card__media img { width: 100%; height: 100%; object-fit: cover; border-top-left-radius: var(--radius-lg); border-top-right-radius: var(--radius-lg); } .fc-vehicle-card__status { position: absolute; top: .75rem; left: .75rem; } .fc-vehicle-card__fav { position: absolute; top: .5rem; right: .5rem; width: 40px; height: 40px; border-radius: 9999px; border: none; background: oklch(99% 0 0 / .9); cursor: pointer; } .fc-vehicle-card__body { display: flex; flex-direction: column; gap: .25rem; padding: 1.5rem; } .fc-vehicle-card__specs, .fc-vehicle-card__from { color: var(--fc-text-muted); } .fc-vehicle-card__price { margin-top: .25rem; } .fc-vehicle-card__footer { display: flex; align-items: center; justify-content: space-between; padding: 0 1.5rem 1.5rem; } .fc-vehicle-card[data-status="sold"] .fc-vehicle-card__media img { filter: saturate(.4) opacity(.7); } /* ---- BADGES ---- */ .fc-badge { display: inline-flex; align-items: center; gap: .375rem; padding: .25rem .625rem; border-radius: var(--radius-sm); font-size: var(--text-label); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; } .fc-badge--success { color: var(--color-success-ink); background: var(--color-success-bg); } .fc-badge--accent { color: var(--fc-accent-text); background: oklch(66.6% .192 42 / .12); } .fc-badge--danger { color: var(--color-danger-ink); background: var(--color-danger-bg); } .fc-badge--warning { color: var(--color-warning-ink); background: var(--color-warning-bg); } .fc-badge--neutral { color: var(--fc-text-muted); background: var(--color-ink-100); } /* ---- CARTE KPI ---- */ .fc-kpi-card { padding: 1.5rem; background: var(--fc-surface); border: 1px solid var(--fc-border-weak); border-radius: var(--radius-lg); box-shadow: var(--fc-shadow); } .fc-kpi-card__title { color: var(--fc-text-subtle); } .fc-kpi-card__delta { margin-top: .25rem; font-size: var(--text-sm); } .fc-kpi-card__delta--up { color: var(--color-success-ink); } .fc-kpi-card__delta--down { color: var(--color-danger-ink); } /* ---- SURFACE / PANNEAU générique ---- */ .fc-card { background: var(--fc-surface); border: 1px solid var(--fc-border-weak); border-radius: var(--radius-lg); box-shadow: var(--fc-shadow); } .fc-panel { background: var(--fc-surface); border: 1px solid var(--fc-border-weak); border-radius: var(--radius-lg); } /* ---- TABLE ADMIN ---- */ .fc-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); } .fc-table caption { text-align: left; } .fc-table thead th { position: sticky; top: 0; background: var(--fc-surface-sunken); padding: .625rem 1rem; text-align: left; font-size: var(--text-label); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--fc-text-subtle); } .fc-table tbody td { padding: .625rem 1rem; border-top: 1px solid var(--fc-border-weak); } .fc-table tbody tr:hover { background: var(--fc-surface-sunken); } .fc-table .is-num { text-align: right; font-variant-numeric: tabular-nums; } /* ---- DIALOG natif ---- */ .fc-dialog { border: none; border-radius: var(--radius-lg); padding: 0; max-width: 32rem; width: calc(100% - 2rem); background: var(--fc-surface); color: var(--fc-text); box-shadow: var(--fc-shadow-hover); } .fc-dialog::backdrop { background: oklch(15% 0 0 / .5); backdrop-filter: blur(2px); } .fc-dialog__body { display: flex; flex-direction: column; gap: 1rem; padding: 1.5rem; } .fc-dialog__actions { display: flex; justify-content: flex-end; gap: .75rem; margin-top: .5rem; } /* ---- SIDEBAR (client + admin) ---- */ .fc-sidebar { width: 240px; background: var(--fc-surface); border-right: 1px solid var(--fc-border-weak); } .fc-sidebar__item { display: flex; align-items: center; gap: .75rem; min-height: 44px; padding: 0 .875rem; border-radius: var(--radius-md); color: var(--fc-text-muted); position: relative; text-decoration: none; } .fc-sidebar__item:hover { background: var(--fc-surface-sunken); color: var(--fc-text); } .fc-sidebar__item[aria-current="page"] { background: var(--fc-accent); color: var(--fc-text-on-accent); font-weight: 600; } .fc-sidebar__item[aria-current="page"]::before { content: ""; position: absolute; left: -1px; top: 8px; bottom: 8px; width: 3px; border-radius: 9999px; background: var(--color-accent-700); } /* ---- FOOTER (toujours sombre) ---- */ .fc-footer { background: var(--color-ink-800); color: var(--color-ink-200); } .fc-footer a { color: var(--color-ink-200); text-decoration: none; } .fc-footer a:hover { color: var(--color-ink-0); } .fc-footer__title { color: var(--color-ink-400); } /* ---- STEPPER ---- */ .fc-step { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 9999px; border: 1px solid var(--fc-border-strong); color: var(--fc-text-muted); font-weight: 600; font-size: var(--text-sm); } .fc-step.is-active { background: var(--fc-accent); color: var(--fc-text-on-accent); border-color: transparent; } .fc-step.is-done { background: var(--color-success); color: #fff; border-color: transparent; } /* ---- CONTAINER / GRID / LAYOUT ---- */ .fc-container { width: 100%; max-width: 1280px; margin-inline: auto; padding-inline: 1rem; } .fc-container--wide { max-width: 1440px; } @media (min-width: 1024px) { .fc-container { padding-inline: 1.5rem; } } .fc-grid-vehicles { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); } .fc-app { display: grid; grid-template-columns: 1fr; } @media (min-width: 1024px) { .fc-app { grid-template-columns: 240px 1fr; } } .fc-vehicle-layout { display: grid; gap: 2rem; grid-template-columns: 1fr; } @media (min-width: 1024px) { .fc-vehicle-layout { grid-template-columns: 1fr 380px; } .fc-vehicle-layout__aside { position: sticky; top: 88px; align-self: start; } } .fc-density-comfortable { --fc-pad-card: 1.5rem; --fc-gap: 1.5rem; } .fc-density-compact { --fc-pad-card: 1rem; --fc-gap: .75rem; } /* ---- MOTION ---- */ /* Reveal via CSS animation on load — robuste, sans dépendance JS/plugin (le contenu s'affiche TOUJOURS). */ .fc-enter { opacity: 0; transform: translateY(12px); animation: fc-reveal var(--duration-base) var(--ease-out) both; animation-delay: calc(var(--i, 0) * 60ms + 0.05s); } .fc-enter.is-in { opacity: 1; transform: none; } @keyframes fc-reveal { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } } .fc-stagger > * { transition-delay: calc(var(--i, 0) * 40ms); } @media (prefers-reduced-motion: reduce) { .fc-btn, .fc-vehicle-card { transition-duration: 1ms; } .fc-btn:active, .fc-vehicle-card:hover { transform: none; } .fc-enter { animation: none; opacity: 1; transform: none; } .fc-stagger > * { transition-delay: 0ms; } }