/* ============================================================ charte-v4.css -- E-274 A, LOT 0 : LE SOCLE. Feuille PARTAGEE de la charte v4, celle de la landing livree en E-224 (design/landing-v4-codex/). Elle existe pour que les autres surfaces du site puissent recevoir cette charte SANS recopier ses valeurs une neuvieme fois : la mesure E-274 M a compte HUIT declarations independantes du meme jeu de jetons v2, et c est exactement ce qui a permis aux surfaces de deriver les unes des autres sans que rien ne le signale. CETTE FEUILLE N EST CHARGEE PAR AUCUNE PAGE AU MOMENT DE SA POSE, et c est voulu : le lot 0 ne change rien de visible. Elle est publiee par build.js (liste nominative FILES) pour que les lots suivants n aient qu a la referencer. ELLE NE DECLARE AUCUNE REGLE SUR body, a, h1, p NI SUR AUCUN SELECTEUR D ELEMENT. Une feuille de socle qui repeint le texte courant ne se rattache pas a une page existante, elle la remplace. Ici : les polices, les jetons, et le monogramme. Rien d autre. ============================================================ */ /* ============================================================ 1. LES DEUX POLICES, VENDORISEES (decision 5.1 du 18/09/2026) Manrope et DM Sans sont sous licence SIL Open Font 1.1. Les fichiers viennent de @fontsource-variable/manrope 5.3.0 et @fontsource-variable/dm-sans 5.3.0, recuperes par npm pack dans un dossier HORS DEPOT : aucune dependance n a ete ajoutee a package.json. Les licences sont conservees a cote des fichiers (assets/fonts/manrope-OFL.txt et dm-sans-OFL.txt). POURQUOI DES FICHIERS VARIABLES ET NON DES GRAISSES FIXES. La landing emploie les graisses 450 et 650 (style.css : --brand-name en 750, .brand-mark>span en 650, h2 en 650, DM Sans en 450). Ces valeurs n existent dans AUCUN fichier statique : seule une police variable les rend telles qu elles ont ete dessinees. Avec des graisses fixes, le navigateur arrondirait au palier le plus proche et le monogramme changerait d epaisseur sans que personne l ait demande. POURQUOI LE SEUL SOUS-ENSEMBLE latin. Il couvre tout le francais : les accents et la cedille sont dans U+0000-00FF, les ligatures OE et oe en U+0152-0153, l apostrophe typographique et les guillemets dans U+2000-206F. Les fleches decoratives de la landing (U+2197, U+2194, U+2192, U+2190) n y sont PAS - elles n etaient deja pas servies par Google Fonts, qui decoupe ses sous-ensembles de la meme maniere, et elles tombent donc sur la police systeme AUJOURD HUI COMME HIER. Ce n est pas une regression : c est le comportement existant, conserve. AUCUN FICHIER ITALIQUE. Les quatre de la landing sont tous dans un h2, et h2 em porte font-style:normal : rien n est rendu en italique. L @import Google d origine ne demandait pas davantage l axe ital. La plage de graisses declaree est celle du fichier, telle que la donne le paquet amont : 200-800 pour Manrope, 100-1000 pour DM Sans. Elle n est pas retrecie a ce que la landing utilise, pour que les lots suivants n aient pas a y revenir. font-display:swap : identique au &display=swap de l @import remplace. Le texte s affiche tout de suite dans la police systeme, puis bascule. ============================================================ */ @font-face { font-family: 'Manrope'; font-style: normal; font-display: swap; font-weight: 200 800; src: url('/assets/fonts/manrope-latin-wght-normal.woff2') format('woff2-variations'); 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-display: swap; font-weight: 100 1000; src: url('/assets/fonts/dm-sans-latin-wght-normal.woff2') format('woff2-variations'); 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; } /* ============================================================ 2. LES JETONS DE LA CHARTE v4 Valeurs recopiees A L IDENTIQUE du bloc :root de design/landing-v4-codex/style.css l.2. Aucune n est reinterpretee ici : si l une devait changer, elle changerait DANS LES DEUX ENDROITS, et le jour ou la landing chargera cette feuille elle n aura plus qu un seul endroit. --paper EST BLANC, et c est le changement le plus visible du chantier (decision 5.3 du 18/09/2026, Giancarlo : meme charte que la landing). Le reste du site pose aujourd hui un ivoire chaud #f4f1ea. --accent EST UNE COULEUR DE DECORATION, JAMAIS DE TEXTE COURANT SUR FOND CLAIR. Mesure E-274 M, point 5.3 : #c55c3d sur blanc rend 4.22:1 et sur --soft 3.85:1, quand le seuil AA du texte courant est 4.50:1. Usages autorises : filets, pastilles, le "AI" du monogramme, fonds de bouton portant du texte blanc. Usages interdits : texte courant, libelles de formulaire, messages d aide. La regle est ecrite ici parce que c est ici qu on vient lire la valeur. Pour memoire, ce qui tient : --ink sur blanc 12.38:1, --muted sur blanc 6.04:1. ============================================================ */ :root { --ink: #153a39; --deep: #103431; --accent: #c55c3d; --paper: #fff; --soft: #f2f5f3; --line: #d8e2dd; --muted: #526762; --display: 'Manrope', sans-serif; --body: 'DM Sans', sans-serif; /* --accent-text : LA TERRE CUITE QUAND ELLE DOIT ETRE LUE. Pose en E-274 C dans hub/styles.css, PROMU ICI en E-274 D : c est desormais sa source pour tout le site, au meme titre que les autres jetons de cette feuille. POURQUOI IL EXISTE. --accent #c55c3d rend 4.22:1 sur --paper et 3.85:1 sur --soft, quand le seuil AA du texte courant est 4.50:1. Il ne peut donc pas porter de la prose sur fond clair. Plutot que de renoncer a la teinte, on l assombrit juste assez : #b04e31 rend 5.28:1 sur --paper et 4.81:1 sur --soft. QUAND L EMPLOYER. Partout ou la terre cuite doit etre LUE sur fond clair : intitules, numeros, mentions obligatoires, libelles d etat, et comme FOND d un bouton a texte blanc (blanc sur --accent ne rend que 4.22:1, blanc sur --accent-text 5.28:1). QUAND NE PAS L EMPLOYER. Sur fond sombre, ou il REDUIRAIT le contraste : la-bas c est --accent, ou le terracotta pale #efb58a. Et jamais pour le monogramme ni le "AI" du nom, qui sont un logotype et gardent --accent. */ --accent-text: #b04e31; } /* ============================================================ 3. LE MONOGRAMME G + AI NOMS NEUFS, ET LA RAISON EST MESUREE. La landing appelle ces deux composants .brand-mark et .inline-brand. Or .brand-mark EXISTE DEJA dans diagnostic/index.html (l.736-782) et y designe une TOUTE AUTRE CHOSE : un pictogramme fait de deux arcs et de deux points, sans aucun texte. Les deux ne peuvent pas porter le meme nom dans une feuille partagee sans que l un ecrase l autre le jour ou les deux se rencontrent, et cela ne se verrait qu a l ecran. D ou .gai-mark et .gai-inline. Les regles, elles, sont celles de la landing, a la valeur pres. LES DEUX FORMES NE SONT PAS INTERCHANGEABLES, ET LA DIFFERENCE EST D ACCESSIBILITE, PAS DE STYLE. .gai-mark est un BLOC de marque, dans un en-tete ou un pied. Il se pose avec aria-hidden="true", le nom accessible etant porte par le lien qui l englobe : ... .gai-inline REMPLACE LE NOM DANS UNE PHRASE LUE. Il porte donc lui-meme son role et son nom, sans quoi la marque serait MUETTE pour un lecteur d ecran au milieu du texte : GAI Le "G" est en --ink, le "AI" en --accent, a 43 % de la taille du G pour la forme bloc et 52 % pour la forme en ligne, les deux alignes sur la MEME LIGNE DE BASE (align-items:baseline, vertical-align:baseline). ============================================================ */ .gai-mark { display: inline-flex; align-items: baseline; white-space: nowrap; font-family: var(--display); font-size: 55px; font-weight: 700; letter-spacing: -4px; line-height: 1; color: var(--ink); } .gai-mark > span { font-size: .43em; color: var(--accent); font-weight: 650; letter-spacing: -1.2px; margin-left: 1px; } .gai-inline { display: inline-block; white-space: nowrap; font-family: var(--display); font-size: 1.2em; font-weight: 700; line-height: 1; letter-spacing: -.065em; color: var(--ink); vertical-align: baseline; margin-right: .04em; } .gai-inline > span { font-size: .52em; font-weight: 650; letter-spacing: -.035em; color: var(--accent); margin-left: .025em; } /* TAILLES DEJA ARBITREES SUR LA LANDING, reprises telles quelles pour que les lots suivants n aient pas a les redecider. Elles ne s appliquent que si la page pose la classe de contexte correspondante ; aucune ne s applique toute seule. */ .gai-mark--footer { font-size: 38px; letter-spacing: -2px; } .gai-mark--label { font-size: 31px; letter-spacing: -2px; } @media (max-width: 1000px) { .gai-mark { font-size: 45px; } } @media (max-width: 720px) { .gai-mark { font-size: 40px; letter-spacing: -2px; } .gai-mark > span { letter-spacing: -.7px; } } @media (max-width: 380px) { .gai-mark { font-size: 34px; } }