/* Design system Synaps — les polices, servies avec le design system.
Archivo (texte), Host Grotesk (titres), Newsreader (serif des visuels),
Caveat (notes manuscrites) : SIL OFL 1.1 (fonts/OFL.md), sous-ensemble
latin, en variable. Copié de synaps.re (src/ac/styles/styles.css).
Les chemins sont relatifs à ce fichier (../fonts/). Si vous copiez les
polices ailleurs, changez-les. Préchargez les deux principales :
Les « Repli » sont des polices locales recalées aux mesures des vraies
(size-adjust, ascent/descent-override) : la bascule ne décale rien (CLS). */
@font-face {
font-family: 'Archivo';
font-style: normal;
font-weight: 400 800;
font-stretch: 100%;
font-display: swap;
src: url('../fonts/archivo-latin-var.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;
}
/* Un seul fichier variable couvre 600 et 800 — Google servait déjà le même
pour les deux graisses. L'axe optique est figé à 72 dans le fichier. */
/* L'écriture à la main des notes de « Qui suis-je ? » (Caveat, variable).
Elle ne sert qu'à de courtes notes, sans texte utile : si elle tarde, la
note attend (block court) plutôt que de s'afficher en police de repli. */
@font-face {
font-family: 'Caveat';
font-style: normal;
font-weight: 400 700;
font-display: block;
src: url('../fonts/caveat-latin-var.woff2') format('woff2');
}
/* La police des titres depuis le 27/10/2026 (choix de Loïc parmi huit) :
Host Grotesk, sous licence SIL OFL 1.1, servie depuis le site. */
@font-face {
font-family: 'Host Grotesk';
font-style: normal;
font-weight: 300 800;
font-display: swap;
src: url('../fonts/host-grotesk-latin-var.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: 'Newsreader';
font-style: normal;
font-weight: 600 800;
font-display: swap;
src: url('../fonts/newsreader-latin-var.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;
}
/* Les replis, aux mesures des vraies polices. Avec font-display: swap, la
page se rend d'abord dans la police système, puis bascule quand la nôtre
arrive : si les deux n'ont pas la même largeur ni la même hauteur de
ligne, tout le texte se décale d'un coup — c'est ce que Google mesure
comme CLS. Tant que onze feuilles retardaient le rendu, les polices
(préchargées) arrivaient avant lui et personne ne voyait le repli ;
depuis qu'une seule feuille suffit, le rendu les devance sur mobile.
Chaque repli est une police locale (Arial pour Archivo, Georgia pour
Newsreader, et sur Android Roboto et Noto Serif) reprise avec size-adjust,
ascent-override et descent-override : même largeur moyenne, même hauteur
de ligne, la bascule ne bouge presque rien. Les hauteurs viennent des
métriques des polices (@capsizecss/metrics : Archivo 0,878 / 0,210 em,
Newsreader 0,735 / 0,265 em). Les largeurs, elles, ont été MESURÉES dans
Chrome, graisse par graisse, sur les titres et les paragraphes de
l'accueil : les chiffres de catalogue valent pour la graisse régulière,
et le site n'écrit qu'en 500 à 800 — Arial Bold et Georgia Bold n'ont pas
la largeur qu'on extrapolerait. D'où une face par graisse, chacune avec
son size-adjust ; ascent = 0,878 (ou 0,735) / size-adjust, pareil pour
descent, pour que la ligne garde la hauteur réelle quelle que soit la
graisse. Les faces Android sont estimées, pas mesurées.
Une famille par police locale, jamais deux src dans la même face : deux
@font-face de même nom et mêmes descripteurs, seule la dernière compte.
Si la police locale manque, la famille tombe et la pile continue. */
@font-face {
font-family: 'Archivo Repli';
src: local('Arial');
font-weight: 400;
size-adjust: 98.1%;
ascent-override: 89.5%;
descent-override: 21.41%;
line-gap-override: 0%;
}
@font-face {
font-family: 'Archivo Repli';
src: local('Arial');
font-weight: 500;
size-adjust: 99.88%;
ascent-override: 87.91%;
descent-override: 21.03%;
line-gap-override: 0%;
}
@font-face {
font-family: 'Archivo Repli';
src: local('Arial Bold');
font-weight: 600;
size-adjust: 94.73%;
ascent-override: 92.68%;
descent-override: 22.17%;
line-gap-override: 0%;
}
@font-face {
font-family: 'Archivo Repli';
src: local('Arial Bold');
font-weight: 700;
size-adjust: 97.95%;
ascent-override: 89.64%;
descent-override: 21.44%;
line-gap-override: 0%;
}
@font-face {
font-family: 'Archivo Repli';
src: local('Arial Bold');
font-weight: 800;
/* Calé sur « N'en dis pas plus, c'est quoi le numéro ? », le bouton du
hero : à 412 px de large il tient sur une ligne à deux pixels près, et
la moyenne des paragraphes (102,78 %) le faisait passer à deux lignes
en repli — 19 px de décalage sur tout le premier écran. */
size-adjust: 101.24%;
ascent-override: 86.72%;
descent-override: 20.74%;
line-gap-override: 0%;
}
@font-face {
font-family: 'Archivo Repli Android';
src: local('Roboto');
font-weight: 400 800;
size-adjust: 98.3%;
ascent-override: 89.32%;
descent-override: 21.36%;
line-gap-override: 0%;
}
@font-face {
font-family: 'Newsreader Repli';
src: local('Georgia Bold');
font-weight: 600;
size-adjust: 90.65%;
ascent-override: 81.08%;
descent-override: 29.23%;
line-gap-override: 0%;
}
@font-face {
font-family: 'Newsreader Repli';
src: local('Georgia Bold');
font-weight: 700;
size-adjust: 93.16%;
ascent-override: 78.9%;
descent-override: 28.45%;
line-gap-override: 0%;
}
@font-face {
font-family: 'Newsreader Repli';
src: local('Georgia Bold');
font-weight: 800;
size-adjust: 97.1%;
ascent-override: 75.7%;
descent-override: 27.29%;
line-gap-override: 0%;
}
@font-face {
font-family: 'Newsreader Repli Android';
src: local('Noto Serif');
font-weight: 600 800;
size-adjust: 84%;
ascent-override: 87.5%;
descent-override: 31.55%;
line-gap-override: 0%;
}