/* ============================================================= WizeFile - Charte Source unique des couleurs, des polices et des espacements. Une valeur changee ici se propage a tout le site. Regle de couleur : le violet porte les actions, le lime ne dit qu'une seule chose, "le traitement est local, ton fichier reste chez toi". Il n'apparait nulle part ailleurs. ============================================================= */ :root { /* "light" SEUL, ET NON "light dark", depuis le 01/09/2026. Cette propriete ne colore pas le site, elle dit au NAVIGATEUR quels themes la page assume : avec "light dark", une machine reglee en sombre dessinait ses propres elements en sombre, cases a cocher, listes deroulantes, champs de saisie et barres de defilement, par dessus une page qui, elle, restait claire depuis l abandon du sombre automatique le 11/08/2026. Le sombre est reintroduit plus bas, sur "data-theme=dark", au seul endroit ou la page est reellement sombre. */ color-scheme: light; /* ---- Fonds et surfaces ---- */ --bg: #F3F4F1; /* fond de page, beige clair */ --surface: #FFFFFF; /* cartes, zones de depot */ /* Creuse davantage qu'avant (#EAEBE6) : a 1.09 de contraste avec le fond de page, une surface creusee ne se voyait pas en clair, et l'emplacement publicitaire n'existait pas visuellement. */ --surface-2: #E3E5DD; /* surfaces creusees, emplacements pub */ --border: #E1E3DC; --border-fort: #CFD2C8; /* Gris VRAIMENT neutres, 0 de saturation. La palette ci-dessus est volontairement olive, 77 a 100 degres de teinte, et cela ne se voit nulle part ailleurs : le ton se noie dans les grandes surfaces. Il ne se lit qu a un seul endroit du site, le cerne de 1 px autour du disque blanc de 26 px de la pastille du hero, ou l oeil isole la teinte et trouve la pastille verte. Ces deux jetons existent pour ce cas, et pour lui seul. */ --cerne-neutre: #E0E0E0; --ombre-neutre: rgba(17, 17, 17, .28); /* Le fond du disque de la pastille du hero. Il etait blanc pur, et le blanc pur pose sur un fond olive prend la teinte de son voisin des qu on l agrandit. Une creme CHAUDE, 33 degres de teinte, le tire du cote de la flamme qu il porte : le vert ne peut plus s y lire, et le disque dit ce qu il contient. */ --fond-flamme: #FFF4E6; /* RETOUCHE DU 19\08\2026, a la demande : le fond des deux pastilles a flamme passe de la creme au LIME CHAUD. Le lime du site tire au vert froid, 85 degres de teinte ; celui-ci est ramene a 70, la ou il garde le vert de la marque tout en s accordant a l orange de la flamme et de son cerne, qui eux ne changent pas. */ --fond-lime-chaud: #EEF6C6; /* VARIANTE 5 RETENUE LE 19\08\2026 apres comparaison de quatorze peintures dans "_labo/variantes-19aout.html". Le fond des deux pastilles a flamme n est plus un aplat mais un DEGRADE, du lime chaud ci-dessus vers un ambre pale. Il court dans le sens de lecture, de la flamme vers le mot : la pastille se rechauffe la ou elle porte son signe, et retombe sur le vert de la marque a l autre bout. Le jeton porte le degrade complet et non ses deux bornes, pour que les deux composants ne puissent pas diverger. */ --degrade-flamme: linear-gradient(135deg, #EEF6C6 0%, #FDE9B8 100%); /* DEGRADE DE LA PASTILLE « 100 % RGPD », pose le 25/08/2026 a la demande : « j aimerais ameliorer le design de 100 % RGPD ». Meme principe que celui de la flamme ci-dessus, et c est voulu : les deux pastilles se cotoient dans l en-tete, une seule en degrade aurait fait paraitre l autre plate. Il court du lime clair vers un lime a peine plus soutenu, dans le sens de lecture, de l ecusson vers le texte. L ecart entre les deux bornes est tenu court, six points de clarte : une pastille de 13 px de haut ne peut pas porter un degrade franc sans se lire comme un bouton. */ --degrade-rgpd: linear-gradient(135deg, #F2FAE0 0%, #DDEFB6 100%); /* Le texte et le cerne de la pastille « populaire », accordes a son fond creme. Le lime est reserve a ce qui VALIDE, la pastille RGPD et le cadenas ; « populaire » ne valide rien, elle signale. */ --flamme-texte: #9A3412; --flamme-ligne: #F5C98A; /* Contour des elements ou l'utilisateur agit : champs de saisie, listes deroulantes, zone de depot. La regle WCAG 1.4.11 demande 3:1 pour ce qui delimite un composant d'interface, et --border ne donnait que 1.17 : sur un champ, la bordure est pourtant la seule chose qui dit ou ecrire. Les bordures purement decoratives (cartes, separateurs) gardent --border, plus discret. */ --champ-ligne: #7C806F; /* ---- Textes ---- */ /* Les trois niveaux passent tous le seuil d'accessibilite AA (4.5). Sur fond clair il n'y a pas la place pour un quatrieme, plus pale. */ --ink: #10120F; /* texte principal */ --ink-2: #55594F; /* texte secondaire */ --ink-3: #6B6F65; /* mentions, legendes */ /* ---- Violet : les actions ---- */ --violet: #6D28D9; --violet-fonce: #5B21B6; /* survol */ /* Assombri (avant #F1EBFD) : a 1.16 de contraste avec le blanc des cartes, le pave qui porte l'icone d'un outil ne se lisait pas comme un pave en clair, l'icone semblait posee sur rien. */ --violet-doux: #E6DAFB; /* fonds teintes */ --violet-ligne: #CDB8F5; /* bordures teintees */ --sur-violet: #FFFFFF; /* texte pose sur du violet */ /* ---- Lime : le signal "local", rien d'autre ---- Sur fond clair le lime pur est illisible (contraste 1.7). C'est --lime-texte qui porte les mots, --lime les aplats. */ --lime: #A3E635; --lime-texte: #43700C; --lime-doux: #EAF7D2; --lime-ligne: #BEE083; /* Le lime qui trace un trait, distinct du lime qui remplit. --lime pur ne donne que 1.37 de contraste sur le fond clair : un filet trace avec disparaissait de jour alors qu'il eclate de nuit (12.37). Or c'est le signal de marque, il doit se voir dans les deux themes. --lime reste reserve au texte pose sur du noir, l'etiquette "zero upload", ou il est parfait tel quel. */ --lime-trait: #5C8C15; /* L'etiquette "zero upload" s'inverse d'un theme a l'autre. Elle melangeait --ink, qui bascule avec le theme, et --lime, qui ne bascule pas : en sombre son fond devenait presque blanc et le lime pose dessus tombait a 1.28 de contraste, illisible. Les deux couleurs basculent donc ensemble, et la pastille reste eclatante de jour comme de nuit. */ --etiquette-fond: #10120F; --etiquette-texte: #A3E635; /* ---- Icones en couleur, dessinees ici ---- Remplacent les deux emojis du site depuis le 09/08/2026. Un emoji change de dessin selon la machine, ne suit pas le theme et n'est pas notre trait : ces deux la sont dessines a la main, en aplats de couleur, dans un fichier SVG ecrit directement dans la valeur. Aucun fichier a telecharger, aucune requete, conforme a la regle du site. Le cadenas n'a QU'UNE version depuis le 19/08/2026, et c'est une correction. Il en avait deux, une par theme, heritees du temps ou l'etiquette "zero upload" s'inversait de l'un a l'autre. Elle ne s'inverse plus, elle est passee au verre depoli et prend la couleur de l'outil, mais les deux dessins, eux, etaient restes. Resultat, le meme objet n'avait pas la meme tete de jour et de nuit : un laiton pose a plat de jour, le meme laiton cerne de fonce de nuit. C'est la version CERNEE qui est gardee partout. Le cerne ne sert pas la nuit seulement : sur du verre depoli, quelle que soit la couleur derriere, c'est lui qui porte la lisibilite pendant que le laiton et l'acier ne font que la couleur. C'est un cadenas ordinaire, pas une interpretation : anse en U, corps arrondi, serrure au centre. L'anse est tracee deux fois, un trait fonce large en dessous et le trait acier par dessus, ce qui lui donne le meme cerne que le corps. La flamme, elle, vit toujours sur du lime doux et n'a qu'une version, reglee pour tenir sur les deux valeurs de ce lime. */ --img-cadenas: url("data:image/svg+xml,"); --img-flamme: url("data:image/svg+xml,"); /* L'ecusson de la pastille « 100 % RGPD ». Meme principe que la flamme ci-dessus : DESSINE, jamais un emoji, parce qu'un emoji ne se dessine pas pareil d'une machine a l'autre (retrait du 09/08, 45 occurrences). Le vert est fige dans l'image et ne suit pas le theme : #65A30D est un vert median, choisi pour tenir a la fois sur le lime clair #EAF7D2 et sur le lime sombre #242C14, la ou #43700C du texte disparaitrait sur le second. La coche est blanche, posee sur l'ecusson qui lui sert de fond. */ --img-ecusson: url("data:image/svg+xml,"); /* ---- Familles d outil : la couleur des icones du catalogue ---- Amendement du 04/08/2026 a la regle ci-dessus. Le violet garde les actions, mais les vingt icones du catalogue portaient toutes ce meme violet : a 20 px dans une carte, plus rien ne les distinguait et l icone ne servait plus a retrouver un outil sans lire, ce qui est pourtant son seul role. Quatre teintes, une par famille, reprenant celles qui existent deja dans le contenu du site. Le violet reste sur les PDF, la famille principale, donc l identite ne bouge pas. Le rouge est volontairement exclu : sur ce site il veut dire « quelque chose ne va pas », et lui donner un second sens affaiblirait le premier. Contraste mesure de chaque encre sur son pave : 4.29 au minimum en clair, 4.83 en sombre, pour un seuil exige de 3 (WCAG 1.4.11, qui vaut pour les elements non textuels). */ --fam-pdf: #6D28D9; /* PDF, 8 outils */ --fam-pdf-doux: #E6DAFB; --fam-conv: #B45309; /* convertir, 3 outils */ --fam-conv-doux: #FBEBD4; --fam-img: #0E7490; /* image, 3 outils */ --fam-img-doux: #D6EDF3; --fam-lire: #A21CAF; /* ouvrir et lire, 6 outils */ --fam-lire-doux: #F7DCF8; --fam-enr: #1D4ED8; /* enregistrer, la cinquieme famille */ --fam-enr-doux: #DBEAFE; /* TEXTE POSE SUR LA TEINTE PLEINE DE LA FAMILLE, ajoute le 20/08/2026 pour l etiquette « zero upload ». Elle vivait sur un verre depoli teinte a 22 %, et son contraste tombait sous le seuil AA sur six des dix combinaisons famille- theme. La cause est mecanique : le fond etait un melange de la MEME couleur que le texte, les deux se rejoignaient donc. Sur un aplat plein le probleme disparait, a condition de poser dessus une encre choisie. Les valeurs ci-dessous sont mesurees, pas devinees, et le pire cas est de 5,02. LA REGLE N EST PAS LA MEME DANS LES DEUX THEMES, et c est normal : de jour les teintes de famille sont foncees et portent du blanc, de nuit elles sont claires et portent une encre sombre tiree de leur propre teinte, ce qui evite le noir pur sur une couleur vive. Le repli, celui des pages sans famille, tient sur le lime : 12,49 de contraste, la meme encre que le site. */ --sur-fam-repli: #10120F; --fam-pdf-sur: #FFFFFF; /* 7.10 */ --fam-conv-sur: #FFFFFF; /* 5.02, le pire des dix */ --fam-img-sur: #FFFFFF; /* 5.36 */ --fam-lire-sur: #FFFFFF; /* 6.32 */ --fam-enr-sur: #FFFFFF; /* 6.70 */ /* ---- Alerte ---- */ --alerte: #B42318; --alerte-doux: #FEF3F2; --alerte-ligne: #FECDCA; /* ---- Espacements ---- Echelle unique, base 8. Tout le rythme du site sort d'ici : aucune marge en dur dans le HTML, sinon changer le rythme redevient une tournee des 27 pages. */ --e-1: 4px; --e-2: 8px; --e-3: 12px; --e-4: 16px; --e-5: 24px; --e-6: 32px; --e-7: 48px; --e-8: 64px; --e-9: 96px; /* ---- Tailles de texte ---- Echelle modulaire, revue le 09/08/2026 apres mesure. Ce qui a ete constate : le corps etait annonce a 16px, mais sur une page d'outil 65% des blocs de texte s'affichaient sous 16px, et la taille la plus employee de la page etait 13px, utilisee 27 fois. Onze tailles distinctes cohabitaient, dont quatre absentes de cette echelle (9.5, 10.5, 11.5, 13.5). L'echelle existait, personne ne s'en servait : 50 declarations sur 78 ecrivaient une valeur en dur. D'ou trois changements : - le corps monte a 17px, le site vend des explications autant que des outils et se lit longtemps ; - le texte secondaire monte de 13 a 14px, 13 etait trop proche du plancher pour un texte qu'on veut vraiment lire ; - le plancher passe a 12px et devient absolu. Rien ne descend en dessous, plus de 8px ni de 9.5px : a cette taille ce n'est plus du texte, c'est un motif. Regle qui va avec : plus aucune taille en dur dans les feuilles. Une taille qui n'est pas dans cette liste n'existe pas. Unite revue le 09/08/2026 : les neuf jetons etaient en px, la seule unite qui ignore le reglage de police par defaut du navigateur. Le zoom normal (Ctrl +) grossit tout, page comprise, et marchait deja parfaitement ; c'est le zoom "texte seulement", qui ne grossit que la police de base, qu'un px ne peut pas suivre. Passes en rem, base 16px (1rem = 16px, aucun font-size pose sur html ou body dans ce fichier) : meme rendu par defaut, et le reglage du navigateur s'applique desormais. */ --t-xs: 0.75rem; /* plancher absolu : etiquettes mono, mentions - 12px */ /* Seule exception au plancher, et elle est nommee pour qu'elle reste dans le systeme au lieu de redevenir une valeur perdue dans la feuille. La pastille "populaire" ne se lit pas, elle se remarque : posee en debordement sur l'angle d'un bouton, elle doit rester plus petite que ce qu'elle signale. A 12px elle couvrait 57 % de la largeur du bouton, ce qui la faisait passer pour l'element principal. Aucun autre composant n'a le droit d'y toucher. */ --t-pastille: 0.625rem; /* 10px */ --t-s: 0.875rem; /* texte secondaire : descriptions, legendes - 14px */ --t-m: 1.0625rem; /* corps de lecture - 17px */ --t-l: 1.25rem; /* titre de carte, h3 - 20px */ --t-xl: 1.5rem; /* 24px */ --t-2xl: 1.875rem; /* 30px */ --t-3xl: 2.375rem; /* 38px */ --t-4xl: 3rem; /* 48px */ /* ---- Rayons ---- */ --r-s: 8px; --r: 12px; --r-l: 18px; --r-pill: 999px; /* ---- Ombres ---- */ --ombre: 0 10px 30px -18px rgba(16, 18, 15, .35); --ombre-douce: 0 4px 14px -8px rgba(16, 18, 15, .25); /* ---- Polices ---- */ --f-titre: 'Instrument Sans', 'Segoe UI', system-ui, sans-serif; --f-texte: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --f-mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace; /* ---- Rythme ---- 1180px pour les grilles : a 1000px, un catalogue de 18 outils tenait dans les deux tiers d'un ecran de 1280 et le site paraissait flotter. La largeur de lecture, elle, ne bouge pas : au-dela de 70 signes par ligne l'oeil perd le debut de la ligne suivante. Les deux valeurs repondent a deux besoins opposes. */ /* LE SITE PREND TOUTE LA LARGEUR DEPUIS LE 19/08/2026, a la demande. C etait une largeur plafonnee qui montait par paliers, 1180 puis 1320, 1520, 1720 et 2000 px. Ces paliers laissaient toujours deux bandes vides sur les cotes, et c est exactement ce que la demande visait : « je veux que tout le site prenne tout l'écran ». Les gouttieres ne viennent donc plus que du rembourrage de ".page", 24 px de chaque cote. Ce que cela coute est ecrit sur ".prose" dans "composants.css" : un paragraphe ne se lit pas sur 1 800 px, et les blocs de texte suivi gardent donc un plafond a eux. */ --page: 100%; /* largeur du contenu : toute la fenetre */ --etroit: 660px; /* largeur de lecture confortable */ /* La colonne de travail d'une page d'outil : la zone de depot et tout ce qui s'empile dessous, reglages, liste des fichiers, bilan. Elle est SEPAREE de "--etroit" a dessein, meme si les deux valeurs se sont deja croisees : "--etroit" est une largeur de LECTURE, environ 70 signes par ligne, et elle changera pour des raisons de typographie ; celle-ci est une largeur d'OUTIL, et elle changera pour des raisons de confort de manipulation. Les confondre reviendrait a faire bouger la prose du site chaque fois qu'on retouche une zone de depot. Portee de 600 a 690 le 20/08/2026. */ --outil: 690px; /* colonne de travail des pages d'outil */ } /* ============================================================= Mode sombre Les deux blocs ci-dessous doivent rester IDENTIQUES. Le premier suit le reglage du systeme, le second suit le choix explicite de l'utilisateur. CSS ne permet pas de les fusionner. ============================================================= */ /* ═══════════════════════════════════════════════════════════ LE THEME CLAIR EST LE DEFAUT, decide le 11/08/2026. Le bloc "@media (prefers-color-scheme: dark)" qui se trouvait ici est NEUTRALISE, et non supprime : le garder en commentaire dit que son absence est un choix. La raison : une machine reglee en sombre affichait le site en sombre sans que personne l ait choisi. Le sombre ne s applique plus que sur choix explicite, par le bouton de bascule, qui pose data-theme="dark" et dont la regle suit plus bas. ═══════════════════════════════════════════════════════════ */ /* @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { /* Le fond descend et la surface monte : a l'ancien ecart (#191A16 contre #212320) les cartes ne se detachaient pas du fond en sombre, elles flottaient. La bordure fait le reste du travail, c'est elle qui pose vraiment une carte sur un fond. * / --bg: #121310; --surface: #1F211C; --surface-2: #2E312A; --border: #3A3D34; --border-fort: #53564B; --champ-ligne: #7B7F72; --ink: #ECEDE8; --ink-2: #A5A89E; --ink-3: #888C82; --violet: #A78BFA; /* eclairci : le violet clair est illisible sur fond sombre * / --violet-fonce: #C4B5FD; --violet-doux: #332B4E; --violet-ligne: #5A4C85; --sur-violet: #16121F; --lime: #A3E635; /* sur fond sombre, le lime pur devient tres lisible * / --lime-texte: #B6EF5E; --lime-doux: #242C14; --lime-ligne: #52682B; /* Ici le lime pur suffit : 12.37 de contraste sur le fond sombre. * / --lime-trait: #A3E635; /* Inversee : pastille lime a texte noir, pour ressortir du fond sombre. * / --etiquette-fond: #A3E635; --etiquette-texte: #10120F; /* Le cadenas ne figure plus ici. Il en existait une version par theme, ce qui donnait deux dessins differents au meme objet ; il n en a plus qu une, definie tout en haut du fichier, et c est la version cernee. Voir le commentaire qui l accompagne. * / /* Familles d outil. Les encres s eclaircissent et les paves s assombrissent : l inverse exact du theme clair, comme le reste de la charte. Ce n est pas une variante automatique, chaque valeur est reglee a la main. * / --fam-pdf: #A78BFA; --fam-pdf-doux: #332B4E; --fam-conv: #FBBF24; --fam-conv-doux: #3A2C10; --fam-img: #22D3EE; --fam-img-doux: #0D2E38; --fam-lire: #E879F9; --fam-lire-doux: #3B1140; --fam-enr: #60A5FA; --fam-enr-doux: #14284F; /* Encre posee sur la teinte pleine. Meme role qu en clair, valeurs inversees : les teintes de nuit sont claires. * / --sur-fam-repli: #10120F; --fam-pdf-sur: #16121F; /* 6.77 * / --fam-conv-sur: #1A1503; /* 10.92 * / --fam-img-sur: #062028; /* 9.33 * / --fam-lire-sur: #2A0530; /* 7.34 * / --fam-enr-sur: #04142E; /* 7.22 * / --alerte: #FF8A80; --alerte-doux: #331A17; --alerte-ligne: #552723; --ombre: 0 10px 30px -18px rgba(0, 0, 0, .7); --ombre-douce: 0 4px 14px -8px rgba(0, 0, 0, .55); } } */ :root[data-theme="dark"] { /* Le seul etat ou la page est vraiment sombre : c est donc ici, et nulle part ailleurs, que le navigateur doit dessiner ses propres elements en sombre. Voir la note sur ":root" en haut du fichier. */ color-scheme: dark; /* Doit rester identique au bloc @media ci-dessus. */ --bg: #121310; --surface: #1F211C; --surface-2: #2E312A; --border: #3A3D34; --border-fort: #53564B; --cerne-neutre: #383838; --ombre-neutre: rgba(0, 0, 0, .45); --fond-flamme: #2E241A; /* Meme lime chaud qu en clair, transpose en sombre : la teinte reste a 70 degres, seule la clarte descend. */ --fond-lime-chaud: #2B3116; /* Meme degrade transpose : memes teintes, memes positions, seule la clarte descend. L ambre reste reconnaissable sans eclairer la pastille plus que les cartes qui l entourent. */ --degrade-flamme: linear-gradient(135deg, #2B3116 0%, #3A2A14 100%); /* Le degrade de la pastille RGPD, transpose de la meme facon : les deux bornes gardent leur teinte lime, seule la clarte descend jusqu au niveau de "--lime-doux" en sombre, #242C14. */ --degrade-rgpd: linear-gradient(135deg, #242C14 0%, #2F3A18 100%); --flamme-texte: #FDBA74; --flamme-ligne: #7C4A21; --champ-ligne: #7B7F72; --ink: #ECEDE8; --ink-2: #A5A89E; --ink-3: #888C82; --violet: #A78BFA; --violet-fonce: #C4B5FD; --violet-doux: #332B4E; --violet-ligne: #5A4C85; --sur-violet: #16121F; --lime: #A3E635; --lime-texte: #B6EF5E; --lime-doux: #242C14; --lime-ligne: #52682B; --lime-trait: #A3E635; /* Inversee : pastille lime a texte noir, pour ressortir du fond sombre. */ --etiquette-fond: #A3E635; --etiquette-texte: #10120F; /* RETOUCHE DU 19\08\2026, a la demande : l ecusson RGPD ne rendait rien en sombre. Sa version claire est un bouclier #65A30D a coche BLANCHE, dessine pour se poser sur du lime tres clair. En sombre il tombe sur "--lime-doux" #242C14 : deux verts fonces l un sur l autre, 2,1 de contraste, et le bouclier disparaissait dans son propre fond pendant que la coche blanche flottait seule. Il est donc INVERSE ici, exactement comme l etiquette juste au-dessus : bouclier en lime vif, coche en encre sombre. C est le meme objet et le meme dessin, seules les deux couleurs changent. */ --img-ecusson: url("data:image/svg+xml,"); /* Le cadenas ne figure plus ici. Il en existait une version par theme, ce qui donnait deux dessins differents au meme objet ; il n en a plus qu une, definie tout en haut du fichier, et c est la version cernee. Voir le commentaire qui l accompagne. */ /* Familles d outil. Doit rester identique au bloc @media ci-dessus. */ --fam-pdf: #A78BFA; --fam-pdf-doux: #332B4E; --fam-conv: #FBBF24; --fam-conv-doux: #3A2C10; --fam-img: #22D3EE; --fam-img-doux: #0D2E38; --fam-lire: #E879F9; --fam-lire-doux: #3B1140; --fam-enr: #60A5FA; --fam-enr-doux: #14284F; /* Encre posee sur la teinte pleine. Meme role qu en clair, valeurs inversees : les teintes de nuit sont claires. */ --sur-fam-repli: #10120F; --fam-pdf-sur: #16121F; /* 6.77 */ --fam-conv-sur: #1A1503; /* 10.92 */ --fam-img-sur: #062028; /* 9.33 */ --fam-lire-sur: #2A0530; /* 7.34 */ --fam-enr-sur: #04142E; /* 7.22 */ --alerte: #FF8A80; --alerte-doux: #331A17; --alerte-ligne: #552723; --ombre: 0 10px 30px -18px rgba(0, 0, 0, .7); --ombre-douce: 0 4px 14px -8px rgba(0, 0, 0, .55); } /* ============================================================= Polices hebergees sur le site. Aucun appel a Google Fonts : l'adresse IP du visiteur ne doit partir chez personne (imperatif 2 de la feuille de route). Tant que les fichiers ne sont pas la, les polices systeme prennent le relais sans rien casser. ============================================================= */ /* Instrument Sans et Inter sont des polices variables : un seul fichier couvre toutes les graisses de 400 a 700. IBM Plex Mono ne l'est pas, il lui faut un fichier par graisse. */ @font-face { font-family: 'Instrument Sans'; src: url('./fonts/instrument-sans.woff2') format('woff2'); font-weight: 400 700; font-style: normal; font-display: swap; } @font-face { font-family: 'Inter'; src: url('./fonts/inter.woff2') format('woff2'); font-weight: 400 700; font-style: normal; font-display: swap; } @font-face { font-family: 'IBM Plex Mono'; src: url('./fonts/ibm-plex-mono-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'IBM Plex Mono'; src: url('./fonts/ibm-plex-mono-600.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }