/* ============================================================ Avrile — Design Tokens Variables :root uniquement. Zéro sélecteur, zéro règle de style. Fonts gérées par Bricks Font Manager — mappées uniquement par nom. ============================================================ */ :root { /* ---------------------------------------------------------- Fonts Migra uploadée manuellement dans Bricks Font Manager : Migra-Extralight.woff2 → weight 200 normal Migra-Extrabold.woff2 → weight 800 normal MigraItalic-ExtralightItalic.woff2 → weight 200 italic MigraItalic-ExtraboldItalic.woff2 → weight 800 italic DM Sans, IBM Plex Mono, Cormorant Garamond via Google Fonts. ---------------------------------------------------------- */ --avr-font-display: 'DM Sans', 'Helvetica Neue', Arial, sans-serif; --avr-font-body: 'DM Sans', 'Helvetica Neue', Arial, sans-serif; --avr-font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace; --avr-font-italic: 'Cormorant Garamond', serif; --avr-font-logo: 'Migra', serif; /* ---------------------------------------------------------- Couleurs de base — palette complète ---------------------------------------------------------- */ --avr-color-white: #FFFFFF; --avr-color-ink: #1A1416; --avr-color-raisin-deep: #2A0F18; --avr-color-navy: #000D2A; --avr-color-cream: #EFECDF; --avr-color-cream-warm: #E5E1D2; --avr-color-paper: #F4F1E6; --avr-color-muted-warm: #6A625B; --avr-color-raisin: #3F1824; --avr-color-raisin-mid: #7A2030; --avr-color-raisin-light: #B33A50; --avr-color-red: #FA3B05; --avr-color-orange: #F69121; --avr-color-orange-light: #FFD2A3; --avr-color-cyan: #00C8E1; --avr-color-cyan-deep: #00A8C8; --avr-color-cyan-deeper: #006F88; --avr-color-cyan-light: #80E0EE; --avr-color-grey: #B8B3A8; --avr-color-grey-dark: #8D7E67; /* ---------------------------------------------------------- Thème actif — cream par défaut (bg blanc) Surchargé par [data-theme="X"] sur ---------------------------------------------------------- */ --avr-bg: var(--avr-color-white); --avr-fg: var(--avr-color-ink); --avr-accent: var(--avr-color-raisin); --avr-muted: var(--avr-color-muted-warm); --avr-rule: rgba(26, 20, 22, 0.10); /* ---------------------------------------------------------- Halo actif — incandescent par défaut Surchargé par [data-halo="X"] sur ---------------------------------------------------------- */ --avr-halo-1: var(--avr-color-red); --avr-halo-2: var(--avr-color-orange); --avr-halo-3: var(--avr-color-orange-light); /* ---------------------------------------------------------- Effets ---------------------------------------------------------- */ --avr-grain: 0.40; /* ---------------------------------------------------------- Typographie — échelle extraite du design ---------------------------------------------------------- */ --avr-text-display: clamp(64px, 10vw, 160px); /* hero rotor Migra */ --avr-text-h1: clamp(48px, 6.5vw, 104px); /* h1 sections / CTA */ --avr-text-h2-lg: clamp(48px, 6vw, 96px); /* h2 statement large */ --avr-text-h2: clamp(28px, 2.8vw, 40px); /* h2 sections standard */ --avr-text-h3: clamp(40px, 4.8vw, 76px); /* h3 poles */ --avr-text-h3-sm: clamp(28px, 2.4vw, 40px); /* h3 cards */ --avr-text-menu: clamp(28px, 4vw, 42px); /* liens menu mobile */ --avr-text-lead: clamp(15px, 1.1vw, 17px); /* lead body */ --avr-text-body: 16px; --avr-text-sm: 15px; --avr-text-xs: 14px; --avr-text-label: 13px; /* pilules label IBM Plex Mono */ --avr-text-mono: 11px; /* eyebrows, données mono */ --avr-text-micro: 10px; /* mentions fines */ --avr-text-nano: 9px; /* Graisses utilisées */ --avr-weight-light: 200; --avr-weight-regular: 400; --avr-weight-bold: 800; /* Interlignage */ --avr-leading-tight: 0.92; --avr-leading-head: 1.02; --avr-leading-body: 1.5; --avr-leading-loose: 1.7; /* Letter-spacing */ --avr-tracking-tight: -0.025em; --avr-tracking-neg: -0.02em; --avr-tracking-none: 0; --avr-tracking-wide: 0.08em; --avr-tracking-wider: 0.14em; --avr-tracking-widest: 0.18em; /* ---------------------------------------------------------- Espacement — grille inférée du design ---------------------------------------------------------- */ --avr-space-section: clamp(80px, 10vw, 120px); /* padding vertical section */ --avr-space-gutter: clamp(24px, 4vw, 40px); /* padding horizontal */ --avr-space-xxl: 80px; --avr-space-xl: 56px; --avr-space-lg: 48px; --avr-space-md: 40px; --avr-space-sm: 32px; --avr-space-xs: 24px; --avr-space-xxs: 16px; --avr-space-tiny: 12px; --avr-space-micro: 8px; /* ---------------------------------------------------------- Layout ---------------------------------------------------------- */ --avr-max-content: 1480px; --avr-max-text: 720px; --avr-max-narrow: 540px; --avr-nav-height: 56px; /* ---------------------------------------------------------- Border-radius ---------------------------------------------------------- */ --avr-radius-pill: 999px; --avr-radius-card: 28px; --avr-radius-md: 22px; --avr-radius-sm: 14px; --avr-radius-xs: 6px; --avr-radius-micro: 2px; --avr-radius-round: 50%; /* ---------------------------------------------------------- Transitions ---------------------------------------------------------- */ --avr-ease-reveal: cubic-bezier(0.16, 1, 0.3, 1); --avr-ease-nav: cubic-bezier(0.86, 0, 0.07, 1); --avr-ease-standard: ease; --avr-duration-slow: 0.9s; --avr-duration-medium: 0.55s; --avr-duration-fast: 0.3s; --avr-duration-quick: 0.2s; --avr-transition-reveal: opacity var(--avr-duration-slow) var(--avr-ease-standard), transform var(--avr-duration-slow) var(--avr-ease-reveal); --avr-transition-theme: background 0.6s var(--avr-ease-standard), color 0.6s var(--avr-ease-standard); /* ---------------------------------------------------------- Z-index ---------------------------------------------------------- */ --avr-z-backdrop: 150; --avr-z-nav: 200; --avr-z-overlay: 300; } /* ---------------------------------------------------------- Thème paper ---------------------------------------------------------- */ [data-theme="paper"] { --avr-fg: var(--avr-color-raisin-deep); --avr-accent: var(--avr-color-red); --avr-rule: rgba(42, 15, 24, 0.10); } /* ---------------------------------------------------------- Thème midnight ---------------------------------------------------------- */ [data-theme="midnight"] { --avr-bg: var(--avr-color-navy); --avr-fg: var(--avr-color-cream); --avr-accent: var(--avr-color-cyan); --avr-muted: rgba(239, 236, 223, 0.55); --avr-rule: rgba(239, 236, 223, 0.16); } /* ---------------------------------------------------------- Thème raisin ---------------------------------------------------------- */ [data-theme="raisin"] { --avr-bg: var(--avr-color-raisin); --avr-fg: var(--avr-color-cream); --avr-accent: var(--avr-color-orange); --avr-muted: rgba(239, 236, 223, 0.55); --avr-rule: rgba(239, 236, 223, 0.16); } /* ---------------------------------------------------------- Halo raisin ---------------------------------------------------------- */ [data-halo="raisin"] { --avr-halo-1: var(--avr-color-raisin); --avr-halo-2: var(--avr-color-raisin-mid); --avr-halo-3: var(--avr-color-raisin-light); } /* ---------------------------------------------------------- Halo coastal ---------------------------------------------------------- */ [data-halo="coastal"] { --avr-halo-1: var(--avr-color-cyan-deep); --avr-halo-2: var(--avr-color-cyan); --avr-halo-3: var(--avr-color-cyan-light); } /* ---------------------------------------------------------- Halo duo ---------------------------------------------------------- */ [data-halo="duo"] { --avr-halo-1: var(--avr-color-raisin); --avr-halo-2: var(--avr-color-cyan-deep); --avr-halo-3: var(--avr-color-orange); } /* ---------------------------------------------------------- Halo mono ---------------------------------------------------------- */ [data-halo="mono"] { --avr-halo-1: var(--avr-color-grey-dark); --avr-halo-2: var(--avr-color-grey); --avr-halo-3: var(--avr-color-cream-warm); }