/* ========================================================================== tokens.css — les variables de la charte (CHARTE §3.4) Aucune couleur ne doit etre ecrite en dur ailleurs que dans ce fichier. ========================================================================== 🔴 LA PRECEDENCE DES THEMES, ET POURQUOI ELLE N'EST PAS CELLE DU §3.4 CHARTE §2 demande deux choses incompatibles pour un visiteur dont le systeme est en clair : « sombre par defaut sur les pages marketing » et « preference systeme respectee ». `prefers-color-scheme` ne renvoie quasiment jamais `no-preference` en pratique — il resout en clair. L'un des deux devait ceder. Arbitrage retenu : le TYPE DE PAGE prime sur la preference systeme, et le choix explicite du visiteur prime sur tout. 1. data-theme (bascule manuelle, persistee en localStorage) 2. data-section (marketing -> sombre, doc -> clair) 3. prefers-color-scheme ── deliberement JAMAIS consulte La raison est au §6 : le fond des captures d'ecran (#2B2D30) est identique au fond du site en sombre, pour que la capture semble incrustee dans la page et non collee dessus. Un accueil clair portant des captures sombres detruit le dispositif central de la charte. Le blog, lui, reste clair : on ne lit pas 2 000 mots en blanc sur noir. ⚠️ Consequence : le bloc CSS invalide du §3.4 (une at-rule @media dans une liste de selecteurs) ne se corrige pas ici, il DISPARAIT. Plus de media query, donc plus de valeurs sombres ecrites deux fois comme le prevoyait le plan. Chaque palette n'est ecrite qu'une seule fois ci-dessous. Les deux blocs sont mutuellement exclusifs par construction — le `:not([data-theme])` du second garantit qu'un choix explicite desactive le defaut par type de page — et la specificite tranche les deux cas restants dans le bon sens. */ :root, :root[data-theme="light"] { --bg: #FFFFFF; --bg-subtle: #F6F8FA; --bg-elevated: #FFFFFF; --bg-code: #F6F8FA; --border: #D8DEE4; --border-muted: #E4E8EC; --fg: #1F2328; --fg-muted: #59636E; /* 🔴 ECART ASSUME AU CHARTE §3.2, impose par la mesure. Le §3.2 donne #1F6FEB pour le texte, les liens ET le fond de bouton en theme clair. Sur le blanc, ce bleu tient AA (4,6:1) ; sur --bg-subtle (#F6F8FA), le fond des cartes, il tombe a 4,35:1 et ECHOUE — or c'est exactement la ou vivent les liens du blog. La charte n'avait calcule ses ratios que contre le blanc. #0969DA remonte la combinaison a 4,87:1 sans changer de teinte percue. Le fond de bouton reste #1F6FEB : avec du texte blanc il tient AA. §3.3 tranche lui-meme le cas : « si une valeur diverge, c'est l'outil qui a raison ». TokenContrastTest est cet outil. */ --accent-text: #0969DA; --accent-solid: #1F6FEB; --accent-solid-hover: #1A5FCC; --accent-brand: #4E94CE; --on-accent: #FFFFFF; --success: #1A7F37; --warning: #9A6700; --danger: #CF222E; /* Coloration syntaxique, produite au rendu (CodeHighlighter). Les jetons vivent ici et non dans components.css : ce sont des couleurs, elles changent avec le theme, et le reste du fichier ne saurait plus les suivre. */ /* #6E7781 tiendrait AA sur le blanc mais pas sur --bg-code, qui est plus sombre. Un commentaire est du texte courant : il prend le seuil complet. */ --tok-comment: #57606A; --tok-tag: #0550AE; --tok-attr: #8250DF; --tok-str: #0A3069; --tok-cdata: #116329; --tok-entity: #953800; /* Le chrome du cadre de debogueur (W12-b). Voir le bloc commente plus bas. */ --ide-chrome: #ECEFF2; --ide-ligne: #F0F4FD; --ide-gouttiere: #697077; --ide-arret: #DB3B4B; /* La dalle du W12-c. En theme CLAIR elle est INVERSEE — voir le bloc commente plus bas, c'est tout l'interet du dispositif. */ --bg-dalle: #1F2328; --bg-dalle-relief: #31373E; --fg-dalle: #E9EDF1; --fg-dalle-muted: #B4BCC5; --border-dalle: #363B41; --accent-dalle: #79C0FF; color-scheme: light; } :root[data-section="marketing"]:not([data-theme]), :root[data-theme="dark"] { --bg: #2B2D30; --bg-subtle: #313335; --bg-elevated: #35383B; --bg-code: #232528; --border: #4B4E52; --border-muted: #3A3D41; --fg: #D6D6D6; --fg-muted: #A8ABAF; --accent-text: #79C0FF; --accent-solid: #1F6FEB; --accent-solid-hover: #1A5FCC; --accent-brand: #4E94CE; --on-accent: #FFFFFF; --success: #3FB950; --warning: #D29922; /* ⚠️ Ecart assume n°2, releve le 2026-08-10 au W3. #F85149 ne servait qu'a une BORDURE de callout, ou 3:1 suffit. Le W3 en fait du TEXTE — le message d'erreur d'un champ — et la il tombe a 4,12:1 sur --bg et 3,78:1 sur --bg-subtle : sous AA, sur la seule phrase que l'operateur doit absolument pouvoir lire quand quelque chose ne va pas. #FF7B72 donne 5,48:1 / 5,03:1 / 6,09:1 sur les trois fonds sombres. La combinaison est desormais dans TokenContrastTest : c'est l'ajout d'un usage — pas la couleur — qui avait rendu la valeur fausse. */ --danger: #FF7B72; --tok-comment: #8B949E; --tok-tag: #79C0FF; --tok-attr: #D2A8FF; --tok-str: #A5D6FF; --tok-cdata: #7EE787; --tok-entity: #FFA657; --ide-chrome: #3C3F41; --ide-ligne: #242A33; --ide-gouttiere: #8B949E; --ide-arret: #E05561; /* 🔴 EN THEME SOMBRE LA DALLE NE S'INVERSE PAS, ELLE CREUSE — ET ELLE CREUSE BEAUCOUP PLUS QUE CE QU'ON DESSINE SPONTANEMENT. Premiere valeur essayee au W12-c : #1E2023. Mesuree dans le navigateur, elle se detachait de --bg a 1,18:1 — la bande se lisait comme un accident de rendu, pas comme une rupture, et c'est le theme PAR DEFAUT des pages marketing. Les ecarts sombre-sur-sombre sont compresses par la formule : --bg-code lui-meme n'est qu'a 1,11:1 de --bg, et il ne sert qu'a delimiter un bloc borde. Une bande sans bordure a besoin du double. #141619 donne 1,31:1, soit le meme saut que du fond de page a la barre de navigation, mais dans l'autre sens et sur toute la largeur. */ --bg-dalle: #141619; --bg-dalle-relief: #252A2E; --fg-dalle: #D6D6D6; --fg-dalle-muted: #A8ABAF; --border-dalle: #3A3D41; --accent-dalle: #79C0FF; color-scheme: dark; } /* -------------------------------------------------------------------------- ⚠️ UN TOKEN DE COULEUR EST PIEGE, ET SON NOM EST SON GARDE-FOU. --accent-brand (#4E94CE) est la couleur du produit, a ≈ 4,2:1 sur le fond sombre : elle ECHOUE en texte courant. Elle sert aux SURFACES et a l'identite, jamais au texte ni aux liens. Un test unitaire echoue si elle apparait dans une declaration `color:`. 🔴 IL Y EN AVAIT DEUX. --fg-meta-large (#7B8086 en sombre) a ete SUPPRIME au W12-e, et l'histoire vaut d'etre lue avant d'en reintroduire un semblable. Il plafonnait a 3,47:1 en sombre. On l'avait juge acceptable parce que sa classe `.meta-large` imposait 18 px — donc « grand texte », donc seuil 3,0. Le raisonnement etait faux : le grand texte de WCAG commence a 18,66 px EN GRAS ou 24 px en normal, et 18 px en graisse normale prend le seuil plein de 4,5. TokenContrastTest a donc verifie cette ligne au mauvais seuil depuis le W2 ; c'est Lighthouse, au W12-b, qui l'a vue. ⚠️ ET LE GARDE-FOU N'A PAS TENU. Le nom devait cantonner le token aux metadonnees en grand corps ; on l'a retrouve sur le chapo de TREIZE pages — c'est-a-dire sur du texte courant, exactement ce qu'il devait empecher. Un nom dissuade celui qui le lit, et personne ne relit tokens.css avant de reprendre la classe de la page d'a cote. Ce qui a ferme l'ecart n'est pas un meilleur nom, c'est la SUPPRESSION : le W12-e a mis les treize chapos sur `.chapo-plat` (--fg-muted), le token s'est retrouve sans aucun emploi, et un token qui n'existe pas ne peut plus etre mal employe. -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- LE CHROME DU CADRE DE DEBOGUEUR — W12-b Quatre tokens, et ils existent parce que le hero montre un IDE. Les valeurs sont celles de Darcula pour la barre (#3C3F41) : le visiteur cible passe sa journee dedans, et un chrome approximatif se remarque avant le contenu. 🔴 Les quatre sont dans TokenContrastTest, y compris les jetons de coloration POSES SUR --ide-ligne. C'est le piege de ce composant : la ligne courante est un fond supplementaire glisse sous du texte deja colore, donc chaque couleur de jeton y perd du contraste. --ide-ligne est pour cela un ecart minime de --bg-code (#242A33 contre #232528), et pas le bleu franc qu'on dessinerait spontanement : au-dela, --tok-comment tombe sous 4,5:1. --ide-arret ne porte pas de texte — c'est une pastille. Son seuil est celui d'un element graphique porteur de sens, 3:1, et il tient 4,1:1 sur la gouttiere dans les deux palettes. -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- LA DALLE — W12-c Six tokens pour UNE bande, et elle existe parce que l'accueil alignait neuf sections au meme fond, a la meme largeur, dans le meme sens de lecture. Le rythme d'une vitrine ne vient pas de ce que disent les sections : il vient de ce qui CHANGE entre elles. La dalle est le plus grand des changements disponibles — la bande saigne d'un bord a l'autre et retourne le contraste. 🔴 EN THEME CLAIR ELLE EST INVERSEE, et c'est le point. --bg-code (#F6F8FA) vaut exactement --bg-subtle en clair : une « dalle » posee dessus aurait ete indiscernable de la bande discrete d'a cote, donc un rythme ecrit dans le CSS et absent de l'ecran. #1F2328 est la valeur de --fg : la dalle est litteralement la page retournee, ce qui evite d'inventer une teinte de plus. ⚠️ Elle porte du texte, donc trois tokens de premier plan viennent avec — --fg-dalle, --fg-dalle-muted — et les six combinaisons sont dans TokenContrastTest, palette par palette. Le piege est le meme qu'a la ligne courante du cadre de debogueur : un fond nouveau glisse sous du texte existant ne se verifie nulle part tant que la paire n'est pas nommee. ⚠️ --border-dalle et pas --border : la bordure du theme clair (#D8DEE4) posee sur #1F2328 dessinerait un filet blanc autour de la bande. 🔴 --accent-dalle EXISTE PARCE QUE LE LIEN CASSE, et c'est le defaut qu'on ne voit pas en relisant : --accent-text vaut #0969DA en theme clair, soit 3,04:1 sur #1F2328 — sous AA. Un lien pose dans la bande serait donc illisible dans le seul theme ou l'on ne s'y attend pas. #79C0FF y tient 8,1:1. ⚠️ --bg-dalle-relief remappe --bg-subtle POUR LA DESCENDANCE de la dalle. Sans lui, une `.card` posee dans la bande garderait son fond #F6F8FA en clair, avec du texte --fg-dalle par-dessus : blanc sur blanc. Le cas n'est pas theorique — c'est `.price` sur /tarifs. Il doit se detacher de la dalle d'au moins 1,25:1 — une carte dont le fond ne se distingue pas n'a plus qu'un filet de --border-dalle pour exister, et il est discret par construction. 🔴 LA DALLE EST L'ENDROIT DE LA PLUS GRANDE CAPTURE, et c'est le §6 qui le veut : une capture doit sembler « incrustee dans la page » et non « collee dessus ». Un fond sombre uni et --shadow-produit sont exactement ce qui distingue les deux — l'ombre n'existe visuellement que la. La bande est donc le seul endroit du site ou l'image passe la largeur de .prose. -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- 🔴 ELEVATION ET LUMIERE — amendement du CHARTE §2.5, 12 aout 2026 (W12-a) Le §2.5 disait « bordures plutot qu'ombres », et c'est juste POUR LES COMPOSANTS D'INTERFACE : en theme sombre une ombre ne se voit pas, c'est le filet a 1 px qui separe une carte de son fond. La regle a ete appliquee a TOUT, y compris aux pages marketing, et le resultat est une suite de rectangles plats a filet gris — l'esthetique d'un panneau d'administration. L'amendement restreint la regle a ce qu'elle protegeait vraiment : • cartes, champs, barre de navigation, encadres -> bordure, jamais d'ombre • LE VISUEL PRODUIT (capture, cadre de debogueur, boucle du hero) -> elevation La raison n'est pas decorative. Le §6 demande qu'une capture semble « incrustee dans la page » et non « collee dessus » — et c'est justement une ombre portee qui distingue les deux. Un rectangle a filet de 1 px pose sur un fond de la meme couleur est colle ; un objet qui projette est incruste. ⚠️ Ces deux tokens ne sont pas des couleurs et n'entrent donc pas dans TokenContrastTest : ils ne portent jamais de texte. --bg-elevated, lui, en porte, et il est verifie dans les deux palettes. -------------------------------------------------------------------------- */ :root { /* Reservee au visuel produit. Large, basse, tres diffuse : une ombre courte et dure ferait « bouton des annees 2010 ». */ --shadow-produit: 0 24px 64px -16px rgba(0, 0, 0, .28), 0 2px 8px rgba(0, 0, 0, .12); /* La source de lumiere du hero. C'est le seul emploi de --accent-brand en SURFACE que la charte autorise (§3.3 l'interdit au texte, jamais au fond), et il est volontairement tres dilue : au-dela de ~25 % on retombe sur le degrade colore que le §1.1 s'interdit. */ --halo-teinte: color-mix(in srgb, var(--accent-brand) 20%, transparent); --halo: radial-gradient(60% 55% at 50% 0%, var(--halo-teinte), transparent 72%); } :root[data-section="marketing"]:not([data-theme]), :root[data-theme="dark"] { /* Sur fond sombre une ombre doit etre franchement plus dense pour exister. */ --shadow-produit: 0 28px 72px -16px rgba(0, 0, 0, .62), 0 2px 10px rgba(0, 0, 0, .38); } :root { --radius: 6px; --radius-sm: 4px; --radius-lg: 10px; --space: 8px; /* 🔴 58ch, ET PAS 68 — corrige au W12-f apres mesure dans le navigateur. `ch` est l'avance du chiffre `0`, pas celle d'un caractere moyen. Dans Inter a 17 px, le `0` fait 10,7 px quand la prose francaise en pese 8,4 : `68ch` rendait une colonne de 772 px qui tenait 92 a 99 caracteres reels, mesures sur trois phrases de /fr/aide/faq. Le §4 annoncait 68, base.css affirmait que ce jeton l'appliquait, le PLAN le repetait — les trois se trompaient de 40 %, et aucune relecture ne pouvait le voir : il fallait mesurer. Meme forme qu'au W12-e : un jeton dont le NOM affirme une regle que sa VALEUR n'applique pas. ⚠️ 58ch vaut ~620 px, soit ~74 caracteres — dans la fourchette 45–75, sans les 200 px de retrecissement brutal qu'aurait coute la cible exacte de 68. Le §4 dit desormais 74, qui est le nombre vrai. */ --maxw-prose: 58ch; /* 🔴 UN BLOC DE CODE N'EST PAS DE LA PROSE — W12-f. Sa longueur de ligne est celle de son CONTENU, pas celle de l'oeil : une ligne coupee ne se lit pas « un peu moins bien », elle ne se lit pas. Le retrecissement de --maxw-prose a fait deborder les deux blocs de caviardage de /aide/signaler-un-probleme — 74 caracteres pour 67 tenus — et ce sont precisement ceux sur lesquels repose l'argument de la page : montrer ce qu'on efface. Ils passaient avant, ils ne passaient plus. 74 caracteres de mono a 14,5 px font 644 px, plus 32 px de retrait interne et 2 px de filet. Le bloc deborde donc la colonne de prose vers la droite, ou il n'y a que du vide, et --maxw-page le borne bien avant le bord. */ --maxw-code: 680px; --maxw-page: 1200px; --nav-height: 64px; /* Respiration verticale d'une section. Redefinie par .section--tight et .section--loose, jamais ecrite en dur dans un composant. */ --section-pad: calc(var(--space) * 12); --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace; /* CHARTE §5.1 : une seule courbe, une seule duree de reference. */ --ease: cubic-bezier(.2, 0, 0, 1); --dur: 320ms; }