/* ============================================================ DESIGN TOKENS — Ma Toile à Rêve Direction : "galerie éditoriale × carnet d'atelier" Palette préservée, mais débarrassée des accents tech/SaaS. ============================================================ */ :root { /* ========== COULEURS DE MARQUE ========== Conservées (Egyptian Blue / Harvest Gold / Indian Red / White Smoke / Eerie Black) — on raffine les nuances de "papier" pour évoquer un beau livre d'art plutôt qu'une UI. */ --color-primary: #123499; /* Egyptian Blue — encre principale */ --color-primary-dark: #0d2670; /* hover/active états */ --color-primary-light: #3a55b3; /* surlignages, focus */ --color-primary-deep: #081A52; /* fond profond, "encre noire" */ --color-accent: #C8941F; /* Or laiton — plus mat, plus noble */ --color-accent-bright: #E6A700; /* Harvest Gold d'origine — réservé aux CTA */ --color-accent-dark: #946B14; /* hover, traits gravés */ --color-accent-light: #E8C97A; /* highlights doux, papier doré */ /* Tons "papier" — base off-white nuancée */ --color-bg: #F2EFE7; /* papier ivoire — plus chaud que white smoke */ --color-bg-pure: #FBF9F4; /* page blanche d'un livre d'art */ --color-bg-soft: #ECE7DA; /* grain plus marqué, sections alternées */ --color-bg-deep: #E5DECD; /* alcôves, encarts */ --color-emotion: #B33A37; /* Indian Red assombri — couleur de dédicace */ --color-emotion-dark: #8E2826; --color-emotion-soft: rgba(179, 58, 55, 0.08); --color-text: #1A1814; /* Eerie Black légèrement chaud */ --color-text-soft: #4A453E; /* texte secondaire */ --color-text-muted: #7B7468; /* placeholders, légendes */ --color-text-on-dark: #F2EFE7; /* texte sur fond bleu/encre */ --color-text-on-accent: #1A1814; /* WCAG : 8.03:1 sur or — JAMAIS de blanc sur or */ --color-border: #D9D2C2; --color-border-soft: #E8E2D2; --color-border-ink: rgba(26, 24, 20, 0.18); --color-success: #4A6B3F; --color-error: #8E2826; /* Filets et traits — exclusivement linéaires, jamais épais */ --rule-hair: 1px solid var(--color-border-ink); --rule-gold: 1px solid var(--color-accent); --rule-gold-thick: 2px solid var(--color-accent); /* ========== TYPOGRAPHIE ========== Trois polices, trois rôles bien distincts. Ephesis : RARE, GROS, SEUL — moments de respiration émotionnelle. Playfair : titres éditoriaux + chiffres décoratifs. Jost : corps, navigation, légendes. */ --font-emotion: 'Ephesis', 'Brush Script MT', cursive; --font-premium: 'Playfair Display', 'Garamond', 'Georgia', serif; --font-body: 'Jost', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* Échelle typographique — plus contrastée, "monographie" */ --fs-xs: 0.75rem; /* 12px — captions, légendes */ --fs-sm: 0.875rem; /* 14px — corps secondaire */ --fs-base: 1rem; /* 16px — corps */ --fs-md: 1.125rem; /* 18px — corps lead */ --fs-lg: 1.375rem; /* 22px — sous-titre */ --fs-xl: 1.75rem; /* 28px — H4 fort */ --fs-2xl: 2.25rem; /* 36px */ --fs-3xl: 3rem; /* 48px */ --fs-4xl: 4rem; /* 64px */ --fs-5xl: 5.5rem; /* 88px */ --fs-hero: clamp(3rem, 6vw + 1rem, 6rem); --fs-emotion: clamp(2.5rem, 5vw + 1rem, 5.5rem); --fs-display: clamp(4rem, 10vw + 1rem, 9rem); /* chiffres décoratifs XXL */ /* Poids */ --fw-light: 300; --fw-regular: 400; --fw-medium: 500; --fw-semi: 600; --fw-bold: 700; /* Hauteurs de ligne — plus aérées */ --lh-tight: 1.05; --lh-snug: 1.25; --lh-normal: 1.65; --lh-relaxed: 1.85; /* Lettrage — on tire sur les négatifs pour les titres */ --ls-tightest: -0.04em; --ls-tight: -0.02em; --ls-normal: 0; --ls-wide: 0.08em; --ls-wider: 0.18em; /* eyebrows façon "TABLE DES MATIÈRES" */ --ls-widest: 0.32em; /* tampons / cachets */ /* ========== ESPACEMENTS — plus généreux ========== */ --space-3xs: 0.25rem; --space-2xs: 0.5rem; --space-xs: 0.75rem; --space-sm: 1rem; --space-md: 1.75rem; --space-lg: 2.5rem; --space-xl: 4rem; --space-2xl: 6rem; --space-3xl: 8.5rem; --space-4xl: 12rem; --section-py: clamp(5rem, 10vw, 9rem); --section-px: clamp(1.25rem, 4vw, 2.5rem); /* ========== LAYOUT ========== */ --container-max: 1320px; --container-narrow: 880px; --container-prose: 680px; --container-wide: 1480px; /* pour héros et galeries en débord */ /* ========== RADIUS — moins ronds, plus "page" ========== */ --radius-xs: 2px; --radius-sm: 3px; --radius-md: 4px; --radius-lg: 6px; --radius-xl: 10px; --radius-2xl: 14px; --radius-pill: 9999px; --radius-full: 9999px; /* alias rétro-compat */ /* ========== OMBRES — "papier sur papier" ========== Plus subtiles, plus diffuses, jamais grises sales. */ --shadow-xs: 0 1px 1px rgba(26, 24, 20, 0.04); --shadow-sm: 0 2px 6px -2px rgba(26, 24, 20, 0.08); --shadow-md: 0 8px 24px -10px rgba(26, 24, 20, 0.18), 0 2px 6px -2px rgba(26, 24, 20, 0.06); --shadow-lg: 0 22px 50px -22px rgba(26, 24, 20, 0.26), 0 6px 16px -6px rgba(26, 24, 20, 0.08); --shadow-xl: 0 40px 80px -28px rgba(26, 24, 20, 0.32); --shadow-paper: 0 1px 0 rgba(255, 255, 255, 0.5) inset, 0 18px 36px -24px rgba(26, 24, 20, 0.22); --shadow-inset-hairline: 0 0 0 1px rgba(26, 24, 20, 0.06) inset; /* Glow conservés pour rétro-compat (utilisés par cart.css/studio.css), neutralisés */ --shadow-glow-accent: 0 0 0 3px rgba(200, 148, 31, 0.18); --shadow-glow-primary: 0 0 0 3px rgba(18, 52, 153, 0.14); /* ========== GRADIENTS — sobres, conservés pour rétro-compat ========== */ --gradient-art-tech: linear-gradient(110deg, var(--color-primary) 0%, var(--color-primary-light) 50%, var(--color-accent) 100%); --gradient-art-tech-soft: linear-gradient(110deg, rgba(18, 52, 153, 0.85), rgba(58, 85, 179, 0.6) 50%, rgba(200, 148, 31, 0.7)); --gradient-line-accent: linear-gradient(90deg, transparent, var(--color-accent) 50%, transparent); --gradient-line-primary: linear-gradient(90deg, transparent, var(--color-primary-light) 50%, transparent); --gradient-radial-glow: radial-gradient(circle at 50% 50%, rgba(200, 148, 31, 0.18), transparent 70%); --gradient-paper: linear-gradient(180deg, var(--color-bg-pure) 0%, var(--color-bg) 100%); --gradient-ink: linear-gradient(160deg, var(--color-primary-deep) 0%, var(--color-primary) 100%); /* Patterns — neutralisés (transparents) pour ne plus polluer la DA. Conservés sous le même nom car référencés ailleurs. */ --pattern-dots: radial-gradient(rgba(26, 24, 20, 0.04) 1px, transparent 1px); --pattern-dots-bright: radial-gradient(rgba(200, 148, 31, 0.10) 1px, transparent 1px); --pattern-dots-light: radial-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px); --pattern-grid: none; /* Texture grain — bruit léger pour donner du "papier" */ --pattern-grain: radial-gradient(rgba(26, 24, 20, 0.025) 1px, transparent 1.5px), radial-gradient(rgba(26, 24, 20, 0.015) 1px, transparent 1px); /* Glows neutralisés (réf. rétro-compat) */ --glow-accent: 0 0 0 transparent; --glow-primary: 0 0 0 transparent; --glow-emotion: 0 0 0 transparent; /* ========== TRANSITIONS ========== */ --t-fast: 180ms; --t-base: 320ms; --t-slow: 520ms; --t-stretch: 780ms; --easing: cubic-bezier(0.22, 0.61, 0.36, 1); /* "expressive standard" */ --easing-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --easing-elegant: cubic-bezier(0.65, 0, 0.35, 1); /* mouvements lents et nobles */ /* ========== Z-INDEX ========== */ --z-base: 1; --z-sticky: 100; --z-overlay: 500; --z-modal: 1000; --z-toast: 1500; /* ========== HEADER / FOOTER ========== */ --header-height: 84px; --header-height-mobile: 68px; } /* Section "encrée" (fond bleu profond) — variables overridées pour héros sombres */ .theme-ink { --color-text: var(--color-text-on-dark); --color-text-soft: rgba(242, 239, 231, 0.78); --color-text-muted: rgba(242, 239, 231, 0.55); --color-bg: var(--color-primary-deep); --color-bg-pure: var(--color-primary); --color-bg-soft: var(--color-primary-dark); --color-border: rgba(242, 239, 231, 0.14); --color-border-soft: rgba(242, 239, 231, 0.08); --color-border-ink: rgba(242, 239, 231, 0.18); color: var(--color-text); background: var(--color-bg); } /* ========== BREAKPOINTS (référence) ========== 480px — petit mobile 768px — tablette 1024px — petit desktop 1440px — grand desktop ============================================================ */