/* ========================================================================== xSOM Consulting — Design tokens Source unique de vérité pour couleurs, typographie, espacements, mouvement. Aucune valeur brute ne doit apparaître ailleurs dans le CSS. ========================================================================== */ :root { /* ---- Fonds ---------------------------------------------------------- */ --ink-950: #050b14; --ink-900: #0a1628; --ink-800: #0f2038; --ink-700: #16304f; --ink-600: #1e3d63; /* ---- Accent signature ----------------------------------------------- Le cuivre est un métal : un aplat le fait lire comme de l'orange. Il lui faut un reflet, un corps et une ombre. Les bornes ci-dessous ne sont pas choisies à l'œil — ce sont les teintes les plus extrêmes qui conservent 4.5:1 avec le texte posé dessus (voir --copper-metal). */ --copper: #e2603a; /* corps, teinte pivot */ --copper-sheen: #f7a077; /* reflet — 9.63:1 avec ink-950 */ --copper-shade: #ca5330; /* ombre — 4.50:1 avec ink-950, plancher */ --copper-bright: #f5793f; --copper-deep: #b84a28; /* texte sur fond clair — 4.75:1 */ --copper-wash: rgba(226, 96, 58, .10); --copper-line: rgba(226, 96, 58, .38); --copper-glow: rgba(226, 96, 58, .22); /* Surface métallique. Ce qui fait lire « métal » n'est pas un fondu doux mais une rupture : sur une surface bombée, la lumière casse net à la ligne médiane. D'où l'écart franc entre 47 % et 53 %. Le reflet diagonal par-dessus simule la source lumineuse. Toutes les teintes restent au-dessus de 4.5:1 avec ink-950. */ --copper-metal: linear-gradient(102deg, transparent 22%, rgba(255, 234, 216, .26) 42%, transparent 62%), linear-gradient(180deg, #f9ae88 0%, #f08355 34%, #e86a41 47%, #d4562f 53%, var(--copper-shade) 100%); --copper-metal-hot: linear-gradient(102deg, transparent 18%, rgba(255, 244, 232, .40) 40%, transparent 66%), linear-gradient(180deg, #ffc2a0 0%, #fa9264 34%, #f2764c 47%, #e05f36 53%, #d05531 100%); /* Texte métallique sur fond sombre. Plancher à #d35834 : 4.50:1 sur navy. */ --copper-text-metal: linear-gradient(174deg, #f8a87f 0%, #f28a5c 20%, var(--copper) 56%, #d35834 100%); /* Relief des surfaces cuivre : liseré lumineux en haut, sombre en bas. Sur 1 px, donc jamais sous le texte — le contraste n'en dépend pas. */ --copper-relief: inset 0 1px 0 rgba(255, 226, 205, .58), inset 0 -1px 0 rgba(92, 28, 12, .38); /* ---- Surfaces claires ----------------------------------------------- */ --paper: #ffffff; --paper-warm: #f6f3f0; --paper-dim: #e8e2dc; /* ---- Texte (contextuels : redéfinis par .section--light) ------------- */ --text-hi: rgba(255, 255, 255, .95); --text-mid: rgba(255, 255, 255, .72); --text-low: rgba(255, 255, 255, .52); /* .38 ne donnait que 3.57:1 sur navy : sous le seuil AA alors que ce jeton porte du texte lisible (baseline du logo, langue inactive, bas de page). .48 le remonte à 4.68:1. */ --text-faint: rgba(255, 255, 255, .48); /* ---- Surfaces et bordures (contextuelles) ---------------------------- */ --surface: rgba(255, 255, 255, .035); --surface-up: rgba(255, 255, 255, .06); --border: rgba(255, 255, 255, .08); --border-mid: rgba(255, 255, 255, .14); /* Couleur du cuivre quand il porte du texte. Sur fond sombre : --copper (4.62:1, AA). Sur fond clair : --copper-deep (5.9:1) — voir .section--light. */ --copper-text: var(--copper); /* ---- Titres ---------------------------------------------------------- Une seule teinte, un seul caractère typographique. Le relief vient d'une lumière qui balaie le texte et suit le curseur, jamais d'un changement de couleur ou de style : c'est ce qui distingue un titre composé d'un titre décoré. --title-sheen-pos est réécrite au pointeur par ui.js. Sans JavaScript ou sous prefers-reduced-motion elle vaut 50 % : la lumière reste au centre, immobile, et le titre garde exactement la même lisibilité. Le dégradé lui-même est écrit dans base.css et non ici, contrairement à tout le reste. Un `var()` imbriqué dans une custom property est résolu là où la propriété est DÉCLARÉE, pas là où elle est utilisée : un dégradé défini ici figerait --title-sheen-pos à la valeur de :root, puis hériterait cette valeur figée. La position ne bougerait jamais. */ --title-ink: #eef2f8; /* 15.8:1 sur ink-900 */ --title-glint: #ffffff; /* cœur du balayage */ --title-glint-warm: #fff5ed; /* fuite tiède, rappel du cuivre */ --title-sheen-pos: 50%; /* ---- Sémantique ------------------------------------------------------ */ --danger: #ff6b6b; --success: #4ade80; /* ---- Typographie ----------------------------------------------------- */ /* Saira descend de la DIN : la lettre de la signalétique technique, des plans d'infrastructure et de l'étiquetage industriel. Elle dit le métier sans le costume, là où Inter Tight ne disait rien. Elle est légèrement étroite, ce qui densifie les titres — d'où l'interlettrage repris plus bas, moins serré que pour Inter Tight. `sans-serif-condensed` en secours : c'est le substitut système le plus proche si le fichier ne charge pas. */ --font-display: 'Saira', 'Roboto Condensed', 'Arial Narrow', sans-serif; --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; --fs-display: clamp(2.6rem, 6vw, 4.75rem); --fs-h1: clamp(2.1rem, 4.4vw, 3.4rem); --fs-h2: clamp(1.65rem, 3.2vw, 2.5rem); --fs-h3: clamp(1.15rem, 1.8vw, 1.4rem); --fs-lead: clamp(1rem, 1.4vw, 1.15rem); --fs-body: 0.975rem; --fs-sm: 0.875rem; --fs-xs: 0.8rem; --fs-label: 0.7rem; --fs-metric: clamp(2.2rem, 4vw, 3.2rem); /* ---- Espacements (base 4px) ------------------------------------------ */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-6: 1.5rem; --sp-8: 2rem; --sp-12: 3rem; --sp-16: 4rem; --sp-24: 6rem; --sp-32: 8rem; --section-y: clamp(4.5rem, 9vw, 8rem); /* ---- Layout ---------------------------------------------------------- */ --container: 1240px; --container-narrow: 760px; --gutter: clamp(1.25rem, 4vw, 2.5rem); --header-h: 72px; /* ---- Rayons — angles quasi droits, registre technique ---------------- */ --r-sm: 3px; --r-md: 4px; --r-lg: 6px; /* ---- Mouvement ------------------------------------------------------- */ --ease: cubic-bezier(.25, .46, .45, .94); --ease-out: cubic-bezier(.16, 1, .3, 1); --t-fast: 200ms; --t-mid: 240ms; --t-slow: 320ms; --t-reveal: 700ms; /* ---- Élévation ------------------------------------------------------- */ --shadow-copper: 0 6px 24px rgba(226, 96, 58, .22); --shadow-dark: 0 18px 50px rgba(0, 0, 0, .38); /* ---- Grain : bruit SVG en data-URI, aucun fichier image -------------- */ --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E"); } /* -------------------------------------------------------------------------- Sections sur fond clair. On redéfinit les jetons contextuels au niveau du bloc, plutôt que de réécrire les couleurs élément par élément en style inline. -------------------------------------------------------------------------- */ .section--light { --text-hi: var(--ink-900); --text-mid: rgba(15, 32, 56, .78); /* Mêmes seuils sur fond clair : .58 tombait à 3.99:1 sur le titre « Ils nous font confiance ». */ --text-low: rgba(15, 32, 56, .70); --text-faint: rgba(15, 32, 56, .66); --surface: rgba(10, 22, 40, .03); --surface-up: rgba(10, 22, 40, .06); --border: rgba(10, 22, 40, .10); --border-mid: rgba(10, 22, 40, .18); --copper-text: var(--copper-deep); background: var(--paper-warm); color: var(--text-hi); }