/* ============================================================================= CHARTE GRAPHIQUE cyberelements — « Brand guidelines, Jun 2026 » Feuille unique chargée par les SIX sites (extra_css de shared/mkdocs-base.yml ; le portail y ajoute portal-only.css, cf. projects/portal/mkdocs.yml). ORGANISATION — à respecter, c'est ce qui empêche une couleur de vivre à deux endroits : §1 Tokens de marque — les SEULES valeurs littérales du fichier §2 Polices auto-hébergées — @font-face + typographie §3 Thème CLAIR — mapping tokens → variables Material §4 Thème SOMBRE — idem §5 Admonitions — les 12 types, palette « B » §6 Composants et correctifs — historique, repointé sur les tokens §7 Sélecteur de langue — largeur + police des drapeaux (NE PAS TOUCHER) ⛔ AUCUNE COULEUR LITTÉRALE HORS DU §1. Avant la refonte du 25 août 2026, le bleu nuit #192436 et l'orange #FA8502 étaient écrits en dur dans dix déclarations `!important` ici, ET recopiés dans le thème RapiDoc d'`overrides/api-reference.html` — sans aucun lien mécanique entre les deux. Une désynchronisation serait restée MUETTE : ni le build, ni `linkcheck`, ni `i18n_check` ne regardent une couleur. Le template lit désormais ces tokens. ⛔ ET LES BLOCS DE THÈME S'ACCROCHENT À `data-md-color-scheme`, JAMAIS À `data-md-color-primary`. Deux raisons, la seconde étant silencieuse : 1. les `primary:` du yml valent maintenant `custom` : toute règle accrochée à `light-green` / `green` cesserait d'agir d'un coup ; 2. `overrides/main.html` recopie le choix de palette dans la clé partagée `__palette_shared`, y compris `data-md-color-primary`. Un visiteur DÉJÀ VENU rejoue donc `primary: light-green` depuis son localStorage, quoi que dise le yml — une règle accrochée à `custom` ne s'appliquerait pas chez lui, sans le moindre signal. `scheme` (`default` / `slate`) est le seul attribut dont la valeur ne change pas. ⓘ Contrôle rejouable des contrastes : `python tools/theme_contrast.py`. Raisonnement complet, ratios mesurés et pièges : `reprise-travaux/plan-charte-graphique.md`. ============================================================================= */ /* ============================================================================= §1 — TOKENS DE MARQUE ========================================================================== */ :root { /* ── Primaires (charte §4.1) ─────────────────────────────────────────────── */ --ce-forest: #0A322A; /* Forest — la couleur de marque */ --ce-gold: #FEDD49; /* Gold */ --ce-cream: #FFFCD1; /* Cream */ /* ── Secondaires (charte §4.2) ───────────────────────────────────────────── */ --ce-sky: #8DE0FA; /* Blue Sky */ --ce-oak: #5A2C01; /* Oak */ --ce-linen: #F0E7E0; /* Linen */ /* ── Neutres, Darkest → Lightest (charte §4.3) ───────────────────────────── */ --ce-n0: #0E0D0A; /* Darkest */ --ce-n1: #2F2F2C; /* Darker */ --ce-n2: #7E8181; /* Dark */ --ce-n3: #BFC4C4; /* Light */ --ce-n4: #E6E9E9; /* Lighter */ --ce-n5: #F6F8F8; /* Lightest */ /* ── Rampe verte DÉRIVÉE ───────────────────────────────────────────────────── ⚠ Ces quatre valeurs ne sont PAS dans la charte : son §4.1 nomme un vert « canopy » (foncé) et un vert « pine » (clair) mais ne donne de hex que pour Forest. Elles sont dérivées de Forest à teinte constante, et servent là où Forest ne peut pas aller : un lien en Forest serait indiscernable du texte, et Gold sur fond clair vaut 1,34:1 — donc jamais du texte. Toute retouche se revalide par `python tools/theme_contrast.py`. */ --ce-canopy: #04231D; /* plus foncé que Forest : nuance basse du primaire */ --ce-pine-700: #0C4638; --ce-pine-600: #0F5C4A; /* liens en thème clair — 7,4:1 sur blanc */ --ce-pine-500: #127A62; /* survol / accent en thème clair — 4,9:1 */ --ce-gold-200: #FFF0A0; /* survol en thème sombre */ /* Surface « soulevée » du thème sombre : ce qui détache une bande ou un bloc sur un fond presque noir est une valeur PLUS HAUTE, pas plus basse. Sert au fond des blocs de code et à celui du pied de page. */ --ce-n0-lift: #171714; --ce-white: #ffffff; /* ── Admonitions — palette « B », retenue par Lucas le 25 août 2026 ────────── Les douze types gardent chacun leur teinte, comme chez Material, mais RECALÉES : ⛔ sept des douze teintes d'origine étaient sous le seuil de 3:1 sur fond clair — celui des éléments graphiques, la couleur peignant un filet, une icône et un fond de titre, jamais du texte. Et elles couvraient 12 044 des 16 624 admonitions du corpus, `info` (2,38:1) et `warning` (2,26:1) en tête. Ici la moins bien dotée vaut 5,54:1, dans les deux thèmes. ⓘ `important` est un ALIAS que Material ne style pas : sans ces deux lignes il retomberait sur le repli générique, c'est-à-dire l'aspect de `note`. Suffixes : `-l` = thème clair, `-d` = thème sombre. */ --ce-adm-note-l: #2A63AD; --ce-adm-note-d: #8FB8F0; --ce-adm-abstract-l: #0E6F8E; --ce-adm-abstract-d: #8DE0FA; --ce-adm-info-l: #0F6675; --ce-adm-info-d: #79D8E8; --ce-adm-tip-l: #0F5C4A; --ce-adm-tip-d: #5FD3B4; --ce-adm-important-l: #0F5C4A; --ce-adm-important-d: #5FD3B4; --ce-adm-success-l: #1C6E2E; --ce-adm-success-d: #71D98A; --ce-adm-question-l: #4C6E12; --ce-adm-question-d: #B6D96A; --ce-adm-warning-l: #8A6100; --ce-adm-warning-d: #FEDD49; --ce-adm-failure-l: #A34A42; --ce-adm-failure-d: #FFB3AC; --ce-adm-danger-l: #A32218; --ce-adm-danger-d: #FF9E93; --ce-adm-bug-l: #8C1152; --ce-adm-bug-d: #FF9EC4; --ce-adm-example-l: #553BA0; --ce-adm-example-d: #BEA8FF; --ce-adm-quote-l: #5C6160; --ce-adm-quote-d: #BFC4C4; /* ── Divers ──────────────────────────────────────────────────────────────── */ --ce-shadow: rgba(0, 0, 0, 0.3); /* ombre des logos d'intégration */ /* ⚠ La charte ne définit AUCUNE couleur d'erreur. Ces deux valeurs sont reprises telles quelles de l'état antérieur (rouge Material A400) : elles signalent une saisie invalide dans un bloc de code interactif, hors charte mais fonctionnelles. Les changer demanderait un arbitrage. */ --ce-invalid: #ff1744; --ce-invalid-bg: #ff17441a; } /* ============================================================================= §2 — POLICES AUTO-HÉBERGÉES ET TYPOGRAPHIE Titres : Funnel Display (charte §3.2) — H1/H2 Light, H3 Regular, tracking −2 % Corps : DM Sans (charte §3.3) Code : DM Mono (charte §3.3) ⭐ AUTO-HÉBERGÉES, pas depuis fonts.googleapis.com : `docs.cyberelements.io` est consulté depuis des postes dont l'accès Internet n'est pas garanti — même raisonnement que pour la police des drapeaux (§7), écrit dans `overrides/fonts/ATTRIBUTION.md`. `theme.font: false` dans `shared/mkdocs-base.yml` supprime l'appel au CDN que Material fait par défaut (Roboto). Les deux sous-ensembles `latin` ET `latin-ext` sont indispensables : c'est `latin-ext` qui porte le polonais, le roumain et les langues scandinaves des 13 locales publiées. Origine, URL épinglées, tailles et licences (OFL 1.1) : `overrides/fonts/ATTRIBUTION.md` + `overrides/fonts/OFL-*.txt`, servis à côté des .woff2. ========================================================================== */ /*! Funnel Display — © 2024 The Funnel Project Authors — SIL Open Font License 1.1 DM Sans — © 2014 The DM Sans Project Authors — SIL Open Font License 1.1 DM Mono — © 2020 The DM Mono Project Authors — SIL Open Font License 1.1 Licences complètes : ./fonts/OFL-funneldisplay.txt, OFL-dmsans.txt, OFL-dmmono.txt */ /* ── Funnel Display (variable 300→800) ─────────────────────────────────────── */ @font-face { font-family: "Funnel Display"; font-style: normal; font-weight: 300 800; font-display: swap; src: url("../fonts/FunnelDisplay-var.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: "Funnel Display"; font-style: normal; font-weight: 300 800; font-display: swap; src: url("../fonts/FunnelDisplay-var.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; } /* ── DM Sans (variable 300→700, romain et italique) ────────────────────────── */ @font-face { font-family: "DM Sans"; font-style: normal; font-weight: 300 700; font-display: swap; src: url("../fonts/DMSans-var.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: "DM Sans"; font-style: normal; font-weight: 300 700; font-display: swap; src: url("../fonts/DMSans-var.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; } @font-face { font-family: "DM Sans"; font-style: italic; font-weight: 300 700; font-display: swap; src: url("../fonts/DMSans-var-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: "DM Sans"; font-style: italic; font-weight: 300 700; font-display: swap; src: url("../fonts/DMSans-var-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; } /* ── DM Mono (400 et 500 ; le 500 sert de gras aux mots-clés Pygments) ─────── */ @font-face { font-family: "DM Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/DMMono-400.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: "DM Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/DMMono-400.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; } @font-face { font-family: "DM Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/DMMono-500.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: "DM Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/DMMono-500.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; } /* ⛔ ON DÉFINIT `--md-text-font`, PAS `--md-text-font-family`. Material écrit `--md-text-font-family: var(--md-text-font, _), -apple-system, …` sur `:root`, puis l'applique par `aside,body,input{font-family:var(--md-text-font-family)}`. La substitution `var()` étant paresseuse, définir la variable INTERNE sur `:root` fonctionne ; redéfinir `--md-text-font-family` plus bas dans l'arbre serait un NO-OP MUET, `font-family` étant héritée avec la valeur calculée chez `body` (cf. §7, où le défaut a déjà été rencontré). ⭐ Bénéfice de bord : la règle des drapeaux du §7, qui compose `var(--md-text-font, _)`, hérite de DM Sans sans être touchée. */ :root { --md-text-font: "DM Sans"; --md-code-font: "DM Mono"; } /* Titres en Funnel Display — H1/H2 Light + tracking −2 %, H3 Regular (charte §3.4). ⚠ Le CORPS reste en DM Sans 400 alors que la charte spécifie Light : Light à 16 px sur des pages de référence de 900 lignes n'est pas lisible. Écart assumé, consigné dans `reprise-travaux/plan-charte-graphique.md`. */ .md-typeset h1, .md-typeset h2, .md-typeset h3, .md-typeset h4, .md-typeset h5, .md-typeset h6, .md-header__topic > .md-ellipsis, .md-nav__title { font-family: "Funnel Display", var(--md-text-font-family); } .md-typeset h1, .md-typeset h2 { font-weight: 300; letter-spacing: -0.02em; } .md-typeset h3 { font-weight: 400; letter-spacing: -0.01em; } /* ============================================================================= §3 — THÈME CLAIR En-tête Forest, page blanche, texte Darkest, liens vert pin. ========================================================================== */ [data-md-color-scheme="default"] { /* Primaire = en-tête, barre d'onglets, boutons, élément de nav actif */ --md-primary-fg-color: var(--ce-forest); --md-primary-fg-color--light: var(--ce-pine-700); --md-primary-fg-color--dark: var(--ce-canopy); /* ⛔ SUR UN FOND VERT, LE TEXTE EST OR — charte §4.4 « Colour Usage », qui n'appaire Forest qu'avec Gold, Cream et Blue Sky. Le blanc n'y figure PAS. C'est cette variable qui porte tout ce qui se pose sur l'en-tête : titre du site, icônes, champ de recherche, libellés d'onglet — et le texte du bouton primaire, dont le fond est Forest. Mesuré : Gold sur Forest = 10,42:1. (Écart signalé par Lucas le 25 août 2026 : j'avais mis du blanc, 13,98:1 — conforme en contraste, mais hors charte.) */ --md-primary-bg-color: var(--ce-gold); --md-primary-bg-color--light: rgba(254, 221, 73, 0.72); /* Accent = survol, focus. Liens : jamais Forest (indiscernable du texte), jamais Gold (1,34:1 sur blanc) → vert pin dérivé, 7,4:1. */ --md-accent-fg-color: var(--ce-pine-500); --md-accent-fg-color--transparent: rgba(18, 122, 98, 0.1); --md-typeset-a-color: var(--ce-pine-600); /* ⚠ `--md-accent-bg-color` n'est PAS décoratif : c'est la couleur du TEXTE quand l'accent devient un fond — bouton et étiquette au survol, bouton « haut de page », numéros des diagrammes de séquence. Material ne la définit que sur `:root` (#fff), et `accent: custom` ne produit aucune règle : sans redéfinition ici, un thème dont l'accent est clair afficherait du blanc sur du clair. */ /* ⚠ L'accent du thème clair est un VERT (pine-500) qui devient un FOND au survol : le texte posé dessus suit donc la règle du §4.4. Mais Gold n'y vaut que 3,93:1 — c'est CREAM, l'autre paire de la charte, qui tient (5,04:1). La charte donne trois compagnons à un vert ; c'est la mesure qui choisit. */ --md-accent-bg-color: var(--ce-cream); --md-accent-bg-color--light: rgba(255, 252, 209, 0.72); /* Texte et fonds */ --md-default-fg-color: rgba(14, 13, 10, 0.92); --md-default-fg-color--light: rgba(14, 13, 10, 0.68); /* ⓘ 0,45 et non l'alpha 0,32 de Material : `--lighter` porte des icones et des bordures, et `tools/theme_contrast.py` l'a mesure a 2,13:1 chez Material, 2,52:1 a 0,38 — sous le seuil WCAG de 3:1 pour un element graphique. C'est le filet qui l'a trouve a sa premiere execution, aucun autre ne le voyait. */ --md-default-fg-color--lighter: rgba(14, 13, 10, 0.45); --md-default-fg-color--lightest: rgba(14, 13, 10, 0.09); --md-default-bg-color: var(--ce-white); --md-default-bg-color--light: rgba(255, 255, 255, 0.7); --md-default-bg-color--lighter: rgba(255, 255, 255, 0.3); --md-default-bg-color--lightest: rgba(255, 255, 255, 0.12); /* Code : surface Lightest de la charte */ --md-code-bg-color: var(--ce-n5); --md-code-fg-color: rgba(14, 13, 10, 0.88); /* Pied de page — il SUIT LE THÈME (décision Lucas, 25 août 2026). ⛔ La couleur visible est `--md-footer-bg-color--dark`, PAS `--md-footer-bg-color` : Material peint `.md-footer-meta` avec la première et `.md-footer` avec la seconde, or `overrides/main.html` a mis la navigation précédent/suivant en commentaire — seule la bande « meta » est rendue. Définir la mauvaise des deux ne se voit pas. */ --md-footer-bg-color: var(--ce-n5); --md-footer-bg-color--dark: var(--ce-n5); --md-footer-fg-color: rgba(14, 13, 10, 0.86); --md-footer-fg-color--light: rgba(14, 13, 10, 0.66); --md-footer-fg-color--lighter: rgba(14, 13, 10, 0.46); /* Le filet qui détache le pied de page : sur fond clair, c'est la marque. */ --ce-footer-rule: 2px solid var(--ce-forest); /* ⛔ LE BOUTON A SES PROPRES JETONS, ET C'EST NÉCESSAIRE. Material peint `.md-button` avec `--md-primary-fg-color` — la MÊME variable que l'en-tête. Or l'en-tête est Forest dans les deux thèmes : en sombre, le bouton se retrouvait donc en Forest sur une page presque noire, soit **1,30:1**, illisible (signalé par Lucas le 25 août 2026 sur `/bastion/fr/API/APIGuide/`). ➡ Deux jetons de rôle, définis par thème et mesurés par `theme_contrast.py` : le bouton cesse de dépendre de la couleur de l'en-tête. */ --ce-button-fg: var(--ce-forest); --ce-button-bg: var(--ce-gold); /* Admonitions (palette B) — les teintes vivent au §1 */ --ce-adm-note: var(--ce-adm-note-l); --ce-adm-abstract: var(--ce-adm-abstract-l); --ce-adm-info: var(--ce-adm-info-l); --ce-adm-tip: var(--ce-adm-tip-l); --ce-adm-important: var(--ce-adm-important-l); --ce-adm-success: var(--ce-adm-success-l); --ce-adm-question: var(--ce-adm-question-l); --ce-adm-warning: var(--ce-adm-warning-l); --ce-adm-failure: var(--ce-adm-failure-l); --ce-adm-danger: var(--ce-adm-danger-l); --ce-adm-bug: var(--ce-adm-bug-l); --ce-adm-example: var(--ce-adm-example-l); --ce-adm-quote: var(--ce-adm-quote-l); /* ── Mermaid ──────────────────────────────────────────────────────────────── ⛔ LES 26 VARIABLES SE DÉCLARENT TOUTES : LES DÉRIVATIONS DE MATERIAL NE CONVIENNENT PAS À CETTE PALETTE. Material n'en attend que 5 et calcule les 21 autres — mais ses dérivations supposent un `edge-color` NEUTRE (chez lui, `var(--md-code-fg-color)`), alors que le nôtre est un vert de marque. Résultat mesuré le 4 septembre 2026 : le texte des messages, celui des boucles et celui des notes retombaient tous sur `edge-color`, et **tout le diagramme sortait monochrome vert**, quand le reste de la page écrit son texte en neutre. ➡ On sépare donc ce que Material confond : le vert reste aux TRAITS (arêtes, flèches, bordures), le texte prend la couleur du TEXTE. ⚠ `label-bg-color` vaut `--md-code-bg-color` et non le fond de page : c'est le fond des étiquettes d'arête, or elles se posent sur le conteneur du plugin panzoom, qui se peint lui-même en `--md-code-bg-color`. */ --md-mermaid-node-bg-color: rgba(15, 92, 74, 0.08); --md-mermaid-node-fg-color: var(--ce-pine-600); --md-mermaid-edge-color: var(--ce-pine-600); --md-mermaid-label-bg-color: var(--md-code-bg-color); --md-mermaid-label-fg-color: rgba(14, 13, 10, 0.92); /* Acteurs : une SURFACE, comme un bloc de code — pas le fond de la page, sinon la boîte n'existe que par son filet. */ --md-mermaid-sequence-actor-bg-color: var(--ce-n5); --md-mermaid-sequence-actor-border-color: var(--ce-pine-600); --md-mermaid-sequence-actor-fg-color: rgba(14, 13, 10, 0.92); --md-mermaid-sequence-actor-line-color: rgba(14, 13, 10, 0.45); --md-mermaid-sequence-actorman-bg-color: var(--ce-n5); --md-mermaid-sequence-actorman-line-color: var(--ce-pine-600); --md-mermaid-sequence-box-bg-color: rgba(15, 92, 74, 0.08); --md-mermaid-sequence-box-fg-color: rgba(14, 13, 10, 0.92); /* Étiquette « loop » / « alt » / « break » : un fond PLEIN, et le texte que la charte § 4.4 associe au vert. */ --md-mermaid-sequence-label-bg-color: var(--ce-pine-600); --md-mermaid-sequence-label-fg-color: var(--ce-cream); --md-mermaid-sequence-loop-bg-color: rgba(15, 92, 74, 0.04); --md-mermaid-sequence-loop-border-color: var(--ce-pine-600); --md-mermaid-sequence-loop-fg-color: rgba(14, 13, 10, 0.92); --md-mermaid-sequence-message-fg-color: rgba(14, 13, 10, 0.92); --md-mermaid-sequence-message-line-color: var(--ce-pine-600); /* Une note EST une remarque : elle prend l'appairage Cream ↔ Forest de la charte — la même grammaire visuelle que les admonitions de la page. ⛔ SON FILET N'EST PAS EN OR, et il ne l'est dans AUCUN des deux thèmes — pour deux raisons différentes, ce qui vaut d'être noté : • en CLAIR, l'or est illisible sur Cream : **1,28:1**, donc un filet invisible. C'est `tools/theme_contrast.py` qui l'a trouvé — un filet de 1 px ne se voit pas manquer sur une capture. Application directe de l'invariant déjà acquis : « c'est le FOND qui décide de l'emploi d'une couleur de marque, pas la marque ». • en SOMBRE, l'or est parfaitement lisible sur Forest (10,4:1) — mais l'accent des diagrammes y EST devenu l'or (§ 4), donc un filet d'or rendrait une note indiscernable d'un acteur ou d'un nœud. Il y vaut Cream. ⭐ Deux causes, un même geste : **changer une couleur d'accent oblige à relire ce qui s'en distinguait**, et aucun filet ne peut le voir — les deux valeurs sont conformes, c'est leur RELATION qui cessait de l'être. */ --md-mermaid-sequence-note-bg-color: var(--ce-cream); --md-mermaid-sequence-note-border-color: var(--ce-forest); --md-mermaid-sequence-note-fg-color: var(--ce-forest); --md-mermaid-sequence-number-bg-color: var(--ce-pine-600); --md-mermaid-sequence-number-fg-color: var(--ce-cream); /* ⛔ CES DEUX-CI NE SONT PAS DES VARIABLES DE MATERIAL — elles n'existent que pour `overrides/javascripts/mermaid-theme.js`, parce que Material n'écrit AUCUNE règle pour les barres d'activation (`->>+` / `->>-`) : mermaid les peint donc en `#f4f4f4` bordé `#666`, ce qui donne des barres BLANCHES en thème sombre. */ --ce-mermaid-activation-bg: rgba(15, 92, 74, 0.16); --ce-mermaid-activation-fg: var(--ce-pine-600); } /* ============================================================================= §4 — THÈME SOMBRE En-tête Forest, page Darkest, texte Lighter, liens Gold (14,5:1). ========================================================================== */ [data-md-color-scheme="slate"] { --md-primary-fg-color: var(--ce-forest); --md-primary-fg-color--light: var(--ce-pine-700); --md-primary-fg-color--dark: var(--ce-canopy); /* Même règle qu'en clair : l'en-tête reste Forest dans les deux thèmes, donc son texte reste Or. */ --md-primary-bg-color: var(--ce-gold); --md-primary-bg-color--light: rgba(254, 221, 73, 0.72); --md-accent-fg-color: var(--ce-gold-200); --md-accent-fg-color--transparent: rgba(254, 221, 73, 0.1); --md-typeset-a-color: var(--ce-gold); /* L'accent du thème sombre est CLAIR : le texte posé dessus doit donc être Forest, et non le blanc de Material — sinon le libellé d'un bouton survolé vaut 1,2:1. */ --md-accent-bg-color: var(--ce-forest); --md-accent-bg-color--light: rgba(10, 50, 42, 0.7); --md-default-fg-color: rgba(230, 233, 233, 0.95); --md-default-fg-color--light: rgba(230, 233, 233, 0.72); --md-default-fg-color--lighter: rgba(230, 233, 233, 0.42); --md-default-fg-color--lightest: rgba(230, 233, 233, 0.14); --md-default-bg-color: var(--ce-n0); --md-default-bg-color--light: rgba(14, 13, 10, 0.54); --md-default-bg-color--lighter: rgba(14, 13, 10, 0.26); --md-default-bg-color--lightest: rgba(14, 13, 10, 0.07); /* Code : une surface intermédiaire entre Darkest et Darker, pour que le bloc se détache de la page sans virer au gris clair. */ --md-code-bg-color: var(--ce-n0-lift); --md-code-fg-color: var(--ce-n4); /* Pied de page — il suit le thème, cf. le commentaire du bloc clair. Le fond est LÉGÈREMENT au-dessus de celui de la page, comme les blocs de code : sur un fond presque noir, ce qui détache une bande, c'est une valeur plus haute, pas plus basse. */ --md-footer-bg-color: var(--ce-n0-lift); --md-footer-bg-color--dark: var(--ce-n0-lift); --md-footer-fg-color: rgba(230, 233, 233, 0.86); --md-footer-fg-color--light: rgba(230, 233, 233, 0.64); --md-footer-fg-color--lighter: rgba(230, 233, 233, 0.44); /* Et le filet est CLAIR, pour la même raison — Forest y serait invisible. */ --ce-footer-rule: 1px solid var(--ce-n1); /* En sombre, le bouton prend l'or : Gold sur Darkest vaut 14,49:1, et c'est déjà la couleur des liens — un bouton or reste cohérent avec le reste. */ --ce-button-fg: var(--ce-gold); --ce-button-bg: var(--ce-forest); /* Admonitions (palette B) */ --ce-adm-note: var(--ce-adm-note-d); --ce-adm-abstract: var(--ce-adm-abstract-d); --ce-adm-info: var(--ce-adm-info-d); --ce-adm-tip: var(--ce-adm-tip-d); --ce-adm-important: var(--ce-adm-important-d); --ce-adm-success: var(--ce-adm-success-d); --ce-adm-question: var(--ce-adm-question-d); --ce-adm-warning: var(--ce-adm-warning-d); --ce-adm-failure: var(--ce-adm-failure-d); --ce-adm-danger: var(--ce-adm-danger-d); --ce-adm-bug: var(--ce-adm-bug-d); --ce-adm-example: var(--ce-adm-example-d); --ce-adm-quote: var(--ce-adm-quote-d); /* ── Mermaid ── mêmes variables qu'au thème clair, cf. son commentaire. ⭐ L'ACCENT EST L'OR, COMME PARTOUT AILLEURS DANS CE THÈME (décision Lucas, 4 septembre 2026). Le premier jet employait un vert menthe dérivé (`--ce-mint-300`, #5FD3B4) : conforme au seuil (10,6:1) mais **néon**, et surtout étranger au thème — en sombre, ce site accentue à l'or (liens, texte de l'en-tête, logo, bouton primaire). Un diagramme n'a aucune raison d'introduire une couleur d'accent de plus. ➡ Le jeton `--ce-mint-300` a été **retiré** avec ce changement : il n'avait plus aucun lecteur. ⚠ Et le vert ne disparaît pas du site : le thème CLAIR garde `pine-600`, puisque l'or n'y tient pas (1,34:1 sur blanc). Même couleur de marque, deux emplois opposés — c'est le fond qui décide. */ --md-mermaid-node-bg-color: rgba(254, 221, 73, 0.12); --md-mermaid-node-fg-color: var(--ce-gold); --md-mermaid-edge-color: var(--ce-gold); --md-mermaid-label-bg-color: var(--md-code-bg-color); --md-mermaid-label-fg-color: rgba(230, 233, 233, 0.95); --md-mermaid-sequence-actor-bg-color: var(--ce-n1); --md-mermaid-sequence-actor-border-color: var(--ce-gold); --md-mermaid-sequence-actor-fg-color: rgba(230, 233, 233, 0.95); --md-mermaid-sequence-actor-line-color: rgba(230, 233, 233, 0.42); --md-mermaid-sequence-actorman-bg-color: var(--ce-n1); --md-mermaid-sequence-actorman-line-color: var(--ce-gold); --md-mermaid-sequence-box-bg-color: rgba(254, 221, 73, 0.12); --md-mermaid-sequence-box-fg-color: rgba(230, 233, 233, 0.95); --md-mermaid-sequence-label-bg-color: var(--ce-gold); --md-mermaid-sequence-label-fg-color: var(--ce-forest); --md-mermaid-sequence-loop-bg-color: rgba(254, 221, 73, 0.06); --md-mermaid-sequence-loop-border-color: var(--ce-gold); --md-mermaid-sequence-loop-fg-color: rgba(230, 233, 233, 0.95); --md-mermaid-sequence-message-fg-color: rgba(230, 233, 233, 0.95); --md-mermaid-sequence-message-line-color: var(--ce-gold); /* Appairage inverse du thème clair, et lui aussi dans la charte : Forest ↔ Cream. ⚠ Son filet est en CREAM et non en or : l'accent du diagramme étant devenu l'or, un filet d'or rendrait une note indiscernable d'un acteur ou d'un nœud. Cream sur Forest vaut 13,4:1 et reste un appairage du § 4.4. */ --md-mermaid-sequence-note-bg-color: var(--ce-forest); --md-mermaid-sequence-note-border-color: var(--ce-cream); --md-mermaid-sequence-note-fg-color: var(--ce-cream); --md-mermaid-sequence-number-bg-color: var(--ce-gold); --md-mermaid-sequence-number-fg-color: var(--ce-forest); --ce-mermaid-activation-bg: rgba(254, 221, 73, 0.22); --ce-mermaid-activation-fg: var(--ce-gold); } /* ── Boutons ───────────────────────────────────────────────────────────────── ⭐ ON REDÉFINIT DEUX VARIABLES, PAS QUATRE PROPRIÉTÉS — et c'est ce qui rend le survol intact. Material peint le bouton avec `--md-primary-fg-color` (texte et filet du bouton simple, fond du bouton primaire) et `--md-primary-bg-color` (texte du primaire) ; son état survolé, lui, lit `--md-accent-*`. En reposant les deux VARIABLES sur le bouton, on ne touche à AUCUNE des règles d'état : `:hover` continue de s'appliquer tel que le thème l'a écrit. ⛔ C'est la leçon de la première tentative : deux règles `.md-button--primary` à (0,3,0), chargées après le thème, l'emportaient aussi sur son `:hover` — le bouton restait figé au survol, et il a fallu redéclarer l'état pour le rendre. La voie par variable n'a pas ce défaut, et elle remplace les deux règles. ⚠ Aucun filet ne voit un survol : `node tools/rendu_check.js --hover ".md-button--primary"` est le seul contrôle, et il faut y attendre la fin de la transition (125 ms chez Material) sous peine de mesurer une valeur de passage. */ .md-typeset .md-button { --md-primary-fg-color: var(--ce-button-fg); --md-primary-bg-color: var(--ce-button-bg); } /* Titres de section de la barre latérale : c'est le repère de structure, il doit se distinguer des entrées. (Remplace deux règles qui écrivaient l'orange et le bleu en dur.) */ .md-nav__item--section > .md-nav__link[for] { color: var(--md-typeset-a-color); font-weight: 600; } /* ============================================================================= §5 — ADMONITIONS Les teintes sont au §1 (palette « B ») et leur affectation par thème aux §3/§4 ; ce bloc ne fait que les APPLIQUER. ⛔ POURQUOI CE DÉTOUR PAR UNE VARIABLE, ET PAS 65 RÈGLES. Material peint CINQ propriétés par type — filet, ombre de focus, fond du titre, icône, chevron des `details` — à (0,3,0) et (0,4,0) : .md-typeset .admonition.note → border-color .md-typeset .admonition.note:focus-within → box-shadow .md-typeset .note > .admonition-title → background-color .md-typeset .note > .admonition-title::before → l'icône .md-typeset .note > .admonition-title::after → le chevron Les surcharger type par type coûterait 13 × 5 règles. On sépare donc la VALEUR de son APPLICATION : chaque type pose sa teinte dans `--ce-adm` (aucun conflit, Material n'écrit jamais cette variable, donc la spécificité n'y joue aucun rôle), et cinq règles génériques la consomment. `[class]` leur donne le cran de spécificité qui manque — (0,4,0) contre (0,3,0) — sans énumérer les types et sans un seul `!important`. ⚠ `:is(.admonition, details)` compte pour (0,1,0) : la spécificité d'un `:is()` est celle de son argument LE PLUS FORT, ici la classe. ⓘ `important` est le seul ALIAS employé par le corpus (78 fois). Material ne style que ses 12 noms canoniques : un type inconnu retombe sur un repli GÉNÉRIQUE qui est celui de `note` — filet bleu, titre teinté, et l'icône de note. C'est pourquoi il a sa teinte au §1. ⚠ Il garde en revanche l'ICÔNE de `note` : la couleur dira « conseil » quand l'icône dira encore « note ». À trancher à part — mapper l'icône, ou écrire `!!! tip` dans les sources, ce qui touche le contenu des 13 langues. ========================================================================== */ /* Chaque type porte sa teinte. */ .md-typeset .note { --ce-adm: var(--ce-adm-note); } .md-typeset .abstract { --ce-adm: var(--ce-adm-abstract); } .md-typeset .info { --ce-adm: var(--ce-adm-info); } .md-typeset .tip { --ce-adm: var(--ce-adm-tip); } .md-typeset .important { --ce-adm: var(--ce-adm-important); } .md-typeset .success { --ce-adm: var(--ce-adm-success); } .md-typeset .question { --ce-adm: var(--ce-adm-question); } .md-typeset .warning { --ce-adm: var(--ce-adm-warning); } .md-typeset .failure { --ce-adm: var(--ce-adm-failure); } .md-typeset .danger { --ce-adm: var(--ce-adm-danger); } .md-typeset .bug { --ce-adm: var(--ce-adm-bug); } .md-typeset .example { --ce-adm: var(--ce-adm-example); } .md-typeset .quote { --ce-adm: var(--ce-adm-quote); } /* Les cinq propriétés que Material peint par type. Le repli garde un rendu correct si un type inattendu apparaissait — le corpus n'en a aucun aujourd'hui : 0 admonition sans type, et tous les `details` portent une classe. */ .md-typeset :is(.admonition, details)[class] { border-color: var(--ce-adm, var(--md-default-fg-color--lighter)); } .md-typeset :is(.admonition, details)[class]:focus-within { box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--ce-adm, transparent) 10%, transparent); } .md-typeset :is(.admonition, details)[class] > :is(.admonition-title, summary) { background-color: color-mix(in srgb, var(--ce-adm, transparent) 10%, transparent); } .md-typeset :is(.admonition, details)[class] > :is(.admonition-title, summary)::before { background-color: var(--ce-adm, var(--md-default-fg-color--lighter)); } .md-typeset :is(.admonition, details)[class] > :is(.admonition-title, summary)::after { color: var(--ce-adm, var(--md-default-fg-color--lighter)); } /* ============================================================================= §6 — COMPOSANTS ET CORRECTIFS Blocs historiques, conservés ; leurs couleurs pointent désormais sur le §1. ========================================================================== */ /* ⚠ Centrage par défaut de TOUTES les images : 832 pages s'en défont par `alt="type:inline"` (overrides/javascripts/extra.js) et les classes du bloc « logos d'intégration » plus bas. Inverser ce défaut est un autre lot. */ img { display: block; margin-left: auto; margin-right: auto; } code { word-break: keep-all !important; } .md-grid { max-width: 98%; } /* Correction d'affichage du code dans des tableaux */ .md-typeset__table .code { padding: 0px !important; } /* Centrage des diagrammes mermaid */ div .mermaid { text-align: center; } /* ── Pied de page : plus bas, et détaché par un filet ──────────────────────── Décisions de Lucas du 25 août 2026 : le pied de page suit le thème (cf. les variables des §3/§4), il perd la mention de version, et il est moins haut. ⓘ Ce qui faisait sa hauteur n'était PAS son remplissage — `.md-footer-meta__inner` vaut déjà `.2rem` chez Material — mais les icônes sociales : `.md-social` porte `padding: .6rem 0` et `.md-social__link` mesure `1.6rem`, soit 2,8rem à elles seules. C'est donc là qu'il faut agir, pas sur le conteneur. */ .md-footer-meta { border-top: var(--ce-footer-rule); } .md-footer-meta__inner { align-items: center; padding: 0.1rem 0.2rem; } .md-footer-copyright { font-size: 0.68rem; line-height: 1.5; } .md-social { margin: 0 0.4rem; padding: 0.15rem 0; } /* ⛔ ET L'ICÔNE SOCIALE N'ÉTAIT PAS CENTRÉE VERTICALEMENT — mesuré 4,4 px trop bas (signalé par Lucas le 25 août 2026). La cause est un héritage de l'époque des polices d'icônes : Material positionne le SVG dans une ligne de texte, par `vertical-align: -25%` sur un `line-height` de 25,6 px, soit −6,4 px. Le calage dépend donc de la hauteur de ligne — et il se décale dès qu'on touche à la taille du lien, ce que la réduction du pied de page a fait. ➡ On centre EXPLICITEMENT : le lien devient un conteneur flex, le SVG un item, `vertical-align` cesse de s'appliquer et `align-items` fait le travail. La hauteur du lien reste `1.2rem`, donc celle du pied de page ne bouge pas. ⓘ `display: inline-flex` sera « blockifié » en `flex` par le parent `.md-social`, lui-même en `inline-flex` : c'est sans effet ici, seul compte le fait que le lien soit un conteneur flex. */ .md-social__link { align-items: center; display: inline-flex; height: 1.2rem; justify-content: center; width: 1.2rem; } /* ── Logos et captures d'écran ─────────────────────────────────────────────── Extrait le 25 août 2026 de 598 attributs `style=` recopiés dans 117 fichiers (3 familles × 3 sites × 13 langues). Le fond des logos sur pastille sombre valait #1e1e2d, hors charte → Forest. ⚠ Ces classes doivent battre le `img { display: block }` ci-dessus : le préfixe `.md-typeset` porte la spécificité à (0,2,0) et met à l'abri d'une règle `.md-typeset img` de Material (0,1,1). */ .md-typeset .integration-logo { display: inline; height: 40px; border-radius: 10px; box-shadow: 4px 4px 10px var(--ce-shadow); margin-bottom: -10px; margin-right: 10px; } .md-typeset .integration-logo--dark { padding: 3px; background-color: var(--ce-forest); } .md-typeset .screenshot-tall { display: inline; height: 35em; } .md-typeset .screenshot-cap { max-height: 25em; } /* ── Plugin panzoom : colorimétrie, curseur, message d'aide ───────────────── */ .panzoom-icon { fill: var(--md-typeset-a-color) !important; fill-opacity: 0.5; } button:hover .panzoom-icon { fill: var(--md-default-fg-color--light) !important; fill-opacity: 1; cursor: pointer; } :hover > * > * > .panzoom-icon { fill: var(--md-typeset-a-color) !important; fill-opacity: 1; } /* `.ctrl-pressed` est posée sur par javascripts/change-css-when-key-is-pressed.js */ .ctrl-pressed .panzoom-box:hover { cursor: all-scroll; } .ctrl-pressed .panzoom-box:active { cursor: grabbing; } .panzoom-info-box-bottom { background-color: transparent !important; padding: 0 0 0.5em 0; } /* ── Blocs de code interactifs (javascripts/interractiveCodeBlocks.js) ────── */ .inputCodeBlock { font-family: var(--md-text-font-family); color: var(--md-typeset-a-color); background-color: var(--md-code-bg-color); } .inputCodeBlock::placeholder { color: var(--md-typeset-a-color); opacity: 0.6; } .inputCodeBlock.invalidInputCodeBlock { background-color: var(--ce-invalid-bg); color: var(--ce-invalid); } /* ── Volets d'onglets (pymdownx.blocks.tab) ──────────────────────────────── */ .tabbed-set { padding: 0.5em; border-radius: 0.2em !important; border: 1px solid var(--md-default-fg-color--lightest); } [data-md-color-scheme="default"] .tabbed-set { background-color: color-mix(in srgb, var(--ce-pine-600) 5%, transparent); } [data-md-color-scheme="slate"] .tabbed-set { background-color: color-mix(in srgb, var(--ce-gold) 5%, transparent); } /* ── Tuiles d'accueil entièrement cliquables ──────────────────────────────── Chaque grid card dont le titre est un lien (`- **[Titre](url)**`) devient cliquable sur toute sa surface : le lien du titre est « étiré » via un overlay `::after`. Le curseur passe en main et le titre se souligne au survol. Les liens secondaires éventuels (tuiles à plusieurs destinations) restent cliquables au-dessus de l'overlay. ⚠ CONTRAT DE FORME : un titre de tuile écrit autrement que `- **[Titre](url)**` perd la cliquabilité pleine surface, sans aucun signal. */ /* Tuile dont le titre est un lien → contexte de positionnement + curseur main */ .md-typeset .grid.cards > ul > li:has(> p:first-child > strong > a), .md-typeset .grid.cards > ol > li:has(> p:first-child > strong > a) { position: relative; cursor: pointer; } /* Lien du titre : couleur des liens (--md-typeset-a-color), pas de soulignement */ .md-typeset .grid.cards > ul > li > p:first-child > strong > a, .md-typeset .grid.cards > ol > li > p:first-child > strong > a { color: var(--md-typeset-a-color); text-decoration: none; } /* Overlay transparent couvrant toute la tuile → clic n'importe où */ .md-typeset .grid.cards > ul > li > p:first-child > strong > a::after, .md-typeset .grid.cards > ol > li > p:first-child > strong > a::after { content: ""; position: absolute; inset: 0; z-index: 1; } /* Survol / focus clavier de la tuile → soulignement du titre */ .md-typeset .grid.cards > ul > li:has(> p:first-child > strong > a):hover > p:first-child > strong > a, .md-typeset .grid.cards > ol > li:has(> p:first-child > strong > a):hover > p:first-child > strong > a, .md-typeset .grid.cards > ul > li > p:first-child > strong > a:focus-visible, .md-typeset .grid.cards > ol > li > p:first-child > strong > a:focus-visible { text-decoration: underline; } /* Liens secondaires (tuiles multi-destinations) : au-dessus de l'overlay */ .md-typeset .grid.cards > ul > li p:not(:first-child) a, .md-typeset .grid.cards > ol > li p:not(:first-child) a { position: relative; z-index: 2; } /* ============================================================================= §7 — SÉLECTEUR DE LANGUE ⛔ NE PAS TOUCHER SANS LIRE LES DEUX COMMENTAIRES ========================================================================== */ /* ── Largeur du menu : 13 entrées ──────────────────────────────────────────── Material ouvre le menu en portant `.md-select__inner` à `max-height: 10rem` ; `.md-select__list` vaut `max-height: inherit` + `overflow: auto` et défile donc déjà. À 3 langues cela ne se voyait pas — à 13, la fenêtre ne montre que ~5 entrées et le reste demande un défilement dans un menu ouvert au SURVOL, qui se referme dès que le pointeur en sort. On élargit la fenêtre. ⚠ Agir sur `.md-select__inner`, PAS sur `.md-select__list` : élargir la liste seule la ferait déborder hors de sa boîte parente, restée à 10rem. ⚠ Reprendre le sélecteur de Material À L'IDENTIQUE (0,2,0) : une règle `.md-select__inner` seule (0,1,0) serait battue quel que soit l'ordre de chargement. */ .md-select:focus-within .md-select__inner, .md-select:hover .md-select__inner { max-height: 75vh; } /* ── Drapeaux du sélecteur de langue : WINDOWS N'A AUCUN GLYPHE DE DRAPEAU ──── Les 13 `name:` de `shared/mkdocs-base.yml` portent déjà l'emoji (« 🇩🇪 Deutsch ») et le HTML produit contient bien la paire d'indicateurs régionaux (`F0 9F 87 A9 F0 9F 87 AA`). Le défaut n'est donc PAS dans le contenu : aucune police livrée avec Windows ne dessine les drapeaux, et le navigateur retombe alors sur les deux lettres régionales — « DE Deutsch », « GB English ». macOS, Linux et Android les affichent. ➡ On charge une police qui les contient. « Twemoji Country Flags » (78 Ko) est un sous-ensemble de Twemoji Mozilla réduit aux seuls drapeaux ; auto-hébergée dans `overrides/fonts/`, donc rien à casser si le poste est hors ligne ou si un CDN est bloqué. Origine, version et licence : `overrides/fonts/ATTRIBUTION.md`. ⚠ PORTÉE VOLONTAIREMENT LIMITÉE AU SÉLECTEUR (décision Lucas, 19 août 2026) : un emoji drapeau écrit un jour DANS UNE PAGE réafficherait « DE » sous Windows, sans qu'aucun filet le signale. Pour l'étendre, ajouter le sélecteur voulu ci-dessous — et non `body`, qui coûterait la police à tout visiteur. ⛔ ET IL FAUT DÉCLARER `font-family` ICI, PAS REDÉFINIR `--md-text-font-family` : Material applique la police par `aside,body,input{font-family:var(--md-text-font-family)}`. `font-family` étant héritée, l'enfant reçoit la valeur CALCULÉE chez `body` — donc redéfinir la variable sur `.md-select__link` n'aurait strictement aucun effet, et l'erreur serait muette. La pile reprise est celle de Material à l'identique, pour que « Deutsch » garde la police du thème ; seuls les drapeaux changent de fonte, `unicode-range` limitant la police aux indicateurs régionaux. ⓘ `var(--md-text-font, _)` vaut « DM Sans » depuis le §2 : cette règle suit la charte sans avoir été modifiée. ⓘ Spécificité : `.md-select__link` (0,1,0) bat `body` (0,0,1), sans `!important`. */ /*! Drapeaux : Twemoji © Twitter, Inc. et contributeurs — CC BY 4.0 https://creativecommons.org/licenses/by/4.0/ — via Twemoji Mozilla. Attribution complète : ./fonts/TwemojiCountryFlags.LICENSE.txt */ @font-face { font-family: "Twemoji Country Flags"; src: url("../fonts/TwemojiCountryFlags.woff2") format("woff2"); unicode-range: U+1F1E6-1F1FF; /* REGIONAL INDICATOR SYMBOL LETTER A..Z, rien d'autre */ font-display: block; /* jamais montrer « DE » puis basculer : la police est locale */ } .md-select__link { font-family: "Twemoji Country Flags", var(--md-text-font, _), -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif; }