/* ========================================================= Marvin Design System — Colors & Type Source: Marvin charte graphique 01/2026 ========================================================= */ /* ---------- Fonts ---------- */ /* Poppins is the sole typeface. Local brand TTF files in /fonts. Seules les graisses utilisées en page sont déclarées (audit 2026-05-08 : 300/400/500 only, pas d'italique). Les TTF des autres graisses sont conservés sur disk pour usage futur — ré-ajouter le @font-face si besoin. */ @font-face { font-family: 'Poppins'; font-weight: 300; font-style: normal; src: url('fonts/Poppins-Light.ttf') format('truetype'); font-display: swap; } @font-face { font-family: 'Poppins'; font-weight: 400; font-style: normal; src: url('fonts/Poppins-Regular.ttf') format('truetype'); font-display: swap; } @font-face { font-family: 'Poppins'; font-weight: 500; font-style: normal; src: url('fonts/Poppins-Medium.ttf') format('truetype'); font-display: swap; } @font-face { font-family: 'Poppins'; font-weight: 700; font-style: normal; src: url('fonts/Poppins-Bold.ttf') format('truetype'); font-display: swap; } :root { /* ===== BRAND COLORS (from charte graphique) ===== */ /* Primary */ --marvin-violet-intense: #240046; /* Violet intense — bg, titres */ --marvin-beige: #fdfcf6; /* Beige (presque blanc) — surface claire par défaut */ --marvin-beige-warm: #f9f5e9; /* Beige original — réservé texte sur fond sombre */ /* Secondary — accents */ --marvin-violet: #8759ff; /* Violet vif — CTA, accents, aura */ --marvin-lilas: #b9b1ff; /* Lilas — surfaces douces, hover */ --marvin-bleu-ciel: #69b7df; /* Bleu ciel — accent cool */ --marvin-vert: #d1de54; /* Vert chartreuse — flash sur chiffres clefs */ /* Neutrals */ --marvin-black: #000000; --marvin-white: #ffffff; /* ===== SEMANTIC — SURFACES ===== */ --surface-deep: var(--marvin-violet-intense); --surface-cream: var(--marvin-beige); --surface-paper: var(--marvin-white); --surface-ink: #0a0012; /* near-black for contrast surfaces */ /* ===== SEMANTIC — TEXT ===== */ --fg-ink: #0a0012; /* primary text on light surfaces */ --fg-muted: #5a4d6b; /* secondary text on light */ --fg-subtle: #8b8196; /* tertiary / captions */ --fg-on-dark: var(--marvin-beige); --fg-on-dark-muted: rgba(249, 245, 233, 0.72); --fg-on-dark-subtle: rgba(249, 245, 233, 0.50); --fg-accent: var(--marvin-violet); --fg-flash: var(--marvin-vert); /* numbers / stats highlight */ /* ===== SEMANTIC — BORDERS & DIVIDERS ===== */ --border-soft: rgba(36, 0, 70, 0.08); --border-default: rgba(36, 0, 70, 0.16); --border-strong: rgba(36, 0, 70, 0.32); --border-on-dark: rgba(249, 245, 233, 0.14); --border-on-dark-strong: rgba(249, 245, 233, 0.32); /* ===== GRADIENTS (see assets/ for full-bleed PNGs) ===== */ --grad-hero: radial-gradient(120% 100% at 20% 20%, #b9b1ff 0%, #8759ff 45%, #240046 100%); --grad-aura: radial-gradient(60% 60% at 50% 50%, #b9b1ff 0%, #8759ff 55%, rgba(135,89,255,0) 80%); --grad-deep: linear-gradient(135deg, #240046 0%, #3a0d5c 50%, #8759ff 100%); --grad-cool: linear-gradient(135deg, #240046 0%, #8759ff 50%, #69b7df 100%); --grad-flash: linear-gradient(135deg, #8759ff 0%, #d1de54 100%); --grad-tcard: linear-gradient(165deg, #240046 0%, #3d0d6b 55%, #5a2a9c 100%); --grad-mini: linear-gradient(135deg, #8759ff, #240046); --grad-banner: linear-gradient(120deg, #240046 0%, #3d0d6b 35%, #6b3fcc 70%, #8759ff 100%); --grad-stripes-light: repeating-linear-gradient(135deg, rgba(255,255,255,0.04) 0px, rgba(255,255,255,0.04) 1px, transparent 1px, transparent 80px); /* ===== RADII ===== */ --radius-xs: 6px; --radius-sm: 10px; --radius-md: 16px; --radius-lg: 24px; --radius-xl: 36px; --radius-pill: 999px; /* ===== SHADOWS & ELEVATION ===== */ --shadow-xs: 0 1px 2px rgba(36, 0, 70, 0.06); --shadow-sm: 0 2px 8px rgba(36, 0, 70, 0.08); --shadow-md: 0 8px 24px rgba(36, 0, 70, 0.12); --shadow-lg: 0 24px 64px rgba(36, 0, 70, 0.18); --shadow-glow-violet: 0 0 40px rgba(135, 89, 255, 0.45); --shadow-glow-vert: 0 0 24px rgba(209, 222, 84, 0.55); --shadow-inset-soft: inset 0 1px 0 rgba(255, 255, 255, 0.06); /* ===== SPACING ===== */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 128px; /* ===== TYPOGRAPHY ===== */ --font-sans: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; /* Weights — no bold. Titles rely on size + light weights. */ --fw-thin: 100; --fw-extralight: 200; --fw-light: 300; --fw-regular: 400; --fw-medium: 500; /* Type scale — tuned for product UI + marketing */ --fs-display-xl: clamp(56px, 8vw, 120px); --fs-display-lg: clamp(44px, 6vw, 88px); --fs-display: clamp(36px, 4.5vw, 64px); --fs-h1: 48px; --fs-h2: 36px; --fs-h3: 28px; --fs-h4: 22px; --fs-h5: 18px; --fs-body-lg: 18px; --fs-body: 16px; --fs-body-sm: 14px; --fs-caption: 12px; --fs-micro: 11px; --lh-tight: 1.05; --lh-snug: 1.2; --lh-normal: 1.5; --lh-loose: 1.7; --tracking-tight: -0.02em; --tracking-normal: 0; --tracking-wide: 0.04em; --tracking-wider: 0.12em; } /* ========================================================= SEMANTIC TYPE CLASSES ========================================================= */ .m-display-xl { font-family: var(--font-sans); font-weight: var(--fw-extralight); font-size: var(--fs-display-xl); line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); } .m-display { font-family: var(--font-sans); font-weight: var(--fw-extralight); font-size: var(--fs-display); line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); } .m-h1 { font: var(--fw-light) var(--fs-h1)/var(--lh-snug) var(--font-sans); letter-spacing: var(--tracking-tight); } .m-h2 { font: var(--fw-light) var(--fs-h2)/var(--lh-snug) var(--font-sans); letter-spacing: var(--tracking-tight); } .m-h3 { font: var(--fw-regular) var(--fs-h3)/var(--lh-snug) var(--font-sans); } .m-h4 { font: var(--fw-regular) var(--fs-h4)/var(--lh-snug) var(--font-sans); } .m-h5 { font: var(--fw-medium) var(--fs-h5)/var(--lh-normal) var(--font-sans); } .m-body-lg { font: var(--fw-regular) var(--fs-body-lg)/var(--lh-normal) var(--font-sans); } .m-body { font: var(--fw-regular) var(--fs-body)/var(--lh-normal) var(--font-sans); } .m-body-sm { font: var(--fw-regular) var(--fs-body-sm)/var(--lh-normal) var(--font-sans); } .m-caption { font: var(--fw-medium) var(--fs-caption)/var(--lh-normal) var(--font-sans); } .m-quote { font: var(--fw-light) var(--fs-body-lg)/var(--lh-loose) var(--font-sans); font-style: italic; } .m-eyebrow { font: var(--fw-medium) var(--fs-micro)/1 var(--font-sans); letter-spacing: var(--tracking-wider); text-transform: uppercase; } .m-stat { font: var(--fw-extralight) clamp(56px, 7vw, 96px)/0.9 var(--font-sans); letter-spacing: var(--tracking-tight); color: var(--marvin-vert); } /* ========================================================= BASE RESETS (scoped — apply inside .m-reset) ========================================================= */ .m-reset, .m-reset *, .m-reset *::before, .m-reset *::after { box-sizing: border-box; } .m-reset { font-family: var(--font-sans); color: var(--fg-ink); } .m-reset h1 { font: var(--fw-light) var(--fs-h1)/var(--lh-snug) var(--font-sans); letter-spacing: var(--tracking-tight); margin: 0 0 var(--space-4); } .m-reset h2 { font: var(--fw-light) var(--fs-h2)/var(--lh-snug) var(--font-sans); letter-spacing: var(--tracking-tight); margin: 0 0 var(--space-4); } .m-reset h3 { font: var(--fw-regular) var(--fs-h3)/var(--lh-snug) var(--font-sans); margin: 0 0 var(--space-3); } .m-reset p { font: var(--fw-regular) var(--fs-body)/var(--lh-normal) var(--font-sans); margin: 0 0 var(--space-3); } /* ========================================================= GLOBAL BASELINE Anciennement dupliqué dans le