/* ===================================================== FOODHUB — Themes B + A (refonte design) Charte B "Quartz Linear" → admin (data-theme="ops") Charte A "Atelier Tokyo" → public (data-theme="atelier") Switch via attribut sur ou un wrapper : → admin (par défaut sur layout admin) → public (landing, fiches, traçabilité) Les variables override celles de tokens.css quand le thème est appliqué. Compat ascendante : sans attribut, l'ancien design reste actif. ===================================================== */ @import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,700;9..144,900&family=JetBrains+Mono:wght@400;500;700&family=Inter:wght@400;500;600;700;800;900&display=swap'); /* ───────────────────────────────────────────────────── THÈME B — "Quartz Linear" (admin / ops) Light + dark mode auto via prefers-color-scheme ───────────────────────────────────────────────────── */ [data-theme="ops"] { /* Surfaces */ --bg: #FAFAFA; --bg-elev: #FFFFFF; --bg-sunken: #F4F4F5; --border: #E5E5E5; --border-strong: #D4D4D4; /* Text */ --fg: #0E0E0E; --fg-muted: #525252; --fg-subtle: #737373; /* Brand & accent */ --accent: #6366F1; /* Indigo Linear */ --accent-soft: #EEF2FF; --accent-fg: #FFFFFF; /* Semantic */ --success: #10B981; --success-soft: #ECFDF5; --warn: #F59E0B; --warn-soft: #FFFBEB; --danger: #EF4444; --danger-soft: #FEF2F2; --info: #3B82F6; --info-soft: #EFF6FF; /* Type */ --font-body: 'Inter', system-ui, -apple-system, sans-serif; --font-display: 'Inter', system-ui, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, Menlo, monospace; --fs-xs: 11px; --fs-sm: 13px; --fs: 14px; --fs-lg: 16px; --fs-xl: 20px; --fs-2xl: 28px; --fs-3xl: 40px; --fw-reg: 400; --fw-med: 500; --fw-semi: 600; --fw-bold: 700; --fw-black: 900; /* Spacing — base 4px scale */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; /* Radius */ --r-xs: 6px; --r-sm: 8px; --r: 10px; --r-lg: 14px; --r-xl: 20px; /* Shadows */ --shadow-xs: 0 1px 2px rgba(0,0,0,.04); --shadow-sm: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04); --shadow: 0 4px 12px rgba(0,0,0,.06), 0 2px 4px rgba(0,0,0,.04); --shadow-lg: 0 12px 32px rgba(0,0,0,.08), 0 4px 12px rgba(0,0,0,.04); --shadow-focus: 0 0 0 3px rgba(99,102,241,.25); /* Motion */ --ease: cubic-bezier(.25, .46, .45, .94); --dur-fast: 120ms; --dur: 200ms; --dur-slow: 320ms; } /* Dark mode automatique pour le thème ops */ @media (prefers-color-scheme: dark) { [data-theme="ops"][data-color-scheme="auto"], [data-theme="ops"][data-color-scheme="dark"] { --bg: #0A0A0A; --bg-elev: #141414; --bg-sunken: #050505; --border: #262626; --border-strong: #3F3F46; --fg: #FAFAFA; --fg-muted: #A1A1AA; --fg-subtle: #71717A; --accent-soft: rgba(99,102,241,.16); --success-soft: rgba(16,185,129,.12); --warn-soft: rgba(245,158,11,.12); --danger-soft: rgba(239,68,68,.12); --info-soft: rgba(59,130,246,.12); --shadow-xs: 0 1px 2px rgba(0,0,0,.4); --shadow-sm: 0 1px 3px rgba(0,0,0,.5); --shadow: 0 4px 12px rgba(0,0,0,.5); --shadow-lg: 0 12px 32px rgba(0,0,0,.55); } } /* ───────────────────────────────────────────────────── THÈME A — "Atelier Tokyo" (public, fiches, traçabilité) Toujours en mode "lumière" (papier crème) ───────────────────────────────────────────────────── */ [data-theme="atelier"] { /* Surfaces — papier kraft + ivoire */ --bg: #F4EFE6; --bg-elev: #FFFFFF; --bg-sunken: #ECE6D6; --border: #E8DFD0; --border-strong: #D4C9B5; /* Text — encre + sépia */ --fg: #1A1611; --fg-muted: #6B5947; --fg-subtle: #8A6D52; /* Brand & accents */ --accent: #8B1F1F; /* Rouge sceau japonais */ --accent-soft: #FCEEEE; --accent-fg: #FFFFFF; --gold: #B8923A; /* Laiton mat — bordures premium uniquement */ /* Semantic — versions feutrées */ --success: #3F6E4A; --success-soft: #ECF3ED; --warn: #B5651D; --warn-soft: #FBF1E2; --danger: #9B2624; --danger-soft: #FBE9E7; --info: #4A6B8A; --info-soft: #E8EDF3; /* Type — Fraunces serif éditorial */ --font-body: 'Inter', system-ui, sans-serif; --font-display: 'Fraunces', 'Georgia', serif; --font-mono: 'JetBrains Mono', monospace; --fs-xs: 11px; --fs-sm: 13px; --fs: 15px; /* corps un poil plus gros — confort lecture */ --fs-lg: 18px; --fs-xl: 24px; --fs-2xl: 36px; --fs-3xl: 56px; /* display KPIs Fraunces */ --fw-reg: 400; --fw-med: 500; --fw-semi: 600; --fw-bold: 700; --fw-black: 900; /* Spacing — un peu plus généreux que B */ --sp-1: 4px; --sp-2: 8px; --sp-3: 14px; --sp-4: 20px; --sp-5: 28px; --sp-6: 36px; --sp-8: 48px; --sp-10: 64px; /* Radius — plus doux */ --r-xs: 8px; --r-sm: 10px; --r: 14px; --r-lg: 20px; --r-xl: 28px; /* Shadows — très douces, ambiance papier */ --shadow-xs: 0 1px 2px rgba(26,22,17,.04); --shadow-sm: 0 2px 6px rgba(26,22,17,.05); --shadow: 0 4px 16px rgba(26,22,17,.06); --shadow-lg: 0 12px 36px rgba(26,22,17,.10); --shadow-focus: 0 0 0 3px rgba(139,31,31,.18); /* Motion — un peu plus contemplative */ --ease: cubic-bezier(.4, 0, .2, 1); --dur-fast: 150ms; --dur: 250ms; --dur-slow: 400ms; } /* ═════════════════════════════════════════════════════ COMPOSANTS PARTAGÉS — utilisent les variables ci-dessus Préfixe "ds-" (design system) pour pas collisionner avec les fh- existants ═════════════════════════════════════════════════════ */ [data-theme] { font-family: var(--font-body); font-size: var(--fs); color: var(--fg); background: var(--bg); line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } [data-theme] *, [data-theme] *::before, [data-theme] *::after { box-sizing: border-box; } /* ── Type helpers ──────────────────────────────────── */ [data-theme] .ds-eyebrow { font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: .12em; text-transform: uppercase; color: var(--fg-subtle); } [data-theme="atelier"] .ds-eyebrow { font-family: var(--font-mono); letter-spacing: .2em; font-weight: var(--fw-med); color: var(--fg-subtle); } [data-theme] .ds-display { font-family: var(--font-display); font-weight: var(--fw-black); letter-spacing: -.02em; line-height: 1; } [data-theme="atelier"] .ds-display { font-weight: var(--fw-bold); font-style: normal; font-variation-settings: "opsz" 144; letter-spacing: -.01em; } [data-theme] .ds-mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; } /* ── Card ──────────────────────────────────────────── */ [data-theme] .ds-card { background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--r); padding: var(--sp-5); box-shadow: var(--shadow-xs); transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); } [data-theme] .ds-card:hover { box-shadow: var(--shadow-sm); } [data-theme="atelier"] .ds-card { border-radius: var(--r-lg); } /* ── Button ────────────────────────────────────────── */ [data-theme] .ds-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); padding: 10px 16px; border: 1px solid var(--fg); border-radius: var(--r-sm); background: var(--fg); color: var(--bg-elev); font-family: inherit; font-size: var(--fs-sm); font-weight: var(--fw-bold); line-height: 1; cursor: pointer; text-decoration: none; white-space: nowrap; min-height: 38px; transition: background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); } [data-theme] .ds-btn:hover { background: #262626; } [data-theme] .ds-btn:active { transform: scale(.98); } [data-theme] .ds-btn--ghost { background: var(--bg-elev); color: var(--fg); border-color: var(--border-strong); } [data-theme] .ds-btn--ghost:hover { background: var(--bg-sunken); } [data-theme] .ds-btn--accent { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); } [data-theme] .ds-btn--accent:hover { filter: brightness(.92); } [data-theme] .ds-btn--success { background: var(--success); border-color: var(--success); color: #fff; } [data-theme] .ds-btn--danger { background: var(--danger); border-color: var(--danger); color: #fff; } [data-theme] .ds-btn--sm { padding: 6px 10px; min-height: 30px; font-size: var(--fs-xs); } [data-theme] .ds-btn--lg { padding: 14px 24px; min-height: 48px; font-size: var(--fs); } [data-theme="atelier"] .ds-btn { border-radius: 999px; /* pill — feel artisanal */ padding: 12px 22px; letter-spacing: .02em; } /* ── Input ─────────────────────────────────────────── */ [data-theme] .ds-input { display: block; width: 100%; padding: 9px 12px; border: 1px solid var(--border-strong); border-radius: var(--r-sm); background: var(--bg-elev); color: var(--fg); font-family: inherit; font-size: var(--fs-sm); min-height: 38px; transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); } [data-theme] .ds-input:focus { outline: none; border-color: var(--accent); box-shadow: var(--shadow-focus); } [data-theme] .ds-input::placeholder { color: var(--fg-subtle); } /* ── Pill (status, tag) ────────────────────────────── */ [data-theme] .ds-pill { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: .04em; background: var(--bg-sunken); color: var(--fg-muted); white-space: nowrap; } [data-theme] .ds-pill::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; flex-shrink: 0; } [data-theme] .ds-pill--success { background: var(--success-soft); color: var(--success); } [data-theme] .ds-pill--warn { background: var(--warn-soft); color: var(--warn); } [data-theme] .ds-pill--danger { background: var(--danger-soft); color: var(--danger); } [data-theme] .ds-pill--info { background: var(--info-soft); color: var(--info); } [data-theme] .ds-pill--accent { background: var(--accent-soft); color: var(--accent); } /* ── Segmented control ────────────────────────────── */ [data-theme] .ds-seg { display: inline-flex; background: var(--bg-sunken); border-radius: var(--r-sm); padding: 3px; gap: 2px; } [data-theme] .ds-seg__btn { border: 0; background: transparent; color: var(--fg-muted); font-family: inherit; font-size: var(--fs-xs); font-weight: var(--fw-semi); padding: 6px 12px; border-radius: calc(var(--r-sm) - 3px); cursor: pointer; transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); } [data-theme] .ds-seg__btn:hover { color: var(--fg); } [data-theme] .ds-seg__btn[aria-selected="true"], [data-theme] .ds-seg__btn.is-active { background: var(--bg-elev); color: var(--fg); box-shadow: var(--shadow-xs); } /* ── KPI ──────────────────────────────────────────── */ [data-theme] .ds-kpi { background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--r); padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-1); } [data-theme] .ds-kpi__label { font-size: var(--fs-xs); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: .08em; color: var(--fg-subtle); } [data-theme] .ds-kpi__value { font-family: var(--font-display); font-size: var(--fs-2xl); font-weight: var(--fw-black); line-height: 1.05; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--fg); } [data-theme="atelier"] .ds-kpi__value { font-weight: var(--fw-bold); } [data-theme] .ds-kpi__sub { font-size: var(--fs-xs); color: var(--fg-subtle); font-variant-numeric: tabular-nums; } /* ── Table ────────────────────────────────────────── */ [data-theme] .ds-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); } [data-theme] .ds-table th, [data-theme] .ds-table td { padding: 10px 14px; text-align: left; } [data-theme] .ds-table thead th { background: var(--bg-sunken); font-size: var(--fs-xs); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: .06em; color: var(--fg-subtle); border-bottom: 1px solid var(--border); } [data-theme] .ds-table tbody tr { border-bottom: 1px solid var(--border); } [data-theme] .ds-table tbody tr:hover { background: var(--bg-sunken); } [data-theme] .ds-table .ds-num { text-align: right; font-variant-numeric: tabular-nums; font-weight: var(--fw-semi); } [data-theme="atelier"] .ds-table thead th { font-variant: small-caps; letter-spacing: .12em; } /* ── Donut SVG (KPI viz partagés) ─────────────────── */ [data-theme] .ds-donut { --donut-size: 96px; --donut-thickness: 10px; width: var(--donut-size); height: var(--donut-size); position: relative; flex-shrink: 0; } [data-theme] .ds-donut svg { transform: rotate(-90deg); } [data-theme] .ds-donut__track { stroke: var(--bg-sunken); } [data-theme] .ds-donut__fill { stroke: var(--accent); transition: stroke-dashoffset var(--dur) var(--ease); } [data-theme] .ds-donut__center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: var(--fw-black); } [data-theme="atelier"] .ds-donut__center { font-weight: var(--fw-bold); } /* ── Mobile sane defaults ─────────────────────────── */ @media (max-width: 640px) { [data-theme] .ds-btn { min-height: 44px; padding: 12px 18px; font-size: var(--fs); } [data-theme] .ds-input { min-height: 44px; padding: 12px 14px; font-size: var(--fs); } [data-theme] .ds-kpi__value { font-size: var(--fs-xl); } } /* ════════════════════════════════════════════════════════════════════ BRIDGE — re-mappe les classes legacy (.fh-*, .btn-fh, .form-card, etc.) sur les tokens Atelier quand data-theme="atelier" est actif. But : toute l'app hérite du nouveau look sans toucher à chaque vue. IMPORTANT : on override PAR SCOPE [data-theme="atelier"] pour ne pas casser l'existant si quelqu'un retire le thème. Compat ascendante. ═════════════════════════════════════════════════════════════════════ */ [data-theme="atelier"] { /* Re-mappe les variables --fh-* historiques de tokens.css */ --fh-bg: var(--bg); --fh-surface: var(--bg-elev); --fh-surface-alt: var(--bg-sunken); --fh-border: var(--border); --fh-border-strong: var(--border-strong); --fh-fg: var(--fg); --fh-fg-on-surface: var(--fg); --fh-muted: var(--fg-muted); --fh-muted-on-surface: var(--fg-muted); --fh-accent: var(--gold); /* doré laiton — KPIs premium */ --fh-accent-soft: #FBF1E2; --fh-brand: var(--accent); /* rouge sceau japonais comme brand */ --fh-brand-soft: #6E1313; --fh-success: var(--success); --fh-danger: var(--danger); --fh-shadow: var(--shadow); --fh-font-body: var(--font-body); --fh-font-display: var(--font-display); --fh-font-editorial: var(--font-display); --fh-radius-sm: var(--r-sm); --fh-radius: var(--r); --fh-radius-lg: var(--r-lg); } [data-theme="atelier"] body { background: var(--bg); color: var(--fg); font-family: var(--font-body); } /* ── Legacy buttons → look Atelier ─────────────────── */ [data-theme="atelier"] .btn-fh, [data-theme="atelier"] .fh-btn-v1 { background: var(--fg); color: var(--bg-elev); border: 1px solid var(--fg); border-radius: 999px; padding: 10px 22px; font-weight: var(--fw-bold); letter-spacing: .02em; transition: background var(--dur-fast) var(--ease); } [data-theme="atelier"] .btn-fh:hover, [data-theme="atelier"] .fh-btn-v1:hover { background: #2D2620; color: var(--bg-elev); } [data-theme="atelier"] .btn-fh-outline, [data-theme="atelier"] .fh-btn-ghost-v1 { background: var(--bg-elev); color: var(--fg); border-color: var(--border-strong); } [data-theme="atelier"] .btn-fh-outline:hover, [data-theme="atelier"] .fh-btn-ghost-v1:hover { background: var(--bg-sunken); color: var(--fg); border-color: var(--fg); } [data-theme="atelier"] .fh-btn-success-v1 { background: var(--success); border-color: var(--success); } [data-theme="atelier"] .fh-btn-success-v1:hover { background: #2F5839; border-color: #2F5839; } [data-theme="atelier"] .fh-btn-danger-v1 { background: var(--danger-soft); color: var(--danger); border-color: var(--danger-soft); } [data-theme="atelier"] .fh-btn-gold-v1 { background: var(--gold); border-color: var(--gold); color: #1A1611; } /* ── Legacy cards / fieldsets / tables ─────────────── */ [data-theme="atelier"] .form-card, [data-theme="atelier"] .fh-card, [data-theme="atelier"] .fh-fieldset, [data-theme="atelier"] .fh-table-card { background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-xs); } [data-theme="atelier"] .fh-table thead th { background: var(--bg-sunken); color: var(--fg-muted); font-variant: small-caps; letter-spacing: .12em; border-bottom: 1px solid var(--border); } [data-theme="atelier"] .fh-table tbody tr:hover { background: var(--bg-sunken); } [data-theme="atelier"] .fh-table tbody td { border-top: 1px solid var(--border); } /* ── Legacy inputs ───────────────────────────────── */ [data-theme="atelier"] .fh-input, [data-theme="atelier"] .form-control { background: var(--bg-elev); border: 1px solid var(--border-strong); border-radius: var(--r-sm); color: var(--fg); } [data-theme="atelier"] .fh-input:focus, [data-theme="atelier"] .form-control:focus { border-color: var(--accent); box-shadow: var(--shadow-focus); outline: none; } /* ── Legacy KPI cards ──────────────────────────────── */ [data-theme="atelier"] .fh-kpi { background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-xs); } [data-theme="atelier"] .fh-kpi .fh-label { color: var(--fg-subtle); font-family: var(--font-mono); letter-spacing: .12em; font-size: 10px; } [data-theme="atelier"] .fh-kpi .fh-value { font-family: var(--font-display); font-weight: var(--fw-bold); letter-spacing: -.01em; color: var(--fg); } [data-theme="atelier"] .fh-kpi .fh-sub { color: var(--fg-subtle); } /* ── Legacy hero (dashboard / campaign show) ──────── */ /* Salim 2026-05-16 : force color #fff explicit sur tous les enfants pour garantir contraste sur gradient noir. var(--bg-elev) rendait noir sur noir sur certains navigateurs. */ [data-theme="atelier"] .fh-hero, [data-theme="atelier"] .fh-hero-bold { background: linear-gradient(135deg, #1A1611 0%, #2D2418 100%); color: #fff; border-radius: var(--r-lg); border: 1px solid #3A2E20; box-shadow: var(--shadow); } [data-theme="atelier"] .fh-hero *, [data-theme="atelier"] .fh-hero-bold * { color: inherit; } [data-theme="atelier"] .fh-hero-bold::before { background: radial-gradient(ellipse 80% 50% at 80% 0%, rgba(184,146,58,.15), transparent 60%); } [data-theme="atelier"] .fh-hero h1, [data-theme="atelier"] .fh-hero-bold h1 { color: #fff; font-family: var(--font-display); font-weight: var(--fw-bold); letter-spacing: -.01em; font-style: normal; } [data-theme="atelier"] .fh-hero-bold .fh-eyebrow { color: var(--gold); font-family: var(--font-mono); } /* ── Legacy pills/tags ─────────────────────────────── */ [data-theme="atelier"] .fh-pill, [data-theme="atelier"] .fh-tag { border-radius: 999px; font-weight: var(--fw-bold); letter-spacing: .04em; } [data-theme="atelier"] .fh-tag-success { background: var(--success-soft); color: var(--success); border-color: var(--success-soft); } [data-theme="atelier"] .fh-tag-warn { background: var(--warn-soft); color: var(--warn); border-color: var(--warn-soft); } [data-theme="atelier"] .fh-tag-danger { background: var(--danger-soft); color: var(--danger); border-color: var(--danger-soft); } [data-theme="atelier"] .fh-tag-info { background: var(--info-soft); color: var(--info); border-color: var(--info-soft); } [data-theme="atelier"] .fh-tag-neutral { background: var(--bg-sunken); color: var(--fg-muted); border-color: var(--border); } [data-theme="atelier"] .fh-tag-gold { background: #FBF1E2; color: #7A5C1F; border-color: #E6D2A8; } /* ── Tabs ──────────────────────────────────────────── */ [data-theme="atelier"] .fh-tab.fh-active { color: var(--accent); border-bottom-color: var(--accent); } /* ── Toast / flash ─────────────────────────────────── */ [data-theme="atelier"] .fh-toast { background: var(--bg-elev); border: 1px solid var(--border); border-left: 4px solid var(--fg); border-radius: var(--r); } [data-theme="atelier"] .fh-toast.fh-toast-success { background: var(--success-soft); border-left-color: var(--success); color: var(--success); } [data-theme="atelier"] .fh-toast.fh-toast-warn { background: var(--warn-soft); border-left-color: var(--warn); color: var(--warn); } [data-theme="atelier"] .fh-toast.fh-toast-danger { background: var(--danger-soft); border-left-color: var(--danger); color: var(--danger); } /* ── Sidebar admin (le sidebar global existe en CSS noir solide) ── */ [data-theme="atelier"] #sidebar, [data-theme="atelier"] .sidebar { background: #1A1611 !important; border-right: 1px solid #2D2418; } /* ── Sticky bar (déjà créée, on harmonise au thème) ── */ [data-theme="atelier"] .fh-sticky-bar { border: 1px solid var(--border-strong); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); } [data-theme="atelier"] .fh-sticky-bar__total { color: var(--success); font-family: var(--font-display); } [data-theme="atelier"] .fh-sticky-bar__btn--primary { background: var(--success); border-radius: 999px; } [data-theme="atelier"] .fh-sticky-bar__btn--primary:hover { background: #2F5839; } [data-theme="atelier"] .fh-sticky-bar__btn--ghost { border-radius: 999px; } [data-theme="atelier"] .fh-confirm-price { border-radius: var(--r-sm); border: 2px solid var(--gold); background: #FDF7E8; color: var(--fg); font-family: var(--font-mono); } [data-theme="atelier"] .fh-confirm-price.price-up { border-color: var(--success); background: var(--success-soft); color: var(--success); } [data-theme="atelier"] .fh-confirm-price.price-down { border-color: var(--warn); background: var(--warn-soft); color: var(--warn); } /* ── Density compact (admin denses : tableaux longs) ─ */ [data-theme-density="compact"] { --sp-3: 10px; /* override des spacings Atelier — un peu plus tassé */ --sp-4: 14px; --sp-5: 20px; --sp-6: 28px; } /* ── Touch targets sur mobile ─────────────────────── */ @media (max-width: 640px) { [data-theme="atelier"] .btn-fh, [data-theme="atelier"] .fh-btn-v1 { min-height: 44px; padding: 12px 22px; font-size: var(--fs); } } /* ════════════════════════════════════════════════════════════════════ ATELIER — neutralise les couleurs SaaS hardcodées dans les vues legacy (inline styles `style="background:#22c55e"` qui shortcircuitent le bridge). On cible chaque couleur historique et on la remappe sur le sapin Atelier. ═════════════════════════════════════════════════════════════════════ */ /* Verts SaaS bright → vert sapin Atelier (--success #3F6E4A) */ [data-theme="atelier"] [style*="background:#22c55e"], [data-theme="atelier"] [style*="background: #22c55e"], [data-theme="atelier"] [style*="background:#16a34a"], [data-theme="atelier"] [style*="background: #16a34a"], [data-theme="atelier"] [style*="background:#15803d"], [data-theme="atelier"] [style*="background: #15803d"], [data-theme="atelier"] [style*="background:#10b981"], [data-theme="atelier"] [style*="background: #10b981"], [data-theme="atelier"] [style*="background:#059669"], [data-theme="atelier"] [style*="background: #059669"] { background-color: var(--success) !important; border-color: var(--success) !important; color: #fff !important; } [data-theme="atelier"] [style*="color:#16a34a"], [data-theme="atelier"] [style*="color: #16a34a"], [data-theme="atelier"] [style*="color:#15803d"], [data-theme="atelier"] [style*="color: #15803d"], [data-theme="atelier"] [style*="color:#22c55e"], [data-theme="atelier"] [style*="color: #22c55e"], [data-theme="atelier"] [style*="color:#166534"], [data-theme="atelier"] [style*="color: #166534"], [data-theme="atelier"] [style*="color:#059669"], [data-theme="atelier"] [style*="color: #059669"] { color: var(--success) !important; } [data-theme="atelier"] [style*="background:#dcfce7"], [data-theme="atelier"] [style*="background: #dcfce7"], [data-theme="atelier"] [style*="background:#bbf7d0"], [data-theme="atelier"] [style*="background: #bbf7d0"], [data-theme="atelier"] [style*="background:#ecfdf5"], [data-theme="atelier"] [style*="background: #ecfdf5"], [data-theme="atelier"] [style*="background:#f0fdf4"], [data-theme="atelier"] [style*="background: #f0fdf4"] { background-color: var(--success-soft) !important; border-color: transparent !important; } /* Violets/purples SaaS → garde l'accent rouge sceau */ [data-theme="atelier"] [style*="background:#6d28d9"], [data-theme="atelier"] [style*="background: #6d28d9"], [data-theme="atelier"] [style*="background:#7c3aed"], [data-theme="atelier"] [style*="background: #7c3aed"], [data-theme="atelier"] [style*="background:#8b5cf6"], [data-theme="atelier"] [style*="background: #8b5cf6"] { background-color: var(--accent) !important; border-color: var(--accent) !important; color: #fff !important; } [data-theme="atelier"] [style*="background:#ede9fe"], [data-theme="atelier"] [style*="background: #ede9fe"], [data-theme="atelier"] [style*="background:#c4b5fd"], [data-theme="atelier"] [style*="background: #c4b5fd"] { background-color: var(--accent-soft) !important; border-color: transparent !important; } [data-theme="atelier"] [style*="color:#6d28d9"], [data-theme="atelier"] [style*="color: #6d28d9"], [data-theme="atelier"] [style*="color:#7c3aed"], [data-theme="atelier"] [style*="color: #7c3aed"] { color: var(--accent) !important; } /* Gradients hero violets/auto-dispatch → gradient encre noire/sépia */ [data-theme="atelier"] [style*="linear-gradient(135deg,#0e0e0e,#6d28d9)"], [data-theme="atelier"] [style*="linear-gradient(135deg, #0e0e0e, #6d28d9)"], [data-theme="atelier"] [style*="linear-gradient(135deg,#0a0a0a,#6d28d9)"] { background: linear-gradient(135deg, #1A1611 0%, #2D2418 100%) !important; } /* Indigos SaaS → encre noire */ [data-theme="atelier"] [style*="background:#6366f1"], [data-theme="atelier"] [style*="background: #6366f1"], [data-theme="atelier"] [style*="background:#4f46e5"], [data-theme="atelier"] [style*="background: #4f46e5"] { background-color: var(--fg) !important; border-color: var(--fg) !important; color: #fff !important; } /* Oranges SaaS → warn Atelier (terre cuite) */ [data-theme="atelier"] [style*="background:#fef3c7"], [data-theme="atelier"] [style*="background: #fef3c7"], [data-theme="atelier"] [style*="background:#fef9e7"], [data-theme="atelier"] [style*="background: #fef9e7"], [data-theme="atelier"] [style*="background:#fffbeb"] { background-color: var(--warn-soft) !important; } [data-theme="atelier"] [style*="color:#92400e"], [data-theme="atelier"] [style*="color: #92400e"], [data-theme="atelier"] [style*="color:#854d0e"], [data-theme="atelier"] [style*="color: #854d0e"], [data-theme="atelier"] [style*="color:#d97706"], [data-theme="atelier"] [style*="color: #d97706"] { color: var(--warn) !important; } /* Rouges SaaS bright → rouge sceau Atelier */ [data-theme="atelier"] [style*="background:#fef2f2"], [data-theme="atelier"] [style*="background: #fef2f2"], [data-theme="atelier"] [style*="background:#fee2e2"], [data-theme="atelier"] [style*="background: #fee2e2"] { background-color: var(--danger-soft) !important; border-color: transparent !important; } [data-theme="atelier"] [style*="color:#dc2626"], [data-theme="atelier"] [style*="color: #dc2626"], [data-theme="atelier"] [style*="color:#991b1b"], [data-theme="atelier"] [style*="color: #991b1b"], [data-theme="atelier"] [style*="color:#b91c1c"], [data-theme="atelier"] [style*="color: #b91c1c"] { color: var(--danger) !important; } /* Bleus SaaS info → bleu feutré Atelier */ [data-theme="atelier"] [style*="background:#eff6ff"], [data-theme="atelier"] [style*="background: #eff6ff"], [data-theme="atelier"] [style*="background:#dbeafe"], [data-theme="atelier"] [style*="background: #dbeafe"] { background-color: var(--info-soft) !important; } [data-theme="atelier"] [style*="color:#1e3a8a"], [data-theme="atelier"] [style*="color: #1e3a8a"], [data-theme="atelier"] [style*="color:#1d4ed8"], [data-theme="atelier"] [style*="color: #1d4ed8"], [data-theme="atelier"] [style*="color:#0066cc"] { color: var(--info) !important; } /* ───────────────────────────────────────────────────── THÈME HARVEY — "Black & White" (Salim 2026-06-02) Inspiré de Harvey.ai : off-white propre, noir, serif Rem "design white and black for the full app" ─────────────────────────────────────────────────────── */ @import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Inter:wght@400;500;600;700;800;900&display=swap'); [data-theme="harvey"] { /* ── DARK GROK (Salim 2026-06-14 : « like Grok » — full dark, surfaces gris foncé très arrondies, texte blanc, CTA pill blanc) ── */ --bg: #000000; --bg-elev: #1C1C1E; --bg-sunken: #0D0D0F; --border: rgba(255,255,255,.10); --border-strong: rgba(255,255,255,.20); /* ── Text ── */ --fg: #FFFFFF; --fg-muted: rgba(255,255,255,.64); --fg-subtle: rgba(255,255,255,.42); /* ── Accent : pill blanc (Grok) — texte sombre dessus ── */ --accent: #FFFFFF; --accent-soft: rgba(255,255,255,.10); --accent-fg: #0A0A0A; --gold: #C9A84C; /* doré réel — lisible & premium sur fond noir */ --on-gold: #1A1611; /* texte sombre sur fond doré */ /* ── Semantic — verts/rouges des BOUTONS assez foncés pour texte blanc lisible (les CHIPS utilisent des teintes vives via fh_redesign §17) ── */ --success: #18A94E; --success-soft: rgba(47,210,122,.14); --warn: #D9882B; --warn-soft: rgba(240,169,59,.14); --danger: #E5484D; --danger-soft: rgba(255,92,92,.14); --info: #FFFFFF; --info-soft: rgba(255,255,255,.10); /* ── Tokens LEGACY (application.css :root, jamais flippés) → dark. Utilisés ~370× dans les vues (cream/ivory bg, ink text, cloud border, stone/mist muted) → sinon clair sur fond noir. Salim 2026-06-22. ── */ --ink: #FFFFFF; /* texte titres → blanc */ --obsidian: #FFFFFF; /* texte fort → blanc ; en fond = pill blanc (texte forcé sombre via filet §16) */ --charcoal: #1C1C1E; --stone: rgba(255,255,255,.60);/* texte secondaire */ --mist: rgba(255,255,255,.38); --cloud: rgba(255,255,255,.12);/* bordures */ --cream: #0D0D0F; /* fond enfoncé */ --ivory: #1C1C1E; /* surface élevée */ --white: #1C1C1E; /* « blanc » → surface sombre en dark */ --sand: #1C1C1E; /* ── Typography (Salim 2026-06-10 : titres en sans moderne, fini le serif éditorial qui faisait "old fashion") ── */ --font-body: 'Inter', system-ui, -apple-system, sans-serif; --font-display: 'Inter', system-ui, -apple-system, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, Menlo, monospace; --fs-xs: 11px; --fs-sm: 13px; --fs: 14px; --fs-lg: 16px; --fs-xl: 20px; --fs-2xl: 28px; --fs-3xl: 38px; /* ── Radius ── */ --r-xs: 4px; --r-sm: 8px; --r: 12px; --r-lg: 16px; --r-xl: 24px; /* ── Shadows (dark) ── */ --shadow-xs: 0 1px 2px rgba(0,0,0,.4); --shadow: 0 2px 10px rgba(0,0,0,.5); --shadow-lg: 0 12px 40px rgba(0,0,0,.6); --shadow-focus: 0 0 0 2px rgba(255,255,255,.25); /* ── Motion ── */ --dur-fast: 120ms; --dur: 200ms; --dur-slow: 300ms; --ease: cubic-bezier(.4,0,.2,1); } /* ── Body & base ── */ [data-theme="harvey"] body { background: var(--bg); color: var(--fg); font-family: var(--font-body); } /* ── Headings : serif élégant ── */ [data-theme="harvey"] h1, [data-theme="harvey"] h2, [data-theme="harvey"] h3 { font-family: var(--font-display) !important; font-weight: 800; letter-spacing: -.02em; color: var(--fg); } /* ── Cards ── */ [data-theme="harvey"] .fh-card, [data-theme="harvey"] .fh-fieldset, [data-theme="harvey"] .fh-section { background: var(--bg-elev); border: 1px solid var(--border); box-shadow: var(--shadow-xs); } /* ── Sidebar admin : blanc propre ── */ [data-theme="harvey"] #sidebar, [data-theme="harvey"] .sidebar { background: #0A0A0A !important; border-right: 1px solid #1A1A1A !important; } [data-theme="harvey"] #sidebar .sb-header-item, [data-theme="harvey"] .sidebar .sb-header-item { color: #FFFFFF !important; } [data-theme="harvey"] #sidebar .sb-header-item:hover, [data-theme="harvey"] #sidebar .sb-header-item.active { background: rgba(255,255,255,.08) !important; } /* ── Buttons primaires → noir ── */ /* ⚠️ cibler le FOND doré uniquement (background:#c9a84c) — pas n'importe quel style mentionnant la couleur : une carte avec juste border-color:#c9a84c devenait noir sur noir (dashboard « À traiter ») */ [data-theme="harvey"] .btn-fh, [data-theme="harvey"] .fh-btn, [data-theme="harvey"] .fh-btn-v1, [data-theme="harvey"] button[style*="background:#c9a84c"], [data-theme="harvey"] button[style*="background: #c9a84c"], [data-theme="harvey"] a[style*="background:#c9a84c"], [data-theme="harvey"] a[style*="background: #c9a84c"], [data-theme="harvey"] button[style*="background:#1A1611"], [data-theme="harvey"] a[style*="background:#1A1611"] { background: #0A0A0A !important; color: #FFFFFF !important; border-color: #0A0A0A !important; } [data-theme="harvey"] .btn-fh:hover, [data-theme="harvey"] .fh-btn:hover { opacity: .85 } /* ── DARK : fond doré inline → reste doré (pill premium) + texte sombre ── */ [data-theme="harvey"] [style*="background:#c9a84c" i], [data-theme="harvey"] [style*="background: #c9a84c" i] { background-color: #C9A84C !important; color: #1A1611 !important; } /* ── DARK : texte doré inline → reste doré (lisible sur noir) ── */ [data-theme="harvey"] [style*="color:#c9a84c" i], [data-theme="harvey"] [style*="color: #c9a84c" i] { color: #C9A84C !important; } /* …SAUF dans un bandeau inline sombre (sticky bar dispatch, héros) : le « gold → noir » ci-dessus rendrait le texte invisible sur fond noir */ [data-theme="harvey"] [style*="background:#0e0e0e"] [style*="color:#c9a84c"], [data-theme="harvey"] [style*="background:#1a1611"] [style*="color:#c9a84c"], [data-theme="harvey"] [style*="background:#1A1611"] [style*="color:#c9a84c"] { color: #FFFFFF !important; } /* Idem pour les headings : la règle « h1/h2/h3 → var(--fg) » (noir) perd contre le fond noir du bandeau */ [data-theme="harvey"] [style*="background:#0e0e0e"]:not(#sidebar):not(.sidebar) h1, [data-theme="harvey"] [style*="background:#0e0e0e"]:not(#sidebar):not(.sidebar) h2, [data-theme="harvey"] [style*="background:#0e0e0e"]:not(#sidebar):not(.sidebar) h3 { color: #FFFFFF; } [data-theme="harvey"] [style*="border.*#c9a84c"], [data-theme="harvey"] [style*="border-color:#c9a84c"] { border-color: var(--border-strong) !important; } /* ── Hero sections → noir pur ── */ /* (.invf-hero retiré : c'est une carte CLAIRE depuis la refonte 2026-05-06 — la forcer en noir rendait son h1 var(--fg) invisible) */ [data-theme="harvey"] .gh-hero, [data-theme="harvey"] .og-hero, [data-theme="harvey"] .fh-hero, [data-theme="harvey"] .hub-hero, [data-theme="harvey"] .new-order-hero { background: #0A0A0A !important; border-color: #1A1A1A !important; } /* Texte interne des hub/order heroes : forcer blanc (les var(--gold) et var(--fg) deviennent noirs en Harvey → texte noir sur fond noir = illisible) */ [data-theme="harvey"] .hub-hero .eyebrow, [data-theme="harvey"] .hub-hero h1, [data-theme="harvey"] .hub-hero p, [data-theme="harvey"] .hub-hero strong, [data-theme="harvey"] .hub-hero .hub-hero::before, [data-theme="harvey"] .new-order-hero .eyebrow, [data-theme="harvey"] .new-order-hero h1, [data-theme="harvey"] .new-order-hero .sub, [data-theme="harvey"] .new-order-hero p, [data-theme="harvey"] .new-order-hero strong, /* gh/og/fh-hero : fond forcé noir → titres + eyebrow doivent passer blanc (sinon h1 sans couleur = noir sur noir — facture show, fiches…) */ [data-theme="harvey"] .gh-hero h1, [data-theme="harvey"] .gh-hero h2, [data-theme="harvey"] .gh-hero .fh-eyebrow, [data-theme="harvey"] .gh-hero .eyebrow, [data-theme="harvey"] .og-hero h1, [data-theme="harvey"] .og-hero h2, [data-theme="harvey"] .og-hero .fh-eyebrow, [data-theme="harvey"] .og-hero .eyebrow, [data-theme="harvey"] .fh-hero h1, [data-theme="harvey"] .fh-hero h2, [data-theme="harvey"] .fh-hero .fh-eyebrow, [data-theme="harvey"] .fh-hero .eyebrow { color: rgba(255,255,255,.9) !important; } /* Heros bespoke à dégradé sombre (campagne new, devis new/history) : leur .eyebrow var(--gold) devient noir → on force un doré clair lisible. */ [data-theme="harvey"] .nc-hero .eyebrow, [data-theme="harvey"] .dv-hero .eyebrow, [data-theme="harvey"] .dvh-hero .eyebrow { color: rgba(255,255,255,.55) !important; } /* Bouton primary dans hub-hero : blanc sur noir (Harvey B&W) */ [data-theme="harvey"] .hub-hero .actions .primary { background: #FFFFFF !important; color: #0A0A0A !important; } /* Boutons ghost dans hub/new-order heroes */ [data-theme="harvey"] .hub-hero .actions .ghost, [data-theme="harvey"] .new-order-hero .actions a { background: rgba(255,255,255,.08) !important; color: #FFFFFF !important; border-color: rgba(255,255,255,.2) !important; } /* Type toggle dans new-order-hero */ [data-theme="harvey"] .new-order-hero .type-toggle { background: rgba(0,0,0,.25) !important; border-color: rgba(255,255,255,.12) !important; } [data-theme="harvey"] .new-order-hero .type-toggle a { color: rgba(255,255,255,.6) !important; } [data-theme="harvey"] .new-order-hero .type-toggle a.is-active { background: #FFFFFF !important; color: #0A0A0A !important; } /* ── Pills/badges : neutrals ── */ [data-theme="harvey"] .fh-pill--gold { background: #F0F0EE !important; color: #0A0A0A !important; border-color: #CCCCCA !important; } [data-theme="harvey"] .fh-pill--dark { background: #0A0A0A !important; color: #FFFFFF !important; } /* ── Topbar ── */ /* Dark Grok : fond du contenu + topbar sombres */ [data-theme="harvey"] #main { background: var(--bg) !important; } [data-theme="harvey"] .topbar, [data-theme="harvey"] header { background: rgba(0,0,0,.72) !important; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid var(--border) !important; } /* Texte topbar → clair. (PAS d'override sur les : les boutons FR/EN et Déconnexion ont leur propre fond clair + texte sombre → forcer blanc les rendait invisibles. Salim 2026-06-22.) */ [data-theme="harvey"] .topbar h5 { color: #fff !important; } /* ── Bottom nav mobile : noir ── */ [data-theme="harvey"] .fh-bottom-nav { background: #FFFFFF !important; border-top: 1px solid var(--border) !important; } [data-theme="harvey"] .fh-bottom-nav .active { color: #0A0A0A !important; } /* ── Tables (dark) ── */ [data-theme="harvey"] .fh-table thead th { background: var(--bg-sunken) !important; color: var(--fg-subtle) !important; } [data-theme="harvey"] .fh-table tbody tr:hover { background: rgba(255,255,255,.04) !important; } /* ── Focus rings ── */ [data-theme="harvey"] input:focus, [data-theme="harvey"] select:focus, [data-theme="harvey"] textarea:focus { border-color: #0A0A0A !important; box-shadow: 0 0 0 2px rgba(10,10,10,.12) !important; }