/* ===================================================================== La typographie du site — une seule feuille, chargée par toutes les pages. Avant, chaque page déclarait sa propre pile et demandait "Charter" en premier. Charter n'existe que sur macOS et iOS : sur Windows et Android le site tombait sur Georgia, ailleurs sur un serif générique. La police du site était donc un accident de plateforme, différent pour chaque visiteur, et personne sur Windows n'a jamais vu ce qui était prévu. Deux familles, embarquées, plus rien de conditionnel : --display Bricolage Grotesque — les titres. Large, un peu industrielle, une personnalité qui va aux robots en gilet jaune. Variable de 200 à 800, avec un axe optique. --sans Inter — le corps et l'interface. La sans la mieux réglée pour les écrans, et surtout pour du texte clair sur fond presque noir, où un serif fin se délite. --mono inchangée : la pile monospace du système, qui porte déjà tous les libellés de HUD et qu'il n'y avait aucune raison de remplacer. Les fichiers sont servis depuis /fonts, jamais depuis un CDN — même règle que le Three.js de /vendor. Deux sous-ensembles par famille : `latin` part toujours, `latin-ext` ne part que si la page contient vraiment un de ses caractères, ce que `unicode-range` garantit. Un visiteur francophone ou anglophone ne télécharge donc que les deux fichiers `latin`, soit environ 146 Ko. Licences : SIL Open Font License 1.1 pour les deux, textes complets dans /fonts/OFL-*.txt comme la licence l'exige. ===================================================================== */ /* ---------- Bricolage Grotesque · variable 200–800, opsz 12–96 ---------- */ @font-face { font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 200 800; font-display: swap; src: url("/fonts/bricolage-latin.woff2") format("woff2"); 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: "Bricolage Grotesque"; font-style: normal; font-weight: 200 800; font-display: swap; src: url("/fonts/bricolage-latin-ext.woff2") format("woff2"); 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; } /* ---------- Inter · variable 100–900, opsz 14–32 ---------- */ @font-face { font-family: "Inter var"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/fonts/inter-latin.woff2") format("woff2"); 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: "Inter var"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/fonts/inter-latin-ext.woff2") format("woff2"); 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; } /* ---------- Inter italique ---------- Les vraies italiques comptent : le site en pose sur les citations détachées, la ligne signée du manifesto et chaque de récit. Sans le fichier, le navigateur penche le romain lui-même, et un faux oblique de grotesque se voit immédiatement. Bricolage n'a pas la sienne en revanche : les titres n'utilisent donc jamais l'italique, ils emphasent par la couleur — ce qui est de toute façon plus fort en display. */ @font-face { font-family: "Inter var"; font-style: italic; font-weight: 100 900; font-display: swap; src: url("/fonts/inter-italic-latin.woff2") format("woff2"); 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: "Inter var"; font-style: italic; font-weight: 100 900; font-display: swap; src: url("/fonts/inter-italic-latin-ext.woff2") format("woff2"); 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; } /* ---------- Les jetons ---------- */ :root { --display: "Bricolage Grotesque", "Segoe UI Variable Display", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --sans: "Inter var", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --mono: ui-monospace, "SF Mono", "Cascadia Mono", "JetBrains Mono", Menlo, Consolas, monospace; } /* ---------- Réglages de base ---------- L'axe optique fait le travail que faisaient les tailles fixes : la même fonte se resserre en grand et s'ouvre en petit. On le laisse en auto plutôt que de le figer, et on ne corrige à la main que le tracking, que les deux familles ont volontairement large par défaut. */ body { font-optical-sizing: auto; /* Inter a un œil plus grand que le Georgia qu'on subissait : à taille égale le texte paraît plus gros. On rend le millimètre en trop. */ letter-spacing: -0.003em; } /* Les titres. Bricolage crénée large par défaut, ce qui va bien à un mot seul et mal à une phrase de quinze : on serre, et d'autant plus que le corps est gros. */ h1, h2, h3, h4, .display { font-family: var(--display); font-optical-sizing: auto; text-wrap: balance; } h1 { font-weight: 700; letter-spacing: -0.032em; } h2 { font-weight: 700; letter-spacing: -0.026em; } h3 { font-weight: 600; letter-spacing: -0.014em; } h4 { font-weight: 600; letter-spacing: -0.01em; } /* La mono garde ses majuscules espacées : c'est la voix de l'interface, et elle n'a pas changé. On lui coupe seulement les ligatures, qui transforment un "!=" d'infobulle en glyphe inattendu. */ .mono, code, kbd, samp, pre { font-variant-ligatures: none; } /* Les chiffres qui bougent — compteurs de HUD, tableaux, prix — ne doivent pas faire danser la ligne. Inter a des chiffres tabulaires, autant les utiliser là où la valeur se met à jour. */ .stat, .num, td.num, .mval, table { font-variant-numeric: tabular-nums; }