/* =================================================================== * WILOO — POLICES * themes/wiloo/assets/css/wiloo-fonts.css * v2 — 01/09/2026 * * Charge en dur par templates/_partials/head.tpl, APRES le bloc * stylesheets. PAS declare dans theme.yml : celui-ci n'est relu qu'a * l'installation ou a la reinitialisation du theme, et une * reinitialisation rejouerait modules_to_hook * (cf. THEME_CONFIRMATION_WILOO.md §6). * * ⚠️ LES NOMS DE FICHIERS SONT HACHES PAR LE BUILD DU THEME. * Ils ne bougent pas tant qu'on ne recompile pas les assets, ce que le * projet ne fait pas (edition directe des .tpl/.css). Mais si le theme * est un jour reconstruit, TOUS les hachages ci-dessous deviennent * caducs et les polices ne chargeront plus du tout. Dans ce cas : * relire les @font-face de assets/css/theme.css et reporter les * nouveaux noms ici. C'est le seul point de fragilite du fichier. * * Les .woff2 vivent dans ce meme dossier (assets/css/) : theme.css, * servi depuis assets/cache/, les reference en url(../css/). * Les chemins ci-dessous sont donc relatifs, sans prefixe. * ================================================================ */ /* ------------------------------------------------------------------- * 1. Material Icons — swap -> block * * theme.css declare cette police en « font-display: swap ». Sur une * police d'ICONES c'est le pire reglage : le markup ecrit * menu et la ligature transforme le mot * en glyphe. Tant que la police n'est pas la, swap affiche donc le mot * EN CLAIR — « menu », « phone », « account_circle » — sur plusieurs * centaines de pixels, la ou l'icone en fait 24. Tout le cluster droit * du header se reorganise a l'arrivee du fichier. * * « block » masque le texte jusqu'a l'arrivee de la police puis affiche * directement les glyphes : aucune etape intermediaire, aucun decalage. * Recommandation officielle pour les polices d'icones. Passe 3 s le * navigateur affiche le repli, donc pas d'icone invisible durablement. * ---------------------------------------------------------------- */ @font-face { font-family: "Material Icons"; font-style: normal; font-weight: 400; font-display: block; src: url("12a47ed5fd5585f0f422.woff2") format("woff2"), url("f2a0933406f783065152.woff") format("woff"), url("00b1fb69fb78ff50fd55.ttf") format("truetype"); } /* ------------------------------------------------------------------- * 2. Manrope — block -> swap * * ⚠️ Ce changement N'EST VALIDE QUE COUPLE AU §3. Seul, il serait une * REGRESSION : swap affiche le texte en police de repli des le premier * rendu, puis bascule sur Manrope — donc un decalage garanti, exactement * le defaut corrige au §1. C'est le repli calibre du §3 qui rend le * basculement invisible. Ne jamais livrer l'un sans l'autre. * * Pourquoi bouger, alors que « block » ne decalait pas le texte * lui-meme : pendant les 3 s de blocage, le texte est invisible mais * occupe l'espace selon les metriques du repli. Les elements qui * suivent sont donc positionnes sur de mauvaises dimensions, et tout se * reajuste a l'arrivee de la police. L'audit Lighthouse du 01/09 le * confirme : apres correction du §1, les deux causes residuelles sont * a736092 (Manrope 500) et 250c120 (Manrope 600) — les graisses du * mega menu et des libelles de reassurance. * * Benefice secondaire : le texte devient lisible immediatement, ce qui * ameliore le FCP. * * Les sept graisses sont redeclarees, y compris 200/300/800 qui ne sont * pas chargees aujourd'hui : si un futur CSS les appelle, elles auront * le bon comportement sans qu'on ait a y repenser. * ---------------------------------------------------------------- */ @font-face { font-family: "Manrope"; font-style: normal; font-weight: 200; font-display: swap; src: url("38fa559ad8e8cbaee0c7.woff2") format("woff2"), url("1e81f33d197ccdb39d4e.woff") format("woff"), url("64041bf784575b30a79f.otf") format("truetype"); } @font-face { font-family: "Manrope"; font-style: normal; font-weight: 300; font-display: swap; src: url("57a1d494b0e76131f062.woff2") format("woff2"), url("016d41b1da3f1f5aaa44.woff") format("woff"), url("4db1ea0d15010c761ee5.otf") format("truetype"); } @font-face { font-family: "Manrope"; font-style: normal; font-weight: 400; font-display: swap; src: url("52260854eea2d38939bf.woff2") format("woff2"), url("0f099f4e4d67aeb18ab6.woff") format("woff"), url("56b65c6bec8f40445da4.otf") format("truetype"); } @font-face { font-family: "Manrope"; font-style: normal; font-weight: 500; font-display: swap; src: url("a7360927bb3673ed7814.woff2") format("woff2"), url("a8af1233a958bd1e96ed.woff") format("woff"), url("40ef5dc59db6eeef1694.otf") format("truetype"); } @font-face { font-family: "Manrope"; font-style: normal; font-weight: 600; font-display: swap; src: url("250c120c3f8b2b0bb58e.woff2") format("woff2"), url("c80d4fb11dcc2140b260.woff") format("woff"), url("fd2d932b381003546821.otf") format("truetype"); } @font-face { font-family: "Manrope"; font-style: normal; font-weight: 700; font-display: swap; src: url("dce0916af972e3040aa1.woff2") format("woff2"), url("de69cd9e672c81725abc.woff") format("woff"), url("29acb3c63123183305b0.otf") format("truetype"); } @font-face { font-family: "Manrope"; font-style: normal; font-weight: 800; font-display: swap; src: url("895e092292d88717adaa.woff2") format("woff2"), url("83131b9daba3e9a7b2c7.woff") format("woff"), url("057cc3c927dc0b2e8dbb.otf") format("truetype"); } /* ------------------------------------------------------------------- * 3. Repli calibre sur les metriques reelles de Manrope * * Sans cela, le swap du §2 ferait sauter le texte : la police systeme * et Manrope n'occupent pas la meme place. Les quatre proprietes * ci-dessous forcent le repli a adopter exactement les proportions de * Manrope, si bien que le basculement ne deplace plus rien. * * Valeurs calculees sur le fichier reel 52260854eea2d38939bf.woff2 * (Manrope Regular, version 2.000, extraction fontTools du 01/09) : * * unitsPerEm 960 * ascent / descent 1020 / -300 -> 1,0625 em / 0,3125 em * lineGap 300 -> 0,3125 em * USE_TYPO_METRICS actif * largeur moy. minuscules 530,3/960 -> 0,5524 em * idem Arial -> 0,5279 em * * size-adjust = 0,5524 / 0,5279 = 104,6 % * ascent-override = 1,0625 / 1,046 = 101,5 % * descent-override = 0,3125 / 1,046 = 29,9 % * * Les overrides sont divises par le size-adjust : sans cela l'ajustement * de largeur modifierait aussi la hauteur de ligne. * * Calibre sur la graisse 400, celle du corps de texte. Les graisses * lourdes restent approximatives — une famille de repli par graisse * serait plus juste, mais demande de mesurer chaque .woff2 et alourdit * la pile font-family. A envisager seulement si un residu subsiste sur * les titres. * * Le src n'utilise que des polices LOCALES : aucun telechargement, donc * aucun cout reseau. Si aucune n'est presente (Linux minimal), la * declaration echoue silencieusement et le navigateur retombe sur * sans-serif — degradation acceptable, jamais de texte invisible. * ---------------------------------------------------------------- */ @font-face { font-family: "Manrope Fallback"; src: local("Arial"), local("Helvetica Neue"), local("Liberation Sans"); size-adjust: 104.6%; ascent-override: 101.5%; descent-override: 29.9%; line-gap-override: 29.9%; } /* ------------------------------------------------------------------- * 4. Insertion du repli dans la pile * * theme.css ne declare Manrope que sur DEUX selecteurs — « body,html » * et « body » — tout le reste en herite. Une seule regle suffit donc, * et elle l'emporte par ordre de chargement, sans !important : meme * specificite (0,0,1), declaree apres. * * Verification apres toute mise a jour du theme : * grep -o 'font-family:[^;}]*Manrope[^;}]*' assets/css/theme.css * Si un troisieme selecteur apparait, l'ajouter ici. * ---------------------------------------------------------------- */ html, body { font-family: "Manrope", "Manrope Fallback", sans-serif; }