/* ============================================================================ Sitalio — couche de tokens de couleur (source unique) Avant ce fichier : 2 pages sur 9 avaient un bloc :root, les 7 autres zéro, et index.html portait 382 littéraux hexadécimaux pour 73 valeurs distinctes. Conséquence concrète : corriger UNE couleur de texte demandait des centaines d'éditions dispersées. Désormais c'est une ligne, ici. PÉRIMÈTRE — couleurs SYSTÈME uniquement (marque, surfaces, texte, bordures). Les couleurs des vignettes de démo d'index.html (#C9A96A, #5A2A34, #7AB87A, #141414, #E0685C…) restent volontairement en littéral : chaque vignette imite la marque d'un commerce différent. C'est du CONTENU, pas du système — les regrouper créerait de faux liens entre des démos indépendantes. Règle d'entrée : une valeur devient un token à partir de 3 usages de même intention. Les exceptions sont annotées. RATIOS DE CONTRASTE — mesurés sur le fond crème #FAF6EF (formule WCAG, luminance relative sRGB). Seuils : 4,5:1 pour du texte courant, 3:1 pour du grand texte et pour la bordure d'un composant (SC 1.4.3 / 1.4.11). Tous les tokens de texte respectent désormais leur seuil — les six qui échouaient ont été corrigés ici, sans retoucher une seule page. C'était tout l'intérêt de la couche : l'ancienne correction aurait demandé des centaines d'éditions dispersées. Chaque token porte son ratio et son ancienne valeur. ========================================================================== */ :root{ /* Site volontairement clair : sans cette déclaration, les navigateurs in-app (Facebook, Instagram, LinkedIn) en mode sombre assombrissent les contrôles natifs alors que les couleurs de texte restent sombres → saisie illisible. */ color-scheme:light; /* --- Surfaces ---------------------------------------------------------- */ --cream:#FAF6EF; /* fond de page 38 usages / 9 pages */ --card:#FFFDF8; /* fond de carte 34 usages / 9 pages */ --cream-2:#F3E2C8; /* crème accent : barres du logo, 41 usages / 9 pages texte sur fonds sombres */ --terra-soft:#FBF1E7; /* surface sélectionnée / terracotta 9 usages / 3 pages adouci (choix cochés, cartes actives) */ --btn-2:#EFE6D6; /* bouton secondaire 4 usages / 2 pages */ --btn-2-hover:#E6D9C2; /* survol du bouton secondaire 2 usages / 2 pages EXCEPTION à la règle des 3 usages : tokeniser une base sans son état de survol serait incohérent. */ /* --- Texte ------------------------------------------------------------- */ --ink:#221C13; /* texte principal 15,68:1 ✓ 109 usages / 9 pages */ --ink-2:#3A3226; /* texte secondaire 11,71:1 ✓ 17 usages / 7 pages */ --muted:#6B6052; /* texte atténué 5,70:1 ✓ 14 usages / 3 pages */ --muted-2:#797062; /* texte discret 4,53:1 ✓ 40 usages / 9 pages hints, mentions RGPD, suffixes de prix, « (optionnel) » était #8A8070 (3,61:1) */ /* Les trois tokens suivants portaient chacun un gris différent — et tous les trois échouaient. Ils sont désormais alignés sur --muted-2 plutôt que ré-assombris séparément : une fois amenés au seuil de 4,5:1, leurs valeurs conformes respectives (#777062, #7D7465, #7E6F56) sont à un ratio de 1,00 les unes des autres — donc indistinguables à l'œil. Quatre gris pour un seul travail visuel n'avaient plus de raison d'être. Les NOMS sont conservés : aucune page n'a besoin d'être retouchée, et ils peuvent rediverger plus tard si une raison apparaît. */ --muted-3:var(--muted-2); /* liens légaux de pied de page 29 usages / 9 pages était #9A917F (2,90:1) */ --muted-4:var(--muted-2); /* mentions de prix 3 usages / 1 page était #9A8F7C (3,13:1) */ --muted-warm:var(--muted-2); /* légendes en italique 8 usages / 1 page était #8A7A5E (3,88:1) */ /* --- Marque ------------------------------------------------------------ */ --terra:#B5502A; /* terracotta, accent principal 132 usages / 9 pages 4,70:1 sur crème ✓ (texte et bordures) */ --terra-dark:#93401F; /* terracotta foncé, survols 33 usages / 8 pages */ --gold:#D9A441; /* or, éléments DÉCORATIFS 5 usages / 3 pages non concerné par 1.4.3 : jamais du texte */ --gold-text:#936A23; /* or en TEXTE 4,51:1 ✓ 16 usages / 1 page « offert », « 2 minutes », « jour 7 », coches ✓ était #C08A2D (2,82:1). Plus bronze que doré, mais ces coches sont en 14px gras — donc PAS du « grand texte » au sens WCAG (il faut ≥18,66px gras), le seuil de 4,5:1 s'applique pleinement. C'est précisément pour ça que ce token est distinct de --gold : le décoratif garde l'or vif. */ --on-terra:#FFF6ED; /* texte posé SUR le terracotta 23 usages / 6 pages (11,2:1 sur #B5502A ✓) */ /* --- Bordures et champs ------------------------------------------------ */ --line:rgba(34,28,19,.12); /* filets et séparateurs */ --field:#FAF6EF; /* fond de champ (= --cream aujourd'hui, token distinct pour pouvoir diverger) */ --field-line:rgba(34,28,19,.50); /* bordure de champ 3,22:1 ✓ était .18 → 1,44:1 : crème sur crème, on ne voyait pas où taper. SC 1.4.11 exige 3:1 pour la bordure d'un composant. Il faut bien .50 : .42 ne donne que 2,59:1 (composite #9F9A93 sur crème). */ } /* ---------------------------------------------------------------------------- HIÉRARCHIE DU TEXTE ATTÉNUÉ — deux niveaux, plus quatre --muted (#6B6052, 5,70:1) puis --muted-2 (#797062, 4,53:1). L'écart entre les deux est de 1,26 : subtil mais perceptible, donc la hiérarchie tient encore par la couleur. Au-delà, il n'y a plus de place : la limite pour rester à 4,5:1 sur le crème est une luminance relative de 0,167, et --muted-2 est déjà à 0,166. Tout gris plus clair échouerait. La hiérarchie au-delà de ces deux niveaux passe donc par la TAILLE et la GRAISSE (14,5px pour les libellés, 13,5px pour les hints, 12,5px pour les notes de pied de page), ce que le site fait déjà. LIMITE CONNUE, non traitée ici : le micro-texte décoratif des vignettes de démo (6,5 à 9,5px, ratios 2,2 à 3,8) reste non conforme. C'est du CONTENU de capture d'écran — l'image d'un site, pas de l'interface — donc 1.4.3 ne s'y applique pas raisonnablement. Le vrai défaut est qu'à ≤820px les cartes passent pleine largeur alors que ce texte reste à 6,5px : c'est un sujet de mise en page, pas de contraste. -------------------------------------------------------------------------- */