/* FICHIER GENERE — NE PAS EDITER A LA MAIN. Produit par scripts/build-socle.mjs depuis scripts/lib/socle.mjs, qui est la seule source de ces valeurs. La fiche d elevage inline exactement ce meme texte ; toute retouche faite ici serait perdue au prochain passage ET creerait un ecart entre les deux surfaces. La corriger dans le module. */ :root{ --n0:#08090A;--n05:#0A0C0D;--n1:#0C0E10;--n2:#101215;--n2h:#151A1E;--n3:#14181B; --n4:#1A1D20;--n5:#22262A;--n6:#2A2E32;--n7:#3A4045; --t4:#4C5257;--t3:#5A6167;--t2b:#7A8288;--t2:#8A8F94;--t1b:#C9CDD1;--t1:#F2F3F4; /* ── L ACCENT, ET IL A CHANGE DE COULEUR LE 2026-09-03 ─────────────────────── Le laiton #C9A227 devient un vert fluo. C est une decision du proprietaire de la marque, pas une correction — mais elle a servi de mesure, et la mesure est ce qui compte ici : changer UNE couleur aurait du etre une ligne, et ca n en etait pas une. L accent vivait en cinq exemplaires — la rampe inlinee de index.html, celle de studio.html, la palette propre d app.html, celle de fiches.html, et 48 « rgba(var(--ac-rgb), ...) » ecrits a la main dans neuf fichiers, que AUCUN changement de jeton n aurait suivis. D OU LES DEUX RAMPES DE COMPOSANTES. « --ac-rgb » et « --ac-clair-rgb » portent les canaux, pour que la forme translucide s ecrive « rgba(var(--ac-rgb), .12) » et suive l accent comme le reste. Il y avait 48 copies de la premiere et 107 de la seconde — 155 endroits ou un changement de jeton ne serait pas passe. Et les deux roles reprennent leur nom : « --vif » est l accent (filets, etats actifs, traits de glyphe), « --vif-clair » sa forme lisible en texte. « laiton » nommait un metal ; le garder au-dessus d un vert aurait fait mentir le vocabulaire a chaque lecture. POURQUOI CE VERT ET PAS UN AUTRE. #A3F52C rend 14,9:1 sur le fond de page, la ou le laiton rendait 8,2:1 — l accent devient lisible en texte, ce qu il n etait qu a peine. Et il reste franchement a distance de « --safe » (#3FD07A, un vert de printemps a 145° de teinte) : celui-la dit « sans danger » sur les statuts, et deux verts qu on confond diraient deux choses a la fois. */ --fluo:#A3F52C;--ac:var(--fluo);--ac-rgb:163,245,44;--ac-clair-rgb:200,255,107; --safe:#3FD07A;--caution:#E8A13A;--restrict:#E8434F; --encre:var(--n0);--carte:var(--n2);--vif:var(--ac);--vif-clair:#C8FF6B;--ivoire:var(--t1); /* LES DEUX ROLES DE TEXTE MONTENT D UN BARREAU, ET C EST UNE CORRECTION, PAS UN GOUT. Ils visaient --t3 et --t2, soit 3,17:1 et 5,75:1 sur le fond de page. Le seuil AA du petit texte est 4,5:1, et --brume habille les etiquettes de 12 px de tout le site : les noms scientifiques, les compteurs, les credits, les libelles de filtre, les pieds de page. Mesure au navigateur avant ce changement : 213 elements sous le seuil sur la bibliotheque, 123 sur la fiche, 18 sur la vitrine, 14 sur l audit, 11 sur l expedition. LE GLOBE, LUI, AVAIT DEJA CORRIGE — index.html ecrit --brume:var(--t2) et --texte:var(--t1b) dans son propre bloc depuis un moment. Ce socle ne redecide donc rien : il RATTRAPE la page d accueil, exactement comme il a rattrape le reste. C est aussi la demonstration de pourquoi il existe, et pourquoi test-contraste.mjs lit desormais assets/keepr.css : la valeur avait ete corrigee a un endroit sur six, et rien ne pouvait le dire. */ --brume:var(--t2);--texte:var(--t1b);--ligne:var(--n4);--ligne-fort:var(--n5); --verre:var(--n1);--verre-hi:rgba(242,243,244,.035); /* TROIS ROLES, TROIS FAMILLES. Titres, corps, chiffres — et c est la troisieme qui fait le plus de travail sur ce site : elle porte les libelles et les mesures. Anuphan reste en second dans les trois piles ; aucune des trois latines ne porte de glyphe thai, donc le navigateur retombe sur elle des qu il en rencontre, et les trois langues tiennent sans regle conditionnelle. */ --fd:'Bricolage Grotesque','Anuphan',ui-sans-serif,system-ui,sans-serif; --fb:'Geist','Anuphan',ui-sans-serif,system-ui,sans-serif; --fm:'Geist Mono','Anuphan',ui-monospace,SFMono-Regular,Menlo,monospace; /* ── LES TROIS RAYONS, NOMMES ──────────────────────────────────────────────── La charte disait « KEEPR EST CARRE ». Elle a ete levee pour la direction de 2026, et le proprietaire de la marque a tranche pour l arrondi partout. Trois valeurs, pas une de plus, sinon on retombe dans le hasard que la regle carree evitait au moins : --r-grand les grandes surfaces : panneaux, cartes, bandeaux --r-commande les commandes : boutons, selecteurs, cases --r-puce les formes longues : puces, bandes de mesure Les vrais cercles restent des cercles, nommement. */ --r-grand:22px;--r-carte:18px;--r-commande:12px;--r-puce:999px; --ease:cubic-bezier(.16,1,.3,1)} .k-pan{background:linear-gradient(180deg,var(--verre-hi),rgba(242,243,244,.012)); border:1px solid var(--ligne);border-radius:var(--r-grand); box-shadow:inset 0 1px 0 rgba(242,243,244,.05)} .k-carte{background:linear-gradient(180deg,var(--verre-hi),rgba(242,243,244,.012)); border:1px solid var(--ligne);border-radius:var(--r-carte); transition:border-color .25s var(--ease),background .25s var(--ease),transform .25s var(--ease)} .k-carte:hover{border-color:var(--ligne-fort);background:rgba(242,243,244,.05)} .k-puce{display:inline-flex;align-items:center;gap:6px; font:600 10px var(--fm);letter-spacing:.1em;text-transform:uppercase; border:1px solid var(--ligne);border-radius:var(--r-puce);padding:5px 11px;color:var(--texte)} .k-puce.on{border-color:var(--vif);color:var(--vif-clair);background:rgba(var(--ac-rgb),.1)} .k-cmd{border-radius:var(--r-commande);border:1px solid var(--ligne); font:600 12.5px var(--fb);padding:9px 15px;color:var(--ivoire); transition:border-color .25s var(--ease),background .25s var(--ease)} .k-cmd:hover{border-color:var(--ligne-fort);background:rgba(242,243,244,.04)} .k-glyphe{flex:0 0 auto;width:34px;height:34px;border-radius:11px;display:grid;place-items:center; background:rgba(var(--ac-rgb),.12);color:var(--vif-clair)} .k-glyphe svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.5; stroke-linecap:round;stroke-linejoin:round} /* Le verre depoli n est pose que la ou quelque chose passe DESSOUS : un flou sur un fond plat coute un calque de composition pour aucun effet visible. */ .k-verre{background:linear-gradient(rgba(11,12,11,.9),rgba(11,12,11,.72)); -webkit-backdrop-filter:blur(18px) saturate(150%);backdrop-filter:blur(18px) saturate(150%); border:1px solid var(--ligne)} /* Les trois roles typographiques, disponibles en classe pour les pages qui ne veulent qu une ligne et pas un composant. */ /* ── UNE RANGEE QUI DEFILE LE DIT ──────────────────────────────────────────── Trois surfaces posent leurs filtres en rangee horizontale qui deborde : les 30 groupes et les 33 regions de la bibliotheque, les huit onglets du globe. Rien n annoncait la suite. Une puce coupee au milieu d un mot se lit comme un defaut de mise en page, pas comme « il y en a d autres », et le lecteur ne pense pas a faire glisser une rangee dont il croit voir la fin. Le fondu est pose par un MASQUE et non par un degrade en surimpression : il suit donc le fond quel qu il soit, y compris le verre depoli, ou un aplat pose par-dessus laisserait une bande plus mate. Les deux largeurs sont des variables, a zero par defaut : la page bascule k-avant et k-apres selon le cote ou il reste quelque chose, donc au repos ce socle ne dessine rien. */ .k-defile{--k-fg:0px;--k-fd:0px; -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 var(--k-fg), #000 calc(100% - var(--k-fd)),transparent 100%); mask-image:linear-gradient(90deg,transparent 0,#000 var(--k-fg), #000 calc(100% - var(--k-fd)),transparent 100%)} .k-defile.k-avant{--k-fg:34px} .k-defile.k-apres{--k-fd:34px} .k-titre{font-family:var(--fd);font-weight:700;letter-spacing:-.015em;text-wrap:balance} .k-kick{font:600 10px var(--fm);letter-spacing:.22em;text-transform:uppercase;color:var(--vif)} .k-num{font-family:var(--fm);font-variant-numeric:tabular-nums;letter-spacing:-.01em} @media(prefers-reduced-motion:reduce){ .k-carte,.k-cmd{transition:none}} /* ── CE QU UN DOIGT PEUT VISER ─────────────────────────────────────────────── Mesure au navigateur sur neuf surfaces : la barre de langue fait 24 a 27 px de haut et la navigation d en-tete 16 px. Seize pixels, c est la hauteur du texte et rien d autre : le lien n a aucune zone au-dessus ni au-dessous, et sur un telephone on le rate. La reference d Apple est 44 pt, celle du WCAG 2.2 AAA 44 px ; on pose 40, qui tient dans ces en-tetes sans les grossir et double la surface reelle. DEUX SELECTEURS NON PREFIXES, ET C EST DELIBERE. Le reste de ce socle est prefixe k- pour que le lier ne change rien tant qu on n a pas ecrit la classe. Ces deux-la sont l exception, pour la raison exacte que build-i18n.mjs donne deja a propos du point des langues incompletes : la barre de langue est FABRIQUEE PAR LE RUNTIME, identique sur les six surfaces, et son style est aujourd hui recopie dans cinq feuilles. Une regle d accessibilite a recopier cinq fois est une regle qui manquera sur la sixieme. Elles ne redessinent rien — ni couleur, ni bordure, ni fond : elles posent un plancher de hauteur sous des commandes qui veulent dire la meme chose partout. */ @media(pointer:coarse){ .lang button{min-height:40px;display:inline-flex;align-items:center;justify-content:center} header nav a{min-height:40px;display:inline-flex;align-items:center}} /* ── OU LE CLAVIER SE TROUVE ───────────────────────────────────────────────── Mesure : cinq surfaces sur sept n avaient AUCUNE regle :focus-visible, et le socle non plus. Le globe en portait trois, la fiche une — pour sa barre de rubriques et rien d autre. Partout ailleurs, quelqu un qui navigue au clavier tabulait a l aveugle : le bouton « Check my setup » de l audit, qui est l action principale de cette page, ne montrait rien du tout. POURQUOI C EST UNE REGLE DE SOCLE ET PAS DE PAGE. Le contour du navigateur a ete efface partout, par les remises a zero de chaque page — c est le geste le plus courant de tout le CSS, et le plus couteux quand personne ne le remplace. Le remettre surface par surface, c est six occasions de l oublier, plus une a la septieme page qu on ecrira. Et c est sans risque de mise en page : un contour (outline) ne prend aucune place dans le flux, et il ne se declenche PAS au clic de souris — un lecteur qui ne tabule jamais ne le verra jamais. Une page qui veut son propre anneau garde la main : sa regle est plus specifique que celles-ci, qui sont un PLANCHER et pas une decision. */ a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible, textarea:focus-visible,summary:focus-visible,[tabindex]:focus-visible{ outline:2px solid var(--vif-clair);outline-offset:2px;border-radius:3px} /* ── LA PORTE DES PROFESSIONNELS ───────────────────────────────────────────── Une boutique, un eleveur, un veterinaire qui tombe sur une fiche n a aujourd hui aucun moyen de dire qu il en est un. Le proprietaire a demande trois emplacements pour la meme porte : en haut a gauche, dans le menu, et discretement en pied de page. POURQUOI ELLE EST ICI ET PAS DANS CHAQUE PAGE. Elle va vivre sur quatorze surfaces ecrites a la main plus deux mille pages generees. C est exactement la forme qu avait la barre de navigation avant hier — ecrite cinq fois, cinq versions differentes — et celle de l accent avant-hier. Un seul jeu de regles ici, trois classes qui disent OU et pas QUOI. TROIS POIDS, UN SEUL MOT. « k-pro » est le bouton plein : c est la version du haut, celle qu on doit voir. « k-pro-tiroir » remplit la largeur du menu. « k-pro-discret » perd son fond et devient un lien d accent dans le pied — le mot « discret » vient de la demande, et il veut dire moins de poids, pas moins de clarte : la phrase reste entiere. LES DEUX MODIFICATEURS SONT PREFIXES, ET J AI APPRIS POURQUOI EN LE RATANT. Ma premiere version les appelait « menu » et « discret » tout court. L Atlas a deja une classe « .menu » — c est son tiroir de navigation, position:fixed, 300 px colle a droite — et le bouton l a prise pour lui : il est devenu un second tiroir de 1440 px pose en haut de la page, par-dessus le globe. L en-tete de ce fichier le disait deja quatre paragraphes plus haut, a propos des classes de base : « le prefixe fait que lier la feuille ne change RIEN tant qu on n a pas ecrit la classe quelque part ». La regle vaut aussi pour les modificateurs, et rien ne l avait notee. */ /* LA CLASSE EST DOUBLEE, ET C EST LA DEUXIEME LECON DE CE BOUTON. Le socle est lie AVANT le