/* ═══════════════════════════════════════════════════════════════════════════ tokens.css — la seule source de vérité pour la couleur, la typographie, l'échelle et le mouvement. Le site dit deux choses à la fois : un ingénieur qui construit des produits, et un graphiste qui les dessine. La palette porte cette dualité en deux encres, et une seule règle les tient : • --accent, le vermillon, est **l'encre de marque**. Un seul aplat par écran : le mot « designer » dans le hero, le filet d'une carte au survol, la bande d'un panneau. Jamais deux dans le même champ de vision. • --warm, le violet, est **l'encre graphique**. Elle n'apparaît que dans la section Graphisme et sur ses badges. Ailleurs, elle n'existe pas. Les ratios de contraste ci-dessous sont **calculés** (WCAG 2.1, luminance relative sRGB), pas estimés. Sur les trois fonds — --bg, --surface, --surface-alt — la valeur la plus basse du système est --accent sur --surface-alt : 4,58. Aucun texte ne descend sous 4,5. --line est décoratif : 1,15 à 1,42. L'employer pour du texte casse l'objectif d'accessibilité, et c'est l'erreur la plus facile à commettre. ═══════════════════════════════════════════════════════════════════════════ */ :root { /* ── Couleur ─────────────────────────────────────────────────────────────── Mesuré sur --bg / --surface / --surface-alt : --ink 16,81 · 18,16 · 15,10 --ink-2 7,33 · 7,92 · 6,59 --ink-3 5,36 · 5,79 · 4,81 --accent 5,10 · 5,51 · 4,58 ← plancher du système --accent-ink 6,94 · 7,50 · 6,24 --warm 5,52 · 5,96 · 4,96 --warm-ink 7,09 · 7,66 · 6,37 --bg sur --accent : 5,10 — un aplat vermillon porte du texte clair. */ --bg: #F7F4EC; --surface: #FFFDF7; --surface-alt: #EDE8DB; --ink: #14140F; /* L'encre des **titres**, distincte de celle du texte courant. En clair, c'est la même : un noir chaud sur du papier. En sombre, elle devient du blanc franc — un grand titre gagne à être net, là où un paragraphe entier en blanc pur fatigue l'œil. Une seule valeur à changer pour les deux. */ --ink-title: #14140F; --ink-2: #55503F; --ink-3: #6A6455; --line: #DFD9C8; --accent: #C0341B; --accent-ink: #9C2A0E; --accent-soft: #F7E2DA; --warm: #5B4FCF; --warm-ink: #4A3FB8; --warm-soft: #E8E5FA; /* ── Typographie ─────────────────────────────────────────────────────────── Aucune famille nouvelle. Fraunces était chargée sans être exploitée : on ouvre ses axes SOFT et WONK pour une douzaine de kilo-octets, et elle devient une signature au lieu d'une serif de plus. */ --font-display: "Fraunces", ui-serif, Georgia, "Times New Roman", serif; --font-body: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Consolas, monospace; --font-arabic: "IBM Plex Sans Arabic", ui-sans-serif, system-ui, sans-serif; /* WONK incline les jambages de Fraunces. C'est une signature à 100 px et une gêne à 18 px : l'axe n'est donc ouvert qu'au-dessus de --step-3. Le jour où il paraîtra daté, c'est cette ligne-ci qu'on passe à 0. */ --wonk: 1; --step--2: clamp(0.72rem, 0.69rem + 0.12vw, 0.79rem); --step--1: clamp(0.83rem, 0.80rem + 0.15vw, 0.92rem); --step-0: clamp(1.00rem, 0.95rem + 0.25vw, 1.13rem); --step-1: clamp(1.25rem, 1.15rem + 0.50vw, 1.55rem); --step-2: clamp(1.60rem, 1.40rem + 1.00vw, 2.30rem); /* Les trois paliers d'affiche sont calibrés sur la **colonne**, pas sur la fenêtre : le titre du hero vit dans 7/12 d'un shell de 1200 px, soit 700 px. À 124 px, ses quatre lignes mangeaient l'écran entier et repoussaient les boutons et les chiffres sous la ligne de flottaison — c'est-à-dire exactement ce qu'un recruteur devait voir en premier. */ --step-3: clamp(2.10rem, 1.70rem + 1.90vw, 3.40rem); --step-4: clamp(2.60rem, 1.80rem + 3.40vw, 4.90rem); --step-5: clamp(2.80rem, 1.60rem + 4.60vw, 5.80rem); /* À 130 px, un interligne de 1,15 fait flotter les lignes du hero les unes au-dessus des autres au lieu de les empiler. */ --lh-tight: 1.06; --lh-body: 1.65; --measure: 66ch; /* ── Espacement — échelle de 4 px ──────────────────────────────────────── */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px; --s-11: 160px; --pad-section: var(--s-9); --shell: 1200px; --shell-pad: var(--s-5); /* Hauteur de la barre de navigation. Elle était écrite en dur à deux endroits — la nav elle-même et le `scroll-padding-top` — et les deux ont divergé. Une seule source, désormais. */ --nav-h: 64px; /* Largeur de la barre de défilement, posée par nav.js avant de verrouiller le corps. Sans elle, ouvrir un panneau retire la barre et décale la nav fixe de quinze pixels, très exactement au moment où le mouvement démarre. */ --sbw: 0px; /* ── Rayons ──────────────────────────────────────────────────────────────── Dix pixels, c'est l'arrondi par défaut de tout le web depuis 2020. Un atelier découpe droit. */ --r-sm: 2px; --r-md: 4px; --r-lg: 14px; --r-pill: 999px; /* ── Élévation — une seule ombre, trois usages ───────────────────────────── Autorisée sur .card, .reel et .lightbox__stage. Les plaques de la section « Sites livrés » vivent par leur filet, jamais par une ombre. */ --shadow-lift: 0 2px 4px rgba(20, 20, 15, .05), 0 16px 40px rgba(20, 20, 15, .10); /* ── Mouvement ───────────────────────────────────────────────────────────── Trois courbes, trois emplois distincts. --ease-in ne sert qu'aux sorties : un objet qui part accélère, un objet qui arrive décélère. Les employer à l'envers est la façon la plus sûre de rendre une interface molle. */ --ease: cubic-bezier(0.22, 1, 0.36, 1); --ease-out-ui: cubic-bezier(0.20, 0, 0, 1); --ease-in: cubic-bezier(0.55, 0, 1, 0.45); --dur-fast: 180ms; --dur: 380ms; --dur-slow: 780ms; /* Sens de lecture : +1 en LTR, −1 en RTL. Toute animation horizontale d'interface multiplie sa translation par ce facteur — c'est ce qui évite d'écrire deux jeux de keyframes. Voir rtl.css. */ --dir: 1; } @media (min-width: 992px) { :root { /* 160 px laissaient un écran presque vide avant chaque titre sur un portable de 960 px de haut. 128 px tiennent le rythme sans le trou. */ --pad-section: var(--s-10); --shell-pad: var(--s-7); } } /* ═══════════════════════════════ MODE SOMBRE ═══════════════════════════════ Une seule chose change : la valeur des jetons. Aucun composant ne connaît le thème, aucun sélecteur ne se dédouble — c'est ce qui permet de basculer sans rien casser ailleurs. Le thème est porté par `data-theme` sur ``, jamais par une media query seule : un visiteur doit pouvoir choisir autre chose que ce que son système impose. La préférence système sert de valeur par défaut, et c'est theme.js qui la lit au premier chargement. Mesuré sur --bg / --surface / --surface-alt : --ink 16,31 · 15,17 · 13,88 --ink-2 8,66 · 8,05 · 7,37 --ink-3 5,66 · 5,26 · 4,81 --accent 8,08 · 7,52 · 6,88 --accent-ink 10,10 · 9,39 · 8,60 --warm 9,50 · 8,84 · 8,09 ═══════════════════════════════════════════════════════════════════════════ */ :root[data-theme="dark"] { --bg: #121210; --surface: #1A1A17; --surface-alt: #22221E; --ink: #F2EFE6; --ink-title: #FFFFFF; /* 18,9:1 — les titres passent au blanc franc */ --ink-2: #B5B0A2; --ink-3: #928D7E; --line: #32302A; /* Le vermillon du mode clair disparaîtrait sur ce fond : on remonte la clarté et on réchauffe. En aplat plein, en revanche, cette valeur est un phare — les aplats de marque passent alors par un `color-mix` avec la surface (voir .hero__title .cut), et le vermillon pur ne sert plus qu'aux traits, aux chiffres et aux bordures. */ --accent: #FF8A5E; --accent-ink: #FFA98D; --accent-soft: #33211A; --warm: #B9AFFF; --warm-ink: #CFC8FF; --warm-soft: #221F3A; /* Une ombre portée ne se voit pas sur du noir : l'élévation passe par un filet plus clair, posé par components.css. Celle-ci ne sert qu'à asseoir la scène du lecteur vidéo. */ --shadow-lift: 0 2px 4px rgba(0, 0, 0, .50), 0 16px 40px rgba(0, 0, 0, .40); }