/* ========================================================================== Cortex Luxury, jetons de design — direction « Roadbook » THEME CLAIR sur papier ivoire. Le defilement est un itineraire, la typographie est duale, Jost porte la rigueur, Playfair italique porte le plaisir de la route. Aucun rouge, aucun gris froid. ========================================================================== */ /* -------------------------------------------------------------------------- Polices auto-hebergees Jost et Playfair Display, licence SIL Open Font. Fichiers woff2 servis par notre propre domaine depuis assets/fonts/. Aucun appel a un serveur tiers, la contrainte de zero dependance tient. Les sous-ensembles latin et latin-ext sont separes, le navigateur ne telecharge latin-ext que si la page contient un caractere concerne. -------------------------------------------------------------------------- */ @font-face { font-family: "Jost"; src: url("../fonts/jost-400-normal-latin-ext.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Jost"; src: url("../fonts/jost-400-normal-latin.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Jost"; src: url("../fonts/jost-500-normal-latin-ext.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Jost"; src: url("../fonts/jost-500-normal-latin.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Jost"; src: url("../fonts/jost-600-normal-latin-ext.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Jost"; src: url("../fonts/jost-600-normal-latin.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Jost"; src: url("../fonts/jost-700-normal-latin-ext.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Jost"; src: url("../fonts/jost-700-normal-latin.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Playfair Display"; src: url("../fonts/playfairdisplay-400-italic-latin-ext.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Playfair Display"; src: url("../fonts/playfairdisplay-400-italic-latin.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } :root { /* ---- Surfaces papier -------------------------------------------------- Ivoire chaud, papeterie et tuffeau, plus aucun gris neutre. La profondeur est portee par les ombres douces et les filets. --surface-0 #fbf9f4 fond de page --surface-1 #f6f2e9 bande douce --surface-2 #efe9dc bande perle ---------------------------------------------------------------------- */ --surface-0: #fbf9f4; --surface-1: #f6f2e9; --surface-2: #efe9dc; /* Bande sombre de contrepoint, encre chaude, presque espresso. */ --surface-ink: #191512; --surface-ink-soft: #241f1a; --hairline: #e5decd; --hairline-strong: #cfc5ac; /* Bordure d'un controle interactif. WCAG 1.4.11 exige 3:1. #877f6b sur #fbf9f4 donne 3.2:1. */ --border-interactive: #877f6b; /* ---- Accent or bronze ------------------------------------------------- Herite de la charte, verifie sur les nouvelles surfaces ivoire. --accent #7f6423 texte et fond de CTA 5.31:1 sur #fbf9f4 5.02:1 sur #f6f2e9 4.71:1 sur #efe9dc --accent-deep #64501e etats presses, 7.3:1 sur ivoire --accent-soft #c6a15b decoratif et texte sur fond sombre 6.9:1 sur #191512 ---------------------------------------------------------------------- */ --accent: #7f6423; --accent-deep: #64501e; --accent-soft: #c6a15b; --accent-soft-strong: #dcbd82; --accent-wash: #f4ecd9; --on-accent: #ffffff; /* ---- Texte ----------------------------------------------------------- Encre chaude, aucun noir pur. --ink #17130c 16.9:1 sur #fbf9f4 --body #565040 6.7:1 sur #fbf9f4 --muted #6d6553 4.9:1 sur #fbf9f4 ---------------------------------------------------------------------- */ --ink: #17130c; --body: #565040; --muted: #6d6553; /* Texte pose sur la bande sombre. */ --ink-on-dark: #f7f3ea; --body-on-dark: #b4aa99; --body-on-dark-strong: #d9d3c6; /* Filets et bordures sur la bande sombre, voiles reutilisables. */ --hairline-ink: #3a332b; --hairline-on-dark: rgba(247, 243, 234, 0.65); --border-interactive-dark: #8c8474; --surface-0-veil: rgba(251, 249, 244, 0.92); --scrim: rgba(25, 21, 18, 0.55); /* ---- Ombres ---------------------------------------------------------- Larges, douces, teintees d'encre chaude. */ --shadow-sm: 0 1px 2px rgba(25, 21, 18, 0.05), 0 2px 8px rgba(25, 21, 18, 0.04); --shadow-md: 0 2px 4px rgba(25, 21, 18, 0.04), 0 8px 24px rgba(25, 21, 18, 0.07); --shadow-lg: 0 4px 8px rgba(25, 21, 18, 0.04), 0 16px 48px rgba(25, 21, 18, 0.09); --shadow-xl: 0 8px 16px rgba(25, 21, 18, 0.05), 0 32px 80px rgba(25, 21, 18, 0.11); /* ---- Typographie ------------------------------------------------------ Deux voix. Jost, la rigueur du service. Playfair italique, le mot qui roule. L'italique ne porte jamais une phrase entiere. */ --font-display: "Jost", "Avenir Next", "Century Gothic", Futura, "Segoe UI", system-ui, -apple-system, sans-serif; --font-serif: "Playfair Display", Didot, "Bodoni MT", "Hoefler Text", Garamond, Georgia, serif; --fs-mega: clamp(2.75rem, 7.5vw, 5.75rem); --fs-xl: clamp(2.125rem, 4.8vw, 3.75rem); --fs-lg: clamp(1.5rem, 3vw, 2.375rem); --fs-md: clamp(1.25rem, 2vw, 1.625rem); --fs-title: 1.125rem; --fs-body: 1rem; --fs-small: 0.875rem; --fs-caption: 0.75rem; --fs-label: 0.6875rem; --fs-number: clamp(2rem, 4vw, 3rem); --lh-tight: 1.02; --lh-display: 1.12; --lh-body: 1.65; --tracking-display: -0.02em; --tracking-label: 0.14em; --tracking-button: 0.1em; /* ---- Echelle d'espacement, base 4px ---------------------------------- */ --space-3xs: 4px; --space-2xs: 8px; --space-xs: 16px; --space-sm: 24px; --space-md: 32px; --space-lg: 48px; --space-xl: 64px; --space-2xl: 96px; --space-3xl: 128px; /* ---- Formes ----------------------------------------------------------- */ --radius-none: 0; --radius-input: 0; --radius-media: 14px; --radius-full: 9999px; /* ---- Grille ----------------------------------------------------------- */ --container: 1280px; --container-text: 68ch; --gutter: clamp(20px, 5vw, 48px); /* ---- Ligne de route --------------------------------------------------- La signature du site. Un filet vertical dans la marge gauche, qui se dessine au defilement, jalonne d'etapes. */ --route-w: 2px; --route-color: var(--hairline-strong); --route-dot: 9px; /* ---- Mouvement -------------------------------------------------------- Sorties expressives, jamais de rebond. --ease-out pour les entrees, --ease-inout pour les rideaux et les glissements de page. */ --ease: cubic-bezier(0.22, 0.61, 0.36, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-inout: cubic-bezier(0.83, 0, 0.17, 1); --dur-fast: 180ms; --dur-base: 400ms; --dur-slow: 700ms; --dur-epic: 1100ms; --header-h: 72px; } @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 0ms; --dur-base: 0ms; --dur-slow: 0ms; --dur-epic: 0ms; } }