/** Shopify CDN: Minification failed Line 197:11 Expected ":" Line 198:78 Unterminated string token Line 199:75 Unterminated string token **/ /* ========================================================================== WATTLEFOLD — TOKENS Source de vérité du système visuel. Consommé par le thème. design-lead · 03/08/2026 · L2.5 Canon : docs/03-direction-artistique.md ========================================================================== CE QUE CE FICHIER EST Des valeurs, et le minimum d'infrastructure qui les rend utilisables : les @font-face, la bascule de surface, et les préférences utilisateur. Aucun sélecteur de composant. Aucune règle de mise en page. CE QU'IL INTERDIT 1. Aucune valeur littérale de couleur, de taille, d'ombre, de rayon ou de durée ailleurs dans le thème. Si un token manque, il se demande — il ne s'improvise pas (docs/03 §7). C'est la seule chose qui empêche un site de finir « composite », et « composite » est exactement l'impression que donne un site généré. 2. Aucune ressource externe. Pas de CDN, pas de police distante, pas d'import. Les deux familles sont auto-hébergées dans assets/. CONTRÔLE EXÉCUTABLE python3 design/tokens/verif-contraste.py 64 couples calculés, 0 échec, 8 exemptions écrites. Toute couleur ajoutée ici doit d'abord passer par ce script. ========================================================================== */ /* -------------------------------------------------------------------------- 1. LES DEUX CARACTÈRES -------------------------------------------------------------------------- Deux familles, quatre graisses en tout. Pas de troisième famille : les chiffres sont composés en Public Sans avec `font-variant-numeric`, ce qui évite un fichier de police entier et garde une seule voix aux données. LIBRE CASLON TEXT — SIL OFL 1.1, Pablo Impallari & Rodrigo Fuenzalida. Rôle : ce qui se lit lentement. Pourquoi elle, et pourquoi elle REMPLACE Literata en L2.6 : Caslon (William Caslon, Londres, 1722) est le caractère dans lequel a été composé à peu près tout document commercial anglais entre 1750 et 1900. C'est la voix de lecture du monde où vit cette marque — une maison de textile britannique — et c'était précisément ce qui manquait : le mot-symbole parlait une langue, la page en parlait une autre. Ce n'est pas une décision d'ambiance, elle est mesurée. Hauteur d'œil 0,524 em contre 0,507 em pour Literata : à 18 px, Libre Caslon Text lit PLUS GRAND, pas plus petit. Epreuve rendue et comparée en situation le 03/08/2026. Libre Caslon Text est de surcroît dessinée pour le texte d'écran, pas pour l'affiche — Libre Caslon Display, sa sœur, sert au mot-symbole et à lui seul. Literata reste une excellente fonte : elle était simplement la voix de personne. PUBLIC SANS — SIL OFL 1.1, U.S. Web Design System, d'après Libre Franklin. Rôle : ce qui se scanne et ce sur quoi on agit. Pourquoi elle : dessinée pour des formulaires, des étiquettes et des données administratives denses. Le 1, le l et le I s'y distinguent, le 0 et le O aussi — ça compte quand on publie 160 W, 180 × 130 cm, £149 et un numéro de commande. Elle porte des chiffres tabulaires. Registre « imprimé technique », pas « interface de start-up ». ÉCARTÉES, et pourquoi : Inter (police par défaut de tout le web généré, interdite par docs/03 §3.2), Poppins et Montserrat (mêmes motifs), Fraunces (excellente, mais reconnaissable au premier coup d'œil comme le serif DTC de 2021 — l'interdit « police à la mode identifiable » la vise), IBM Plex (identifiable comme IBM), Playfair Display (le serif de 2019 de toutes les boutiques Shopify), Literata (voir ci-dessus : juste, mais sans lieu). DETTE CONNUE, non masquée : les WOFF2 ne sont pas encore dans assets/. Les piles de repli ci-dessous fonctionnent seules. Il manque la surcharge de métriques (`size-adjust`, `ascent-override`) qui annulerait le décalage de mise en page au moment du basculement : elle exige de MESURER les fichiers réels, et on ne fabrique pas un chiffre qu'on n'a pas mesuré. Ticket ouvert dans docs/03 §9. -------------------------------------------------------------------------- */ @font-face { font-family: "Libre Caslon Text"; src: url("libre-caslon-text-var.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20A0-20BF, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Libre Caslon Text"; src: url("libre-caslon-text-var-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: "Libre Caslon Text"; src: url("libre-caslon-text-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "Public Sans"; src: url("public-sans-var.woff2") format("woff2-variations"), url("public-sans-var.woff2") format("woff2"); font-weight: 300 700; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20A0-20BF, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } :root { /* ======================================================================== 2. COULEUR ======================================================================== Territoire : le tressage, l'abri, le crépuscule, le métier (docs/12 §3). Une maison de textile, pas une marque d'électroménager. LE PARTI, en une phrase : un sol chaud qui porte toute la chaleur, une encre brune profonde, et UN accent froid et profond — la guède. Pourquoi la guède (Isatis tinctoria) et pas autre chose. C'est le bleu tiré de la plante avec laquelle on teint le textile en Grande-Bretagne depuis l'âge du fer — le même horizon que le clayonnage du nom (6 000 ans, docs/12 §3.1). C'est une couleur de teinturier, pas une couleur d'appareil. Elle exclut d'un coup tout ce qu'il fallait exclure : le vert et or (qui ferait de nous une marque australienne aux yeux du UK et des US, docs/12 §8), la flamme, le soleil, le dégradé orange — le vocabulaire exact des boutiques à 35 £ (docs/11, territoire T4). Et surtout : le froid de l'accent rend le sol plus chaud. Une marque de chauffage qui met du orange partout ne réchauffe rien, elle crie. La chaleur vient du fond (docs/03 §3.1) ; l'accent sert à agir. ------------------------------------------------------------------------ */ /* --- 2.1 Les sols. LA LAINE ÉCRUE, avant teinture. C'est le point où la DA de L2.6 se sépare de celle de L2.5. La première version employait un blanc éditorial très légèrement réchauffé (#F2EDE5, chroma 5 %). Ce n'est pas le sol de ce monde : une maison de textile britannique n'a pas de blanc, elle a de la laine non teinte. Le sol est donc RELEVÉ SUR LA PRISE DE VUE RÉELLE — le fond de la table de packshot de `design/images/OB20201-charcoal/` mesure #ECDFCB dans l'ombre et #F6EBD8 dans la lumière. Le sol de la page est posé entre les deux. Conséquence directe et visible : un packshot posé sur la page n'a plus de bord. La photo et la page sont la même matière. Trois valeurs, pas six : au-delà, une page devient un dégradé de gris et plus personne ne sait ce qui est au-dessus de quoi. */ --wf-ground: #F1E8D8; /* la page — laine écrue */ --wf-ground-raised: #FAF4E8; /* posé dessus : carte, champ. Lin blanchi, jamais du blanc */ --wf-ground-sunk: #E3D8C3; /* creusé : puits, rayure de tableau */ /* --- 2.2 Les encres. Aucun noir pur : l'encre de ce monde est ferro- gallique, donc brun-noir. Les trois passent 4.5:1 sur les TROIS sols — aucune n'est réservée à un fond particulier, donc aucune ne peut être mal employée. */ --wf-ink: #221E19; /* texte courant, titres 13.63:1 */ --wf-ink-muted: #544B3C; /* texte secondaire, légendes 7.05:1 */ --wf-ink-quiet: #635946; /* méta, mentions, unités 5.67:1 */ /* --- 2.3 Les filets. DEUX RÔLES, et ils ne sont pas interchangeables. C'est le point où la plupart des systèmes se trompent : ils font un seul gris de bordure, trop clair pour un champ de saisie ou trop sombre pour une séparation de paragraphe. Ils sont maintenant chromatiques : sur un sol de laine, un filet gris neutre se lit comme une impureté. Ceux-ci se lisent comme un fil. */ --wf-rule: #D2C4A9; /* séparation typographique. Décoratif. Exempt de 1.4.11 : ne porte aucune information. NE BORDE JAMAIS UN COMPOSANT. */ --wf-rule-strong: #AC9C7F; /* lignes d'un tableau technique. Idem. */ --wf-border: #786D58; /* frontière de composant : champ de saisie, case, onglet, pastille, carte cliquable. 4.19:1 / 4.65:1 / 3.60:1 sur les trois sols. CALCULÉ, exigé par 1.4.11. */ /* --- 2.4 L'accent. UN seul, et il ne sert qu'à agir : bouton principal, lien, état sélectionné, anneau de focus. Aucune surface décorative n'est teintée en accent — un accent qui apparaît partout n'est plus un accent (docs/03 §3.1). Il n'existe volontairement AUCUN `accent-tint` : sur un sol chaud, un lavis bleu clair vire au sale, et une zone « teintée accent » est toujours mieux dite par `ground-sunk` + un filet. Un token en moins est une dérive en moins. */ L2.6 déplace la guède vers sa valeur de TEINTURE : #22406E était un bleu marine d'imprimerie, propre mais neutre. La guède sur laine est plus grise et plus profonde — c'est la différence entre un bleu pantone et un bleu de cuve. */ --wf-accent: #26455F; /* guède sur laine 8.23:1 */ --wf-accent-strong: #152C40; /* survol, appui, visité 11.78:1 */ /* --- 2.5 Le champ sombre. C'est la surface sombre de la marque, et L2.6 en change la nature. En L2.5 c'était un bleu-noir de crépuscule (#1B222E) : joli, mais c'est un ciel, donc un décor. Ici c'est LA MATIÈRE — l'anthracite du plaid lui-même, relevé sur la prise de vue (#37363B / #3D3C40 / #343337 dans `04-material.jpg`) et poussé au noir de laine galloise. Le gain n'est pas décoratif : une surface sombre bleutée derrière une photo de flanelle anthracite crée deux gris qui se disputent. Une surface sombre qui EST la matière encadre la photo au lieu de la concurrencer. Et le grain (§7) y devient un poil de laine, pas un bruit d'écran. Elle est COMPOSÉE, jamais activée par une bascule : elle porte le module « ce que ça coûte » et le pied de page, et c'est tout. Voir §9 pour la bascule de surface. */ --wf-field: #242220; --wf-field-raised: #2F2C29; --wf-field-ink: #F1E8D8; /* la laine écrue, exactement 13.04:1 */ --wf-field-muted: #A8A093; /* 6.13:1 */ --wf-field-rule: #403B34; /* décoratif. Exempt, comme --wf-rule. */ --wf-field-border: #82796A; /* frontière de composant. 3.69:1 */ --wf-field-accent: #9FB9D2; /* la guède éclaircie pour le sombre 7.81:1 */ /* --- 2.6 Sémantiques. Chacune existe en encre + en lavis, et le lavis supporte l'encre courante : c'est ce qui permet d'écrire un message d'erreur complet sans inventer de couleur. L2.6 déplace `danger` du brique (#9B2C1E) vers un rouge de cuve plus sombre et plus bleu. Motif écrit : sur un sol de laine écrue, un rouge brique est une couleur de MARQUE dans ce monde (le fil de lisière, la garance) — l'employer pour l'erreur rendait les deux indiscernables. Voir aussi §2.9 : la garance a été examinée comme accent secondaire et refusée pour cette raison exacte. */ --wf-ok: #33583C; /* 6.64:1 */ --wf-ok-tint: #E1E8DA; --wf-warn: #7A5210; /* 5.68:1 */ --wf-warn-tint: #F3E6C9; --wf-danger: #8E2437; /* 7.03:1 */ --wf-danger-tint: #F4E2E1; /* --- 2.7 L'échelle thermique. RÉSERVÉE aux données de température MESURÉES, et posée uniquement sur le champ crépusculaire, où chaque cran est calculé ≥ 3:1 (1.4.11). Jamais décorative. Jamais un état d'interface. DÉCISION, et elle est structurante : les NEUF NIVEAUX du contrôleur ne sont PAS codés en couleur. Ils sont dessinés en barres de hauteur croissante à l'encre, le niveau retenu étant marqué à l'accent. Un nuancier arc-en-ciel du jaune au rouge est le langage exact des boutiques à 35 £, et il oblige à distinguer neuf teintes voisines — ce qu'un daltonien ne peut pas faire (1.4.1). Une intensité se dit par une longueur et un chiffre. */ --wf-heat-1: #A96126; /* 3.34:1 / champ */ --wf-heat-2: #C57433; /* 4.47:1 */ --wf-heat-3: #D0956A; /* 6.18:1 */ --wf-heat-4: #DCB699; /* 8.45:1 */ --wf-heat-5: #E9D3C1; /* 10.99:1 */ /* --- 2.8 Les coloris produit (docs/12 §6.4). Le charbon est désormais RELEVÉ SUR NOS PROPRES PRISES DE VUE et non plus sur les planches fournisseur : #37363B / #3D3C40 / #343337 mesurés sur `OB20201-charcoal-01-packshot.jpg` et `-04-material.jpg`, moyenne #3A393E. Il est légèrement FROID, ce qui est contre-intuitif sur une page chaude et qui est un fait, pas un choix. Les quatre autres restent à réétalonner quand leurs prises de vue existeront (L4.1). RÈGLE D'EMPLOI : toute pastille est ceinte de --wf-border (4.19:1) et le nom du coloris est TOUJOURS écrit en clair à côté. La couleur seule ne dit jamais rien (1.4.1). */ --wf-swatch-oatmeal: #D9C9AC; --wf-swatch-charcoal: #3A393E; --wf-swatch-moss: #4C5541; --wf-swatch-rust: #8C4A2C; --wf-swatch-slate: #6B7883; /* --- 2.9 CE QUI N'ENTRE PAS, et c'est une décision, pas un oubli. LA GARANDE (madder, Rubia tinctorum) — le rouge brique du fil de lisière, la couleur la plus reconnaissable d'une couverture galloise. Elle a été calculée (#9E3A22, 5.60:1 sur le sol) et REFUSÉE pour deux motifs : 1. Elle est à 1.25:1 de `--wf-danger`. Deux rouges de même valeur dans un même système, l'un décoratif et l'autre porteur d'erreur, c'est une confusion sémantique qu'aucune règle d'usage ne rattrape. 2. Laine écrue + rouge brique est la formule exacte du pastiche « fermette ». Johnstons et Melin Tregwynt sont RAFFINÉS, pas rustiques ; la différence entre l'héritage et le déguisement se joue précisément là. Ce qui porte la matière à sa place : les rapports d'épaisseur de la lisière, la trame (§7), et la photographie. Pas une seconde couleur. */ /* ======================================================================== 3. TYPOGRAPHIE ======================================================================== */ --wf-face-display: "Libre Caslon Text", "Iowan Old Style", Baskerville, "Palatino Linotype", Palatino, Georgia, serif; --wf-face-text: "Public Sans", "Helvetica Neue", Helvetica, Arial, "Segoe UI", sans-serif; /* --- 3.1 La règle d'emploi, en une ligne, applicable sans m'appeler : --wf-face-display pour ce qui se LIT (promesse, titres, chapeaux, prose éditoriale). --wf-face-text pour ce qui se SCANNE ou sur quoi on AGIT (interface, boutons, étiquettes, tableaux, formulaires, navigation, mentions légales). */ /* --- 3.2 Quatre graisses en tout. Pas cinq. */ --wf-w-regular: 400; /* prose, texte courant */ --wf-w-medium: 500; /* étiquettes, en-têtes de tableau, emphase faible */ --wf-w-semibold: 600; /* titres, boutons, chiffres mis en avant */ --wf-w-bold: 700; /* réservé : promesse du héros, et rien d'autre */ /* --- 3.3 L'échelle. À RAISON CROISSANTE, de 1,125 dans le texte à 1,36 en display. Une échelle à raison constante (le 1,25 appliqué huit fois) produit des titres énormes et des textes serrés : c'est le réglage par défaut des générateurs, et ça se voit. Les tailles de TEXTE sont fixes — jamais fluides : une taille fluide descend sous 16 px sur petit écran et casse le rythme vertical. Seules les tailles de DISPLAY sont fluides. */ --wf-t--2: 0.75rem; /* 12 — mentions, unités, notes de bas de tableau */ --wf-t--1: 0.875rem; /* 14 — étiquettes, méta, valeurs de spécification */ --wf-t-0: 1rem; /* 16 — texte courant. Ne descend jamais en dessous. */ --wf-t-1: 1.125rem; /* 18 — chapeau, texte long en pleine mesure */ --wf-t-2: 1.3125rem; /* 21 — sous-titre, intertitre */ --wf-t-3: 1.625rem; /* 26 — titre de bloc */ --wf-t-4: clamp(1.75rem, 1.35rem + 1.7vw, 2.0625rem); /* 28 → 33 */ --wf-t-5: clamp(2.0625rem, 1.5rem + 2.6vw, 2.625rem); /* 33 → 42 */ --wf-t-6: clamp(2.5rem, 1.7rem + 3.9vw, 3.5rem); /* 40 → 56 */ --wf-t-7: clamp(3rem, 1.8rem + 5.6vw, 4.75rem); /* 48 → 76 */ /* --- 3.4 Interlignage. Il décroît quand la taille croît : un display à 1,6 se disloque, un texte à 1,1 s'étouffe. */ --wf-lh-display: 1.06; /* --wf-t-6, --wf-t-7 */ --wf-lh-title: 1.16; /* --wf-t-4, --wf-t-5 */ --wf-lh-sub: 1.3; /* --wf-t-2, --wf-t-3 */ --wf-lh-body: 1.6; /* --wf-t-0, --wf-t-1 */ --wf-lh-long: 1.68; /* prose éditoriale en pleine mesure */ --wf-lh-small: 1.45; /* --wf-t--1, --wf-t--2 */ --wf-lh-flat: 1; /* chiffre isolé, bouton, pastille */ /* --- 3.5 Approche. Le display se resserre optiquement ; le petit corps s'ouvre. La seule capitale espacée autorisée est le surtitre — un seul rôle, sinon la page se met à ressembler à un catalogue de 1998. */ --wf-ls-display: -0.016em; --wf-ls-title: -0.008em; --wf-ls-body: 0; --wf-ls-small: 0.006em; --wf-ls-eyebrow: 0.09em; /* surtitre en capitales. UN SEUL usage. */ /* --- 3.6 Mesure. Le blanc est un matériau (docs/03 §3.3). */ --wf-measure: 66ch; /* texte courant */ --wf-measure-lead: 48ch; /* chapeau, promesse */ --wf-measure-wide: 78ch; /* tableau de caractéristiques */ /* ======================================================================== 4. ESPACEMENT ======================================================================== Base 4 px. La progression n'est ni linéaire ni géométrique : elle est serrée là où l'on ajuste (2 → 24) et lâche là où l'on compose (32 → 176). C'est ce qui permet une densité de magazine sans devoir inventer de valeurs intermédiaires. RÈGLE D'EMPLOI : s-1 → s-4 à l'intérieur d'un composant (icône/texte, étiquette/champ) s-5 → s-7 entre les parties d'un composant s-8 → s-10 entre composants d'un même bloc s-11 → s-14 entre blocs, et rythme de section ------------------------------------------------------------------------ */ --wf-s-1: 2px; --wf-s-2: 4px; --wf-s-3: 8px; --wf-s-4: 12px; --wf-s-5: 16px; --wf-s-6: 20px; --wf-s-7: 24px; --wf-s-8: 32px; --wf-s-9: 40px; --wf-s-10: 56px; --wf-s-11: 72px; --wf-s-12: 96px; --wf-s-13: 128px; --wf-s-14: 176px; /* --- 4.1 Rythme vertical des sections. TROIS valeurs, et une règle dure : DEUX SECTIONS CONSÉCUTIVES N'UTILISENT JAMAIS LE MÊME RYTHME. Une page dont toutes les sections respirent à l'identique est une page empilée, pas une page composée — c'est la signature du gabarit (docs/03 §3.3). Cette règle est vérifiable en revue : on mesure. */ --wf-section-tight: clamp(3rem, 6vw, 4.5rem); /* 48 → 72 */ --wf-section: clamp(4rem, 9vw, 7rem); /* 64 → 112 */ --wf-section-wide: clamp(5.5rem, 13vw, 11rem); /* 88 → 176 */ /* ======================================================================== 5. GRILLE ET LARGEURS ======================================================================== TROIS largeurs, pas une. Une page à colonne unique est une page de gabarit ; une page composée alterne la colonne de texte, la colonne large et le plein bord (docs/07 §11.4). ------------------------------------------------------------------------ */ --wf-w-text: 42rem; /* 672 — prose, ~66ch en 18 px */ --wf-w-content: 75rem; /* 1200 — grille principale */ --wf-w-wide: 90rem; /* 1440 — image large, module énergie */ --wf-gutter: clamp(1rem, 4vw, 2rem); /* 16 → 32 */ --wf-grid-cols: 12; --wf-grid-gap: clamp(1rem, 2vw, 1.5rem); /* 16 → 24 */ /* ======================================================================== 6. RAYONS ======================================================================== TROIS valeurs, et le maximum est 4 px. Ce n'est pas une préférence, c'est une déduction : le mot-symbole est construit sur des flancs droits, des terminaisons coupées d'équerre et des coudes courts ; les icônes suivent le même vocabulaire, sans un seul cercle parfait. Un bouton à 12 px de rayon dans ce système est un corps étranger. Et le coin très arrondi est, avec le dégradé, le marqueur le plus fiable de l'interface générée. IL N'EXISTE PAS DE TOKEN « pill » NI « full ». Volontairement. Un bouton en gélule, une pastille parfaitement ronde ou un avatar circulaire ne sont pas dans ce système. La seule forme ronde de la marque est le bouton du contrôleur, et il est dans la photographie, pas dans l'interface. ------------------------------------------------------------------------ */ --wf-r-0: 0; --wf-r-1: 2px; /* pastille, case à cocher, puce */ --wf-r-2: 3px; /* bouton, champ de saisie, onglet */ --wf-r-3: 4px; /* carte, panneau, image encadrée. Plafond du système. */ --wf-bw-hair: 1px; --wf-bw: 2px; /* ======================================================================== 7. OMBRES ET GRAIN ======================================================================== DEUX ombres, et une règle qui compte plus que les deux : L'ÉLÉVATION SE DIT D'ABORD PAR UN FILET. Une ombre n'apparaît que si l'élément flotte RÉELLEMENT au-dessus du contenu — barre collante, menu déroulant, boîte de dialogue. Une carte posée dans le flux se borde ; elle ne s'ombre pas. C'est le registre du fabricant : des pièces posées, pas des cartes qui lévitent. Les ombres sont teintées à l'encre (brun chaud), pas au noir neutre, et elles tombent VERS LE BAS ET LÉGÈREMENT À DROITE — une seule source, en haut à gauche, exactement la lumière rasante de la charte photo (docs/03 §3.4). Une interface dont les ombres contredisent l'éclairage des photos qu'elle encadre a l'air fausse sans qu'on sache pourquoi. Ce n'est pas une « ombre colorée » au sens de l'anti-pattern : c'est du noir chaud à faible alpha, pas une lueur bleue ou violette. ------------------------------------------------------------------------ */ --wf-shadow-1: 0 1px 2px rgb(30 26 22 / 0.06), 0 2px 6px rgb(30 26 22 / 0.05); --wf-shadow-2: 0 2px 4px rgb(30 26 22 / 0.07), 0 8px 20px rgb(30 26 22 / 0.08); /* --- 7.1 Le grain. Une seule tuile SVG de 120 px, encodée en data-URI : zéro requête, ~500 octets, rasterisée une fois puis répétée. POURQUOI : une aplat parfaitement lisse est un tell d'image de synthèse. Une très légère dent donne au champ sombre la texture d'un imprimé — c'est le détail que personne ne demande et que tout le monde ressent (docs/07 §11.7). OÙ : sur --wf-field UNIQUEMENT. Jamais derrière du texte long, jamais sur un élément animé ou transformé (coût de composition). */ --wf-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23g)'/%3E%3C/svg%3E"); --wf-grain-opacity: 0.05; /* ======================================================================== 8. FOCUS, CIBLES, MOUVEMENT ======================================================================== */ /* --- 8.1 Le focus est DESSINÉ, pas hérité du navigateur. Deux anneaux : un décalage à la couleur du sol, puis l'accent. Cette construction reste visible sur un sol clair comme sur un bouton plein, ce qu'un anneau simple ne fait pas. Calculé sur les cinq surfaces où il peut tomber (voir verif-contraste.py). */ --wf-focus-color: var(--wf-accent); --wf-focus-width: 2px; --wf-focus-offset: 2px; --wf-focus-ring: 0 0 0 var(--wf-focus-offset) var(--wf-ground-raised), 0 0 0 calc(var(--wf-focus-offset) + var(--wf-focus-width)) var(--wf-focus-color); /* --- 8.2 Cibles. 24 × 24 px est le minimum de WCAG 2.2 (2.5.8) ; 44 est notre valeur (docs/03 §6). Conséquence de dessin, à traiter tout de suite : un logotype de 20 px de haut a besoin d'une zone cliquable de 44 px. Ce sont deux boîtes différentes, et le rembourrage consomme de la hauteur d'en-tête. */ --wf-tap: 44px; --wf-tap-min: 24px; /* --- 8.3 Mouvement. Trois durées, deux courbes, aucun rebond. Le mouvement sert la compréhension : il dit d'où une chose vient. Interdits (docs/03 §3.5 et §4) : apparition au défilement sur chaque bloc, parallaxe, compteur animé, machine à écrire, curseur dessiné. */ --wf-dur-1: 120ms; /* changement d'état : survol, focus, appui */ --wf-dur-2: 180ms; /* petit déplacement : révélation, infobulle */ --wf-dur-3: 240ms; /* panneau, tiroir, boîte de dialogue */ --wf-ease-out: cubic-bezier(0.22, 0.61, 0.30, 1); --wf-ease-in-out: cubic-bezier(0.50, 0.00, 0.20, 1); /* --- 8.4 Plans. Cinq, nommés, et aucun z-index littéral ailleurs. */ --wf-z-base: 0; --wf-z-raised: 10; /* élément en survol dans une grille */ --wf-z-sticky: 100; /* barre d'achat collante, en-tête */ --wf-z-overlay: 200; /* voile */ --wf-z-dialog: 300; /* tiroir, boîte de dialogue */ /* ======================================================================== 9. RÔLES DE SURFACE ======================================================================== Les composants s'écrivent UNE FOIS, contre ces six variables. Poser `data-surface="field"` sur une section remappe les six, et tout ce qui est à l'intérieur bascule — sans une seule règle dupliquée, sans classe `--dark` sur chaque composant. C'est le mécanisme qui permet au champ crépusculaire d'exister comme surface composée plutôt que comme thème parallèle. ------------------------------------------------------------------------ */ --wf-surface: var(--wf-ground); --wf-surface-raised: var(--wf-ground-raised); --wf-text: var(--wf-ink); --wf-text-muted: var(--wf-ink-muted); --wf-text-quiet: var(--wf-ink-quiet); --wf-surface-rule: var(--wf-rule); --wf-surface-border: var(--wf-border); --wf-surface-accent: var(--wf-accent); /* --- 9.1 MODE SOMBRE AUTOMATIQUE : TRANCHÉ, C'EST NON. Trois raisons, dans l'ordre de poids. 1. La photographie est la surface principale du site et elle est réglée sur la fin de journée, sur des intérieurs clairs (docs/12 §3.3). Une interface sombre autour de ces images entre en concurrence avec elles au lieu de les encadrer. On perdrait le seul levier qui nous distingue vraiment. 2. Une seconde palette double le nombre de couples à calculer (64 deviennent ~120) et double la grille de revue, dans une fenêtre de six à huit semaines avant le pic de saison. 3. Un mode sombre à moitié fait est l'un des tells les plus fiables du gabarit : cartes inversées, images cerclées de blanc, ombres invisibles, champs de formulaire restés clairs. CE QU'ON FAIT À LA PLACE : le champ crépusculaire (§2.5), qui donne à la marque son registre de nuit là où il sert — le module énergie et le pied de page — et qui est COMPOSÉ, donc contrôlé. CONSÉQUENCE TECHNIQUE, non facultative : `color-scheme: light` est déclaré ci-dessous. Sans lui, un navigateur en préférence sombre redessine tout seul les contrôles de formulaire, les barres de défilement et les champs autocomplétés en sombre au milieu d'une mise en page claire. C'est le défaut concret que cette décision évite. */ color-scheme: light; } /* -------------------------------------------------------------------------- 9.2 La bascule de surface. -------------------------------------------------------------------------- */ [data-surface="field"] { --wf-surface: var(--wf-field); --wf-surface-raised: var(--wf-field-raised); --wf-text: var(--wf-field-ink); --wf-text-muted: var(--wf-field-muted); --wf-text-quiet: var(--wf-field-muted); --wf-surface-rule: var(--wf-field-rule); --wf-surface-border: var(--wf-field-border); --wf-surface-accent: var(--wf-field-accent); --wf-focus-color: var(--wf-field-accent); --wf-focus-ring: 0 0 0 var(--wf-focus-offset) var(--wf-field), 0 0 0 calc(var(--wf-focus-offset) + var(--wf-focus-width)) var(--wf-focus-color); color-scheme: dark; } /* -------------------------------------------------------------------------- 10. PRÉFÉRENCES UTILISATEUR Traitées ici, une fois, pour qu'aucun composant n'ait à y penser. -------------------------------------------------------------------------- */ /* 10.1 Mouvement réduit. On neutralise les durées à la source : toute transition écrite avec --wf-dur-* devient instantanée, sans qu'un seul composant ait à déclarer sa propre règle. Le grain part aussi — c'est une texture, pas une information. */ @media (prefers-reduced-motion: reduce) { :root { --wf-dur-1: 1ms; --wf-dur-2: 1ms; --wf-dur-3: 1ms; --wf-grain: none; --wf-grain-opacity: 0; } } /* 10.2 Contraste renforcé. On ne bascule pas de palette : on remonte les valeurs les plus basses du système — les filets décoratifs et les encres secondaires — jusqu'à l'encre courante. Une palette de secours serait une deuxième identité à maintenir. */ @media (prefers-contrast: more) { :root { --wf-rule: var(--wf-border); --wf-rule-strong: var(--wf-border); --wf-ink-quiet: var(--wf-ink-muted); --wf-field-rule: var(--wf-field-border); --wf-focus-width: 3px; } } /* 10.3 Couleurs forcées (Windows High Contrast). Les couleurs disparaissent : ce qui doit survivre, c'est la STRUCTURE. On rend les filets et les anneaux de focus au système, et on éteint le grain et les ombres, qui ne veulent plus rien dire. */ @media (forced-colors: active) { :root { --wf-rule: CanvasText; --wf-rule-strong: CanvasText; --wf-border: CanvasText; --wf-field-rule: CanvasText; --wf-field-border: CanvasText; --wf-focus-color: Highlight; --wf-focus-ring: 0 0 0 var(--wf-focus-offset) Canvas, 0 0 0 calc(var(--wf-focus-offset) + var(--wf-focus-width)) Highlight; --wf-shadow-1: none; --wf-shadow-2: none; --wf-grain: none; --wf-grain-opacity: 0; } }