/* ========================================================================= DESTOCK COIFF, JETONS. Première couche du module 0. Elle porte la palette et les polices, et rien d'autre : aucune règle de mise en page ne vit ici. ----------------------------------------------------------------- D'OÙ VIENNENT CES VALEURS ----------------------------------------------------------------- De `destock-coiff-accueil (1).html`, page composée ailleurs et retenue par Karim le 14 août 2026 comme référence du DNA urbain. Elle remplace le DNA 8 que j'avais écrit, jugé raté sur les couleurs et sur les polices. La référence écrit ses valeurs en dur sous d'autres noms. Le travail fait ici est la traduction dans les jetons du kit, pour que le socle et la feuille de DNA les consomment sans rien savoir de ce client : référence jeton du kit valeur --paper --fond #FFFFFF --stone --fond-section #F2F1EF --ink --sombre, --encre #101012 --stone-line --bord #E2E1DE --grey --gris #686A70 voir plus bas --brass --accent #D42027 --brass-light --accent-sur-sombre #F0474D ----------------------------------------------------------------- CE QUI A ÉTÉ CORRIGÉ EN CHEMIN, ET POURQUOI ----------------------------------------------------------------- **Le gris de corps est descendu de `#6E7076` à `#686A70`.** Le gris de la référence tient sur le papier blanc, 4,95, mais tombe à **4,39** sur le fond pierre `#F2F1EF`, sous le seuil AA. Or la référence l'emploie sur les deux : la section catalogue et la section FAQ sont sur pierre. Assombri de trois crans il rend 5,41 sur papier et 4,79 sur pierre, et l'écart n'est pas visible à l'œil. **Le rouge reste un couple, et la référence le savait déjà.** `#D42027` sur l'encre `#101012` ne fait que 3,65. C'est pourquoi la référence porte un second rouge, `--brass-light`, pour ses blocs sombres. Les deux jetons du kit, `--accent` et `--accent-sur-sombre`, portent exactement cette paire. #D42027 texte sur papier 5,20 #D42027 texte sur pierre 4,61 #D42027 fond de bouton, blanc 5,20 #F0474D texte sur encre 5,17 **Les filets sont dédoublés.** `#E2E1DE` sur du blanc ne fait que 1,31. C'est juste pour un filet décoratif qui délimite une carte, mais pas pour la bordure d'un bouton, qui est un composant d'interface au seuil de 3:1. La référence tranche déjà ainsi sans le nommer : ses cartes sont bordées de `--stone-line`, ses boutons de `--ink`. D'où deux jetons, `--bord` pour le trait qui délimite, `--bord-fort` pour celui qu'on doit pouvoir viser. ----------------------------------------------------------------- POLICES, QUATRE FAMILLES ET UN RÔLE CHACUNE ----------------------------------------------------------------- DM Sans titres, boutons, navigation, étiquettes Source Sans 3 corps de texte Instrument Serif italique, l'accent éditorial d'un titre DM Mono détails techniques : téléphone, références, tags La quatrième est ce qui distinguait le plus la référence de ce que j'avais écrit : un mot en serif italique dans un titre par ailleurs sans empattement, et un mono réservé à ce qui est un identifiant. La feuille Google Fonts est appelée depuis `wl_business_data`, champ `polices`, et non en @import ici : un @import est bloquant et sérialisé, c'est un levier de Core Web Vitals du palier Premium. ========================================================================= */ :root{ /* --- Polices --------------------------------------------------- */ --titre:'DM Sans', system-ui, sans-serif; --corps:'Source Sans 3', system-ui, -apple-system, sans-serif; --edito:'Instrument Serif', Georgia, serif; --mono:'DM Mono', ui-monospace, monospace; /* --- Les trois fonds -------------------------------------------- */ --fond:#FFFFFF; --fond-section:#F2F1EF; --fond-carte:#FFFFFF; --sombre:#101012; --sombre-doux:#26262A; --pied:#0F1113; /* --- Encres ----------------------------------------------------- */ --encre:#101012; /* 19,01 sur papier, 16,84 sur pierre */ --gris:#686A70; /* 5,41 sur papier, 4,79 sur pierre */ --sur-sombre:#FFFFFF; /* 19,01 sur l'encre */ --sur-sombre-doux:#B4B7BC;/* 9,45 sur l'encre */ --sur-pied:#9DA1A6; /* 7,28 sur le pied */ /* Encres de repli, employées par le socle quand une section claire inverse ses jetons. Sur ce DNA le fond est déjà clair : elles valent donc les mêmes que les principales. */ --encre-sur-clair:#101012; --gris-sur-clair:#686A70; /* --- Le couple rouge -------------------------------------------- */ --accent:#D42027; --accent-2:#D42027; --accent-sur-sombre:#F0474D; --accent-texte:#D42027; --sur-accent:#FFFFFF; --sur-accent-clair:#FFFFFF; --accent2-texte:#D42027; --accent2-sur-sombre:#F0474D; --sur-accent-2:#FFFFFF; /* Le DNA 6 peint .btn-action avec ce jeton. Aplati sur l'encre : le bouton principal de la référence est encre, et vire au rouge au survol. */ --degrade-orange:#101012; /* --- Filets ------------------------------------------------------ */ --bord:#E2E1DE; /* délimite une carte, décoratif */ --bord-doux:#EDECEA; /* séparation interne, plus discrète encore */ --bord-fort:#101012; /* bordure de composant, seuil 3:1 tenu */ /* --- Formes ------------------------------------------------------ La référence arrondit peu mais arrondit : 6 px sur les cartes, 5 px sur les boutons, 3 px sur les badges. C'est l'inverse exact du DNA 8 précédent, qui proscrivait tout arrondi. */ --rayon:6px; --rayon-btn:5px; --rayon-petit:3px; --marge:clamp(20px,4vw,72px); --voile:rgba(22,24,28,.82); --voile-photo:linear-gradient(180deg,rgba(22,24,28,.10) 0%,rgba(22,24,28,.45) 100%); --ombre:0 18px 44px rgba(22,24,28,.12); --ombre-forte:0 24px 60px rgba(22,24,28,.16); --ombre-mobile:0 -8px 24px rgba(22,24,28,.10); }