/* ============================================ THEME — 3 directions éditoriales luxe ============================================ Architecture: 1. Tokens sémantiques par thème, exposés sous [data-theme="..."] 2. Joy palette (6 hues × ink/tint) pour la sémantique métier 3. ALIASES LEGACY pour préserver les 30+ composants existants (--color-primary continue de marcher, mappé sur --primary) Pour basculer de thème: Default (pas d'attribut): Hôtel Particulier. Source de vérité: D:/PRESTAS_VIDEOS/ASSETS/HANDOFF.md ============================================ */ /* ---- DIRECTION I · HÔTEL PARTICULIER (défaut, light) ---- Aligné sur la charte Nelysio : Rich Charcoal / Metallic Gold / Champagne / Warm Beige / Ivory. Éditorial luxe, sobre, doré. ---------------------------------------------------------------------- */ :root, :root[data-theme="hotel"] { --serif: 'Cormorant Garamond', 'Cormorant', 'Georgia', serif; --sans: 'Manrope', 'Segoe UI', system-ui, sans-serif; --mono: 'JetBrains Mono', ui-monospace, 'Consolas', monospace; /* Surfaces — Ivory → Champagne → Warm Beige (charte Nelysio) */ --bg: #FBF7EE; /* Ivory (charte) */ --bg-deep: #F2E9D8; /* Champagne profond */ --surface: #FFFFFF; /* surface card immaculée */ --surface-alt: #F7EFE0; /* champagne */ --surface-tinted:#EFE4D0; /* warm beige (charte) */ --sidebar: #F5EDDC; /* champagne sidebar — élégance discrète */ --sidebar-ink: #1A1614; /* Rich Charcoal pour le texte */ /* Ink — Rich Charcoal pour le texte principal */ --ink: #1A1614; /* Rich Charcoal pur */ --ink-soft: #3A322B; --muted: #7C705F; --muted-soft: #B5A89C; /* Lines */ --line: rgba(26, 22, 20, 0.10); --line-soft: rgba(26, 22, 20, 0.06); /* Accents — Metallic Gold (charte) */ --primary: #B8965A; /* Metallic Gold */ --primary-light: #C9A878; --primary-dark: #A07A50; --accent: #C9A878; --accent-soft: #EFDDB4; --accent-light: #D9C297; --accent-dark: #A07A50; /* Semantic */ --danger: #B5544A; --danger-light: #F4DDD8; --success: #5F7B4E; --success-light: #E1EBD7; --warning: #C58D5A; --warning-light: #F4DCC0; --info: #7A95A6; --info-light: #D6E0E5; /* Joy palette — sémantique métier */ --joy-rose-ink: #B4665C; --joy-rose-tint: #F4D9D1; --joy-sage-ink: #7A8D6B; --joy-sage-tint: #DDE3CC; --joy-sky-ink: #7A95A6; --joy-sky-tint: #D6E0E5; --joy-apricot-ink: #C58D5A; --joy-apricot-tint: #F4DCC0; --joy-plum-ink: #8B5E78; --joy-plum-tint: #E3CFDA; --joy-gold-ink: #B8965A; --joy-gold-tint: #EFDDB4; /* Card style preset (overridable per-user via JS) */ --card-bg: var(--surface); --card-border: 1px solid var(--line); --card-shadow: 0 18px 44px rgba(60, 40, 20, 0.07), 0 2px 6px rgba(60, 40, 20, 0.04); } /* ---- DIRECTION II · ATELIER NOIR (dark) ---- */ :root[data-theme="noir"] { --serif: 'Bodoni Moda', 'Cormorant Garamond', 'Georgia', serif; --sans: 'DM Sans', 'Segoe UI', system-ui, sans-serif; --mono: 'JetBrains Mono', ui-monospace, 'Consolas', monospace; --bg: #16130F; --bg-deep: #0D0B08; --surface: #1F1B15; --surface-alt: #272219; --surface-tinted:#2A2218; --sidebar: #0D0B08; --sidebar-ink: #EFE9DD; --ink: #F2EBDC; --ink-soft: #D7CFBE; --muted: #A29881; --muted-soft: #736B57; --line: rgba(239, 233, 221, 0.12); --line-soft: rgba(239, 233, 221, 0.06); --primary: #C9A878; --primary-light: #DABE96; --primary-dark: #A88454; --accent: #E0B97E; --accent-soft: #5C4A2E; --accent-light: #ECCB97; --accent-dark: #B88E5F; --danger: #D67560; --danger-light: #4A2820; --success: #9DB378; --success-light: #2A3A1F; --warning: #E0A878; --warning-light: #4A341F; --info: #9CB3C4; --info-light: #2B3640; --joy-rose-ink: #D38F84; --joy-rose-tint: #4A2E29; --joy-sage-ink: #A8BD8C; --joy-sage-tint: #2F3A26; --joy-sky-ink: #9CB3C4; --joy-sky-tint: #2B3640; --joy-apricot-ink: #E0A878; --joy-apricot-tint: #4A341F; --joy-plum-ink: #C58FA8; --joy-plum-tint: #3D2A35; --joy-gold-ink: #D9B97C; --joy-gold-tint: #4A3A20; --card-bg: var(--surface); --card-border: 1px solid var(--line); --card-shadow: 0 24px 60px rgba(0, 0, 0, 0.5); } /* ---- DIRECTION III · SALON PARISIEN (light festif) ---- */ :root[data-theme="salon"] { --serif: 'Cormorant Garamond', 'Georgia', serif; --sans: 'Plus Jakarta Sans', 'Segoe UI', system-ui, sans-serif; --mono: 'JetBrains Mono', ui-monospace, 'Consolas', monospace; --bg: #F6E9E0; --bg-deep: #EAD7CB; --surface: #FDF3EB; --surface-alt: #F4E1D2; --surface-tinted:#F4D5C9; --sidebar: #3D1F26; --sidebar-ink: #F6E9E0; --ink: #3D1F26; --ink-soft: #5C2E37; --muted: #9C7480; --muted-soft: #BFA0A9; --line: rgba(61, 31, 38, 0.14); --line-soft: rgba(61, 31, 38, 0.07); --primary: #7E2D3E; --primary-light: #9C4555; --primary-dark: #5E1F2C; --accent: #C97D7C; --accent-soft: #F2C9C0; --accent-light: #DBA0A0; --accent-dark: #A75E5E; --danger: #9B3A3A; --danger-light: #F4D8D8; --success: #5F7B4E; --success-light: #E1EBD7; --warning: #D29466; --warning-light: #F4DAC2; --info: #7E96B0; --info-light: #D8E0E8; --joy-rose-ink: #C97D7C; --joy-rose-tint: #F4D2CB; --joy-sage-ink: #7E9C7A; --joy-sage-tint: #D9E4D2; --joy-sky-ink: #7E96B0; --joy-sky-tint: #D8E0E8; --joy-apricot-ink: #D29466; --joy-apricot-tint: #F4DAC2; --joy-plum-ink: #8B4A6E; --joy-plum-tint: #E5CCD7; --joy-gold-ink: #C4A05E; --joy-gold-tint: #EDDCAE; --card-bg: var(--surface); --card-border: 1px solid var(--line); --card-shadow: 0 18px 44px rgba(61, 31, 38, 0.07), 0 2px 6px rgba(61, 31, 38, 0.04); } /* ---- DIRECTION IV · JARDIN D'HIVER (light végétal) ---- */ :root[data-theme="jardin"] { --serif: 'EB Garamond', 'Cormorant Garamond', 'Georgia', serif; --sans: 'Plus Jakarta Sans', 'Segoe UI', system-ui, sans-serif; --mono: 'JetBrains Mono', ui-monospace, 'Consolas', monospace; --bg: #EAE2CF; --bg-deep: #DCD2B9; --surface: #F3EBD7; --surface-alt: #E5DCBF; --surface-tinted:#E0D5BE; --sidebar: #2F3A2D; /* vert forêt — sidebar sombre */ --sidebar-ink: #EAE2CF; --ink: #1F2A1D; --ink-soft: #3F4F3D; --muted: #6E7A6B; --muted-soft: #94A091; --line: rgba(31, 42, 29, 0.14); --line-soft: rgba(31, 42, 29, 0.07); --primary: #3F5A3A; /* vert forêt */ --primary-light: #547049; --primary-dark: #2F4429; --accent: #A88E5B; /* or antique */ --accent-soft: #D6C49A; --accent-light: #BBA478; --accent-dark: #8A7144; --danger: #9B4A38; --danger-light: #EFD9D1; --success: #3F5A3A; --success-light: #DCE4D0; --warning: #B58258; --warning-light: #E8D3B5; --info: #688090; --info-light: #CCD8DD; --joy-rose-ink: #9F6B5E; --joy-rose-tint: #E8D2C7; --joy-sage-ink: #6F8A66; --joy-sage-tint: #D2DCC4; --joy-sky-ink: #688090; --joy-sky-tint: #CCD8DD; --joy-apricot-ink: #B58258; --joy-apricot-tint: #E8D3B5; --joy-plum-ink: #7E5F75; --joy-plum-tint: #D8C8D3; --joy-gold-ink: #A88E5B; --joy-gold-tint: #E2CFA0; --card-bg: var(--surface); --card-border: 1px solid var(--line); --card-shadow: 0 18px 44px rgba(31, 42, 29, 0.07), 0 2px 6px rgba(31, 42, 29, 0.04); } /* ---- DIRECTION V · STUDIO (light éditorial — d'après la vitrine Nelysio) ---- Duotone espresso / crème + accent rose poudré. Design plat (filet 1px, zéro ombre). Titres Archivo Expanded, texte Archivo, accent Newsreader italique. Réf. css/landing.css (direction « Studio »). */ :root[data-theme="studio"] { --serif: 'Archivo Expanded', 'Archivo', system-ui, sans-serif; /* titres */ --sans: 'Archivo', system-ui, sans-serif; /* texte */ --mono: 'JetBrains Mono', ui-monospace, 'Consolas', monospace; --bg: #F3EFE6; /* paper */ --bg-deep: #EAE3D6; /* paper-2 */ --surface: #FBF9F3; /* paper-3 — carte immaculée */ --surface-alt: #EFEADF; --surface-tinted:#EAE3D6; --sidebar: #2A2320; /* espresso — bloc sombre vitrine */ --sidebar-ink: #F3EFE6; --ink: #1E1A17; --ink-soft: #453D36; --muted: #7A716A; --muted-soft: #A79E95; --line: rgba(30, 26, 23, 0.14); --line-soft: rgba(30, 26, 23, 0.07); --primary: #2A2320; /* espresso — CTA solides, contraste corporate */ --primary-light: #453D36; --primary-dark: #1E1A17; --accent: #A26B74; /* rose poudré — le pop de couleur (labels, actif) */ --accent-soft: #EFDAD5; --accent-light: #C6959B; --accent-dark: #824F58; --danger: #B5544A; --danger-light: #F4DDD8; --success: #5F7B4E; --success-light: #E1EBD7; --warning: #C58D5A; --warning-light: #F4DCC0; --info: #7A95A6; --info-light: #D6E0E5; --joy-rose-ink: #A26B74; --joy-rose-tint: #EFDAD5; --joy-sage-ink: #7A8D6B; --joy-sage-tint: #DDE3CC; --joy-sky-ink: #7A95A6; --joy-sky-tint: #D6E0E5; --joy-apricot-ink: #C58D5A; --joy-apricot-tint: #F4DCC0; --joy-plum-ink: #8B5E78; --joy-plum-tint: #E3CFDA; --joy-gold-ink: #A98A62; --joy-gold-tint: #EADFC9; /* Structure corporate : angles nets + design plat (langue de la vitrine). */ --radius-sm: 2px; --radius-md: 2px; --radius-lg: 3px; --radius-xl: 4px; --shadow-sm: none; --shadow-md: none; /* --radius-full (9999px) et --shadow-lg/xl conservés : pastilles rondes + profondeur des overlays (modales, menus). */ --card-bg: var(--surface); --card-border: 1px solid var(--line); --card-shadow: none; /* design plat vitrine */ } /* Signature vitrine : le mot accentué des titres en Newsreader italique rose. */ :root[data-theme="studio"] .ed-split-title em { font-family: 'Newsreader', Georgia, serif; font-style: italic; font-weight: 500; color: var(--accent); } /* Labels / eyebrows en mono capitales espacées, teinte rose — comme la vitrine. */ :root[data-theme="studio"] .ed-eyebrow { font-family: var(--mono); color: var(--accent); letter-spacing: 0.2em; font-size: 10.5px; } /* Titres Archivo Expanded resserrés — allure éditoriale corporate. */ :root[data-theme="studio"] h1, :root[data-theme="studio"] h2, :root[data-theme="studio"] h3, :root[data-theme="studio"] .ed-split-title, :root[data-theme="studio"] .section-title { letter-spacing: -0.02em; } /* ===================================================================== ALIASES LEGACY — préserve les 30+ composants existants Ces variables continuent d'exister, on les redirige vers le système moderne. À supprimer progressivement Phase 6 quand tous les composants seront migrés. ===================================================================== */ :root, :root[data-theme="hotel"], :root[data-theme="noir"], :root[data-theme="salon"], :root[data-theme="jardin"], :root[data-theme="studio"] { /* Backwards-compat names */ --color-primary: var(--primary); --color-primary-light: var(--primary-light); --color-primary-dark: var(--primary-dark); --color-primary-50: color-mix(in srgb, var(--primary) 8%, var(--surface)); --color-primary-100: color-mix(in srgb, var(--primary) 15%, var(--surface)); --color-primary-200: color-mix(in srgb, var(--primary) 25%, var(--surface)); --color-accent: var(--accent); --color-accent-light: var(--accent-light); --color-accent-dark: var(--accent-dark); --color-success: var(--success); --color-success-light: var(--success-light); --color-warning: var(--warning); --color-warning-light: var(--warning-light); --color-danger: var(--danger); --color-danger-light: var(--danger-light); --color-info: var(--info); --color-info-light: var(--info-light); --color-priority-critical: var(--joy-rose-ink); --color-priority-high: var(--joy-apricot-ink); --color-priority-medium: var(--joy-gold-ink); --color-priority-low: var(--joy-sage-ink); --color-priority-none: var(--muted-soft); --color-bg: var(--bg); --color-bg-card: var(--surface); --color-bg-subtle: var(--surface-tinted); --color-bg-sidebar: var(--sidebar); --color-bg-hover: color-mix(in srgb, var(--primary) 8%, var(--surface)); --color-border: color-mix(in srgb, var(--ink) 20%, transparent); --color-border-light: var(--line); --color-border-strong: color-mix(in srgb, var(--ink) 35%, transparent); --color-text: var(--ink); --color-text-primary: var(--ink); --color-text-secondary: var(--ink-soft); --color-text-muted: var(--muted); --color-text-inverse: #FFFFFF; --color-text-sidebar: var(--sidebar-ink); --font-heading: var(--serif); --font-body: var(--sans); --font-mono: var(--mono); } /* ===================================================================== GLOBAL TOKENS — communs à tous les thèmes ===================================================================== */ :root { /* Typography scale */ --text-xs: 0.75rem; --text-sm: 0.8125rem; --text-base: 0.9375rem; --text-lg: 1.125rem; --text-xl: 1.3125rem; --text-2xl: 1.625rem; --text-3xl: 2rem; /* Spacing scale (8pt grid) */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; --space-20: 5rem; /* Layout */ --sidebar-width: 248px; --sidebar-collapsed: 72px; --header-height: 60px; /* Radii */ --radius-sm: 4px; --radius-md: 6px; --radius-lg: 10px; --radius-xl: 16px; --radius-full: 9999px; /* Shadows — semantic */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.06); --shadow-lg: 0 12px 28px rgba(0, 0, 0, 0.10); --shadow-xl: 0 24px 60px rgba(0, 0, 0, 0.14); /* Motion */ --transition-fast: 150ms ease; --transition-base: 250ms ease; --transition-slow: 400ms ease; /* Breakpoints (documented for reference — not usable in @media via CSS vars) */ /* sm 480 · md 768 · lg 1024 · xl 1440 · 2xl 1920 */ } /* ===================================================================== GLOBAL BODY STYLING — pull theme tokens into baseline ===================================================================== */ html { background: var(--bg); color: var(--ink); } body { background: var(--bg); color: var(--ink); font-family: var(--sans); font-feature-settings: 'kern' 1, 'liga' 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ===================================================================== A11Y — focus visible + reduced motion (Phase 7 globalized) ===================================================================== */ *:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } }