Material affiche son icône `translate` : un idéogramme 文 collé à un A. Elle dit
« traduire », pas « vous êtes en français », et à la taille du bandeau on n'y
voit qu'un symbole asiatique — remarque de Patrick, et elle est juste.
Le bouton affiche désormais le drapeau de la langue courante et son code, comme
sur etm-powersync.fr. Dans la liste déroulante, la langue courante passe en gras
et en couleur d'accent : les trois lignes étaient identiques, on ne savait pas
d'où l'on partait.
Fait entièrement en CSS, sur `html[lang]` que mkdocs-static-i18n pose déjà par
locale (`fr` à la racine, `de` sous /de/, `en` sous /en/). Aucun gabarit du thème
n'est surchargé : rien à reprendre à chaque mise à jour de Material, et l'icône
d'origine est masquée, pas supprimée.
Trois points qui ne sont pas des détails :
- Les drapeaux sont des SVG en `data:`, pas des emojis — un emoji drapeau ne se
rend pas sous Windows, où Chrome affiche « FR » dans un carré.
- Chaque drapeau porte un liseré : sans lui la bande blanche du français se perd
dans le bandeau clair, et le noir de l'allemand dans le bandeau sombre.
- Le `aria-label` du bouton (« Sélectionner la langue ») est inchangé et porte
seul le sens pour les lecteurs d'écran ; il l'emporte sur le contenu, donc le
« FR » du `::after` ne sera pas annoncé en double.
Vérifié avant le push, faute de mkdocs installé en local : les trois pages
réellement servies ont été rechargées dans Chrome headless avec cette feuille de
style en remplacement, bandeau capturé dans les trois langues, plus la liste
déroulante forcée ouverte pour contrôler les drapeaux et la mise en évidence.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
`theme.font: {text, code}` faisait injecter par Material, dans le <head> de
chacune des 316 pages, un preconnect vers fonts.gstatic.com et une feuille
depuis fonts.googleapis.com (Sans 300/300i/400/400i/700/700i + Mono
400/400i/700/700i). Chaque visite transmettait donc l'IP du visiteur à Google
AVANT tout consentement.
Ce qui rendait ça gênant n'est pas la règle en soi, c'est l'asymétrie : le site
vitrine a fait exactement l'inverse en T10, délibérément, pour cette raison
(jurisprudence LG München 2022, doctrine CNIL) et pour ne pas contredire « vos
données ne sortent pas de chez vous ». La doc affichait donc le contraire de
l'engagement que le produit met en avant, sur le même nom de domaine.
Correctif : `theme.font: false` retire les deux balises ; les 16 woff2 viennent
du dépôt du site — mêmes fichiers, mêmes unicode-range (latin + latin-ext pour
les accents), déjà éprouvés en production depuis juin. Les 16 blocs @font-face
sont repris tels quels plutôt que réécrits, avec les chemins adaptés. Material
lit `--md-text-font` / `--md-code-font`, qu'extra.css définit.
312 Ko d'actifs, servis localement.
⚠️ LES ITALIQUES SONT DÉSORMAIS SYNTHÉTISÉES, et c'est la contrepartie à
connaître. Google servait 4 fontes italiques que nous n'avons pas (aucun fichier
italique dans le dépôt du site, aucune IBM Plex installée sur la machine de
build) : le navigateur incline donc la romaine. Visible sur les intertitres en
italique des blocs générés — `_Einstellungen:_`, `_Gemessene Größen:_`. Pour y
remédier : récupérer les woff2 italiques depuis le dépôt officiel IBM/plex (OFL)
et ajouter les @font-face correspondants. La méthode est celle déjà documentée
au T10 du site, et je ne l'ai pas prise d'office — c'est un ajout de binaires
depuis Internet.
Vérifié sur le site construit, et pas seulement sur le <head> :
· 0 url() externe dans toute la CSS
· 0 preconnect
· 0 ressource (link/script/img/iframe) chargée depuis un tiers — le seul hôte
cité est docs.etm-powersync.fr lui-même, par les <link rel="canonical">
· les 16 woff2 présents dans le build, 16 références, 0 chemin cassé
· build --strict sans avertissement
La seule mention restante de Google dans le dépôt est le commentaire d'extra.css
qui explique pourquoi elle n'y est plus.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Material rend son sélecteur en liste déroulante, chaque entrée portant un
`hreflang` : on l'habille donc en CSS pure, sans toucher au gabarit du thème ni
surcharger de template. Vérifié sur le HTML produit : les trois entrées ont bien
`hreflang="fr|de|en"` et la classe `md-select__link`.
Mêmes choix que sur le site vitrine, et pour les mêmes raisons : SVG inline en
data-URI plutôt qu'emoji (🇫🇷 ne s'affiche pas sous Windows), et le NOM de la
langue conservé à côté du drapeau (un drapeau désigne un pays, pas une langue —
et l'anglais sert ici les deux marchés plus la communauté).
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
- render_header_badges() fonction partagée pour canal + origine + stabilité
- Marqueur __badges_<plugin>__ dans les 9 fiches (5 manuelles + 4 auto)
- Marqueur __index_<cat>__ dans les 3 index manuels (compteurs, bornes, smart)
- Front matter hide: [toc] sur tous les index de catégorie
- .badge.experimental ajouté dans extra.css (waveshare)
- process() gère __badges_ keys via render_header_badges()
- build_category_index_page() inclut hide:toc front matter
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
