/* ============================================================ LE CUBE À COMICS — DESIGN SYSTEM v1 · tokens (version de prod, child theme) Direction : « La Loupe du Collectionneur » (gate 1 du 07/07/2026) - Musée-maison de ventes ouvert la nuit : les couvertures sont des pièces exposées sous spot, l'expertise (grading, cotes, rareté) fait foi, l'achat est l'adjudication. - LOI DES 2 COULEURS : BLEU = je choisis · OR = j'achète. Aucun composant ne la contourne (le focus est bleu : c'est une sélection ; le hover du CTA approfondit l'or, il ne bascule jamais côté bleu — correctif gate 1). ARCHITECTURE (méthode de build, étape 4) : - COUCHE 1 : les valeurs (hex, familles) vivent dans theme.json — UNE SEULE définition. Ici, un pont mappe les presets WordPress (--wp--preset--*) sur les alias maison (--brand-*, --font-*) : le CSS du registre (design-system/components/) se transporte sans réécriture. - COUCHES 2-3 : signature, rôles, utilitaires, typo, formes, mouvement, contexte nuit — identiques au design system éprouvé (design-system/tokens.css de l'atelier, référence de conception). - Parent-agnostique : aucune variable ni hook Kadence (pas de --global-palette*, pas de classes Kadence). - Polices auto-hébergées : @font-face générés par WordPress depuis theme.json (fontFace), woff2 servis par le child. ============================================================ */ /* ============================================================ REPLIS À MÉTRIQUES ALIGNÉES — correctif F42 (recette É5, S5 du 07/08/2026) LE DÉFAUT, mesuré : CLS du panier à 0,101 sur staging pour un seuil à 0,100, dont 99,6 % attribués par Lighthouse à « Web font loaded ». Les polices sont préchargées et auto-hébergées, mais `font-display: swap` peint d'abord le texte avec la police système, puis rebascule : les deux n'occupent pas la même place, et tout ce qui suit se déplace. Reproduit au banc local (preuves/recette-s5-cls.mjs, polices retardées) : le paragraphe `.pan-livr-txt` du bordereau change de hauteur et pousse le bouton Commander, le code promo et le pied de page de ~21 px. LE CORRECTIF : on ne change ni la police, ni `swap`, ni le préchargement. On donne au REPLI les métriques de la police web, pour qu'il occupe exactement la même place — la bascule ne déplace alors plus rien. LES CHIFFRES viennent d'une mesure, pas d'une table : `node preuves/recette-s5-metriques-polices.mjs` charge chaque woff2 du child dans un vrai navigateur et relève au Canvas (TextMetrics) la chasse et les boîtes ascendante/descendante, sur un échantillon de texte réellement rendu par le site. Rejouable ; toute mise à jour de police impose de le rejouer et de reporter les valeurs ici. PORTÉE HONNÊTE : les surcharges sont exactes pour la police locale nommée par `src: local(...)`. Là où le système ne la fournit pas (Android n'a pas Arial et l'alias résout vers Roboto), le repli reste approché : le reflux est réduit, pas annulé. ============================================================ */ @font-face { font-family: "Bebas Neue repli"; src: local("Arial"); size-adjust: 71.29%; ascent-override: 133.26%; descent-override: 49.09%; line-gap-override: 0%; } @font-face { font-family: "Inter repli"; src: local("Arial"); size-adjust: 105.15%; ascent-override: 92.25%; descent-override: 22.83%; line-gap-override: 0%; } @font-face { font-family: "IBM Plex Mono repli"; src: local("Courier New"); size-adjust: 99.98%; ascent-override: 103.02%; descent-override: 28%; line-gap-override: 0%; } :root { /* ------------------------------------------------------------ COUCHE 1 — PONT presets theme.json → alias maison (source des valeurs : theme.json, ne rien redéfinir ici) ------------------------------------------------------------ */ /* La nuit du musée — l'écrin des temps forts ; jamais de noir pur */ --brand-midnight: var(--wp--preset--color--brand-midnight); --brand-night: var(--wp--preset--color--brand-night); --brand-vault: var(--wp--preset--color--brand-vault); /* La lueur — les textes sur nuit */ --brand-glow: var(--wp--preset--color--brand-glow); --brand-dusk: var(--wp--preset--color--brand-dusk); /* Le bleu Cube — la sélection, l'interaction (couleur du logo) */ --brand-cube: var(--wp--preset--color--brand-cube); --brand-cube-light: var(--wp--preset--color--brand-cube-light); --brand-cube-deep: var(--wp--preset--color--brand-cube-deep); /* L'or champagne — l'achat, la cote */ --brand-gold: var(--wp--preset--color--brand-gold); --brand-gold-deep: var(--wp--preset--color--brand-gold-deep); --brand-gold-ink: var(--wp--preset--color--brand-gold-ink); --brand-gold-soft: var(--wp--preset--color--brand-gold-soft); /* Le papier — le corps de page clair, là où vit le catalogue */ --brand-paper: var(--wp--preset--color--brand-paper); --brand-page: var(--wp--preset--color--brand-page); --brand-ink: var(--wp--preset--color--brand-ink); --brand-ink-soft: var(--wp--preset--color--brand-ink-soft); --brand-line: var(--wp--preset--color--brand-line); /* L'alerte — un seul rouge */ --brand-alert: var(--wp--preset--color--brand-alert); --brand-alert-light: var(--wp--preset--color--brand-alert-light); /* Extensions passe d'absorption (gate 08/07/2026) */ --brand-gold-line: var(--wp--preset--color--brand-gold-line); --brand-grade-mid: var(--wp--preset--color--brand-grade-mid); --brand-grade-high: var(--wp--preset--color--brand-grade-high); /* Typo : familles servies par theme.json */ --font-display: var(--wp--preset--font-family--display); --font-body: var(--wp--preset--font-family--body); --font-data: var(--wp--preset--font-family--data); /* ------------------------------------------------------------ SIGNATURE — la vitrine de minuit L'audace est dépensée ICI (les temps forts sur nuit), nulle part ailleurs : le catalogue vit en clair, la nuit est un écrin, pas un fond d'écran. Le hero est une salle d'exposition : fond radial de nuit (showcase), spot doré discret (spotlight), l'objet porte l'ombre de scène (--shadow-showcase). La loupe (zoom circulaire, geste du grader) est LE composant signature. (Les hex et rgba littéraux sont des étapes de dégradé : la valeur brute vit DANS le token, pacte de la signature.) ------------------------------------------------------------ */ --brand-showcase: radial-gradient(120% 90% at 72% 18%, #0c2f74 0%, /* cœur de lumière — n'existe que dans ce dégradé */ var(--brand-vault) 38%, var(--brand-midnight) 100%); --brand-spotlight: radial-gradient(40% 50% at 30% 40%, rgba(243, 201, 105, .16), transparent 70%); /* le spot du musée, posé SUR showcase */ /* filet doré : la tranche dorée des séparations (bords de bande, tête de section) */ --brand-giltline: linear-gradient(90deg, transparent, rgba(217, 159, 46, .45) 50%, transparent); /* papier jauni des back-issues : bande newsletter, encarts chauds */ --brand-newsprint: linear-gradient(120deg, #fdf7e7 0%, #f6ecca 55%, #efe1b2 100%); /* bande nuit courte (CGC, encarts sombres hors hero) */ --brand-band-night: linear-gradient(100deg, var(--brand-midnight), var(--brand-vault)); /* ------------------------------------------------------------ SIGNATURE — extensions passe d'absorption (gate 08/07/2026) ------------------------------------------------------------ */ /* rampe sémantique de grading : état de conservation rouge→or→vert. SÉMANTIQUE MÉTIER, hors loi des 2 couleurs (condition, pas interaction). grade-mid/high : fonds et graduations UNIQUEMENT, jamais en texte (contrastes insuffisants). */ --scale-grade: linear-gradient(90deg, var(--brand-alert) 0%, var(--brand-gold-deep) 38%, var(--brand-grade-mid) 62%, var(--brand-grade-high) 100%); /* signature home : le triple radial du hero (spot or + lueur bleue + nuit) */ --brand-showcase-home: radial-gradient(1100px 680px at 16% 6%, rgba(243, 201, 105, .15), transparent 55%), radial-gradient(900px 620px at 86% 92%, rgba(14, 105, 255, .20), transparent 60%), radial-gradient(150% 130% at 50% 0%, var(--brand-vault) 0%, var(--brand-midnight) 72%); /* fond complet du footer (radial or + descente vers l'abîme #020b22) */ --brand-footer-night: radial-gradient(900px 500px at 85% 0%, rgba(243, 201, 105, .08), transparent 60%), linear-gradient(180deg, var(--brand-vault) 0%, var(--brand-midnight) 58%, #020b22 100%); /* voile de lisibilité du header transparent (état top) */ --brand-head-scrim: linear-gradient(180deg, rgba(3, 16, 47, .6) 0%, rgba(3, 16, 47, 0) 100%); /* spot or des panneaux nuit (dédoublonne .fb-dark::before et .ch-feat-panel::before) */ --brand-night-spot: radial-gradient(42% 75% at 84% 12%, rgba(243, 201, 105, .14), transparent 70%); /* radial du sceau or (cœur de lumière #fbe6a8 — la valeur vit ici) */ --brand-gold-burst: radial-gradient(circle at 50% 38%, #fbe6a8, var(--brand-gold) 60%, var(--brand-gold-deep)); /* ------------------------------------------------------------ COUCHE 2 — TOKENS SÉMANTIQUES (les rôles, remappables par contexte) Noms standard Progweb. Extensions e-commerce marquées [e-comm] : proposées au standard à l'occasion de ce 1er run e-commerce. ------------------------------------------------------------ */ --surface-page: var(--brand-page); --surface-warm: #fdf7e7; /* chaud newsprint uni (le dégradé = signature) */ --surface-raised: var(--brand-paper); --surface-inverse: var(--brand-vault); --surface-night: var(--brand-midnight); --surface-night-raised: rgba(238, 243, 255, .05); /* panneau posé sur nuit (chips) */ --border-night: rgba(238, 243, 255, .16); --text-strong: var(--brand-ink); --text-body: var(--brand-ink); --text-soft: var(--brand-ink-soft); --text-inverse: var(--brand-glow); --text-inverse-strong: #ffffff; /* display sur nuit : titres, prix [e-comm nuit] */ --text-inverse-soft: var(--brand-dusk); --accent: var(--brand-cube); --accent-strong: var(--brand-cube-deep); --accent-alt: var(--brand-gold); --link: var(--brand-cube-deep); /* Encre du SURTITRE sur fond clair (recette É5, F33 — 06/08/2026). Le bleu Cube pur (#0e69ff) sur le fond de page (#f8f9fe) donne 4,45:1 : sous les 4,5:1 exigés par l'AA pour du 12 px gras, seule violation de contraste du site. Jeton DÉDIÉ, et non un glissement de --accent : le bleu Cube porte aussi les icônes, les filets et les états de sélection, où il est juste. Le surtitre passe donc au bleu profond du DS (#0b54cc, déjà l'encre de --link : aucune couleur neuve n'entre à la palette) → 6,33:1 sur le fond de page, 6,66:1 sur le papier blanc. Les contextes sombres gardent leurs surcharges explicites (cube-light), ils ne consomment pas ce jeton. */ --eyebrow-ink: var(--brand-cube-deep); --border-soft: var(--brand-line); --border-strong: var(--brand-ink-soft); /* Le CTA est LE geste du site (l'ajout au panier) : il ne change JAMAIS de couleur, quel que soit le contexte de page. Hover = or profond (le bleu au hover de la V2 était une faute de système). */ --cta-bg: var(--brand-gold); --cta-bg-hover: var(--brand-gold-deep); --cta-text: var(--brand-night); /* Le focus est une sélection → il est BLEU (loi des 2 couleurs). Visible sur clair, sur nuit, et sur l'or du CTA. */ --focus-ring: 0 0 0 3px rgba(14, 105, 255, .55); /* Voix documentaire : grades (9.8, FN/VF), années, cotes, refs catalogue — en mono, jamais du texte courant */ --data-ink: var(--brand-ink-soft); --data-accent: var(--brand-gold-ink); /* [e-comm] le prix est un objet de premier rang */ --price-ink: var(--brand-cube-deep); /* prix sur clair (V2) ; blanc en contexte nuit */ --stock-in: var(--brand-gold-ink); /* disponibilité sur clair ; or en contexte nuit */ --state-alert: var(--brand-alert); /* épuisé, erreur, suppression */ /* ------------------------------------------------------------ COUCHE 2 — UTILITAIRES (passe d'absorption, gate 08/07/2026) Voiles, scrims, bordures translucides, ombres/halos, icônes : les primitives réutilisées par le chrome et les temps forts. Noms standard Progweb (proposés au standard à l'occasion du run). ------------------------------------------------------------ */ /* voiles & scrims */ --veil-night: rgba(3, 16, 47, .8); /* panneaux translucides sur photo : frise, pin, real-tag, figcap */ --veil-night-solid: rgba(3, 16, 47, .97); /* barres quasi opaques : sticky PDP */ --scrim-modal: rgba(2, 8, 20, .94); /* fond de lightbox */ --veil-accent-alt: rgba(243, 201, 105, .15); /* fonds or translucides : pastilles d'étapes */ --veil-accent: rgba(14, 105, 255, .08); /* fonds bleus translucides : icônes trust, hovers sur clair */ --veil-accent-night: rgba(122, 191, 255, .15); /* hovers sur nuit : icônes header, social footer */ /* bordures translucides */ --border-night-strong: rgba(238, 243, 255, .28); /* input hero (le cran au-dessus de --border-night) */ --border-accent-night: rgba(122, 191, 255, .18); /* filets bleutés du chrome nuit : footer, menu mobile */ --border-accent-alt: rgba(243, 201, 105, .4); /* bordures or translucides : frise, sceau pointillé, étapes */ --border-glass: rgba(255, 255, 255, .5); /* liserés blancs sur surfaces riches : ring du sceau or */ /* ombres & halos (complètent soft / float / showcase / gold) */ --shadow-deep: 0 36px 72px -36px rgba(3, 16, 47, .55); /* grands panneaux : acquisition, boutique, carte avis */ --shadow-bar: 0 6px 24px rgba(3, 16, 47, .45); /* barres fixes : header scrolled, menu mobile */ --shadow-text: 0 1px 4px rgba(3, 16, 47, .6); /* lisibilité du texte nav sur photo */ --shadow-dot: 0 2px 8px rgba(3, 16, 47, .35); /* curseurs d'échelle (marks) */ --shadow-inset: inset 0 1px 3px rgba(3, 16, 47, .25); /* creux : piste de grading, inputs creusés */ --glow-accent: 0 0 8px 1px rgba(243, 201, 105, .7); /* halo du point or CGC */ /* iconographie (chantier gate 08/07). Icônes INTERACTIVES (liens sociaux…) : rôle --link existant, pas un token icône. */ --icon: var(--brand-cube); /* icône informative sur clair */ --icon-inverse: var(--brand-cube-light); /* icône informative sur nuit */ /* ------------------------------------------------------------ TYPOGRAPHIE Bebas Neue = la voix d'affiche (exigence client, assumée en signature) : titres + prix display, graisse 400 unique, letter-spacing .02-.04em, JAMAIS sous 20 px (--type-price-s est le plancher) — en dessous, Inter prend le relais. Inter = le corps (gate 1) ; `font-feature-settings:"tnum"` sur tout chiffre aligné (prix, cotes, tableaux). IBM Plex Mono = la voix documentaire (grades, années, cotes, refs). Familles : voir le pont couche 1 (servies par theme.json). ------------------------------------------------------------ */ /* Échelle fluide — corps relevé à 17 px (la V2 vivait à 13-15 px : sous le plancher moderne et sous le confort de la cible 35-55 ans). PLANCHER ABSOLU : 12 px (--type-micro). Rien en dessous, nulle part. */ --type-hero: clamp(3rem, 6.5vw, 4.75rem); /* display 400, lh .96, Bebas encaisse grand */ --type-display: clamp(2.25rem, 4.5vw, 3.375rem); /* h1 PDP (54 px V2 conservé en plafond) */ --type-title: clamp(1.625rem, 2.6vw, 2.25rem); /* titres de section */ --type-subtitle: 1.375rem; /* Inter 600 */ --type-lead: 1.3125rem; /* chapeaux, lh 1.5 */ --type-body: 1.0625rem; /* 17 px — corps courant, lh 1.65 */ --type-caption: .875rem; /* 14 px — cartes denses, légendes */ --type-micro: .75rem; /* 12 px — tags, compteurs. PLANCHER */ --type-data: .8125rem; /* 13 px mono, ls .02em */ --type-eyebrow: .8125rem; /* 13 px caps, 600, ls .14em */ /* [e-comm] les prix parlent Bebas (l'étiquette d'époque) */ --type-price-hero: clamp(2.75rem, 4.5vw, 3.125rem); /* PDP */ --type-price: 1.625rem; /* cartes, sticky, tiroir */ --type-price-s: 1.25rem; /* 20 px : le plus petit Bebas autorisé */ /* ------------------------------------------------------------ FORMES, PROFONDEUR, RYTHME 3 crans + pilule (la V2 improvisait 16 valeurs). Rigueur de cadre de musée : rayons contenus. Ombres teintées nuit sur clair ; l'objet exposé sur nuit porte l'ombre de scène. ------------------------------------------------------------ */ --radius-s: 8px; /* vignettes, mini-objets */ --radius-m: 12px; /* boutons, chips, inputs, cadres de couverture */ --radius-l: 18px; /* cartes, bandes */ --radius-arc: 999px; /* pilules (tags, keytag) */ --shadow-soft: 0 8px 28px -14px rgba(3, 16, 47, .25); --shadow-float: 0 18px 50px -20px rgba(3, 16, 47, .35); --shadow-showcase: 0 40px 80px -30px rgba(0, 0, 0, .75), 0 0 0 1px rgba(255, 255, 255, .06); /* pièce exposée sur nuit */ --shadow-cta: 0 16px 34px -16px rgba(243, 201, 105, .55); /* halo du CTA */ --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; --space-8: 4.5rem; --space-9: 6.5rem; --container: 1180px; /* constaté V2 → theme.json layout.contentSize (étape 4 : fait) */ --container-wide: 1360px; /* ------------------------------------------------------------ MOUVEMENT — feuilleter une pièce sous vitrine : départ franc, pose douce (l'easing des V2, conservé). CSS d'abord (décision 9 du Modèle) ; l'orchestration vit à l'étape 3. ------------------------------------------------------------ */ --ease-cube: cubic-bezier(.22, 1, .36, 1); --t-quick: 160ms; /* micro-interactions */ --t-soft: 320ms; /* survols composés */ --t-scene: 700ms; /* séquences d'entrée (reveal V2 : .7s, conservé) */ } /* ------------------------------------------------------------ CONTEXTE NUIT — les temps forts (hero, bande CGC, sticky, footer). Un seul système : les rôles se remappent, les composants ne changent pas. Le CTA reste or (loi des 2 couleurs). Le bleu cube pur ne porte pas de texte ici (4.0:1) : l'interaction passe en bleu clair. ------------------------------------------------------------ */ [data-theme="night"] { --surface-page: var(--brand-midnight); --surface-warm: var(--brand-night); --surface-raised: var(--brand-night); --surface-inverse: var(--brand-paper); --text-strong: var(--text-inverse-strong); --text-body: var(--brand-glow); --text-soft: var(--brand-dusk); --accent-strong: var(--brand-cube-light); --link: var(--brand-cube-light); --border-soft: var(--border-night); --border-strong: var(--brand-dusk); --data-ink: var(--brand-dusk); --data-accent: var(--brand-gold); --price-ink: var(--text-inverse-strong); --stock-in: var(--brand-gold); --state-alert: var(--brand-alert-light); --shadow-soft: 0 8px 28px -14px rgba(0, 0, 0, .55); --shadow-float: 0 18px 50px -20px rgba(0, 0, 0, .65); } /* ------------------------------------------------------------ ACCESSIBILITÉ — plancher non négociable Paires mesurées (WCAG, 07/07/2026) : - ink/paper 12.8:1 · ink/page 12.2:1 · ink-soft/page 5.1:1 - cube-deep/paper 6.7:1 · cube/paper 4.7:1 (eyebrows AA) - glow/midnight 16.9:1 · dusk/midnight 9.9:1 · dusk/vault 7.1:1 - cube-light/midnight 9.6:1 · blanc/vault 13.5:1 - CTA : night/gold 10.8:1 · gold/midnight 12.0:1 (stockline nuit) - gold-ink/page 4.9:1 · alert/paper 5.1:1 Règles : l'or #f3c969 ne porte JAMAIS de texte sur fond clair (gold-ink à la place) ; le bleu cube sur nuit = bordures et fonds uniquement (4.0:1), le texte interactif sur nuit = cube-light ; jamais de noir pur en texte ; rien sous 12 px. ------------------------------------------------------------ */ :focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-s); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } } /* ------------------------------------------------------------ NEUTRALISATION PARENT UNIQUE (passe de cohérence, 12/07/2026). Adaptateur d'environnement child-only : le registre reste parent-agnostique, ce fichier est le seul à parler Kadence. Le parent peint tous les états d'interaction non possédés avec sa palette : a:hover/:focus/:active → --global-palette-highlight-alt et button:hover/:focus/:active → --global-palette-btn-bg-hover, deux variables qui pointent sur --global-palette4 = #000000. C'était la racine du « noir au survol » constaté partout (accordéons FAQ, liens « En savoir plus », boutons RS, ajout panier au clic). Au lieu de multiplier les verrous ciblés, on repointe UNE FOIS les 6 variables d'interaction vers les tokens du DS : tout élément non verrouillé dégrade désormais vers le bleu du système, jamais vers le noir. Les composants du registre verrouillent en plus leurs propres états (double filet). :root:root (0-2-0) : le parent imprime sa palette (inline kadence-global) APRÈS les feuilles du child dans le head — un :root nu (0-1-0) perdrait à l'ordre des sources. ------------------------------------------------------------ */ :root:root { --global-palette-highlight: var(--link); --global-palette-highlight-alt: var(--accent-strong); --global-palette-btn: var(--text-inverse-strong); --global-palette-btn-hover: var(--text-inverse-strong); --global-palette-btn-bg: var(--accent); --global-palette-btn-bg-hover: var(--accent-strong); } /* ------------------------------------------------------------ CTA — le bouton d'achat (l'adjudication) + bouton secondaire. Loi des 2 couleurs : or = j'achète (hover = or profond, jamais bleu, correctif gate 1) ; le secondaire est une sélection → bleu. Canonique depuis le gate 1 (07/07/2026). Les helpers de démo d'états (.is-hover, .is-focus) vivent sur la planche, pas ici. Les états :hover VERROUILLENT leur couleur (retour de gate É4 Bloc 4) : posé sur un lien, le a:hover du parent Kadence (global.min.css, --global-palette-highlight-alt) volait le texte au survol — illisible sur la bande nuit. Un composant possède sa couleur dans tous ses états. ------------------------------------------------------------ */ .cta { display: inline-flex; align-items: center; justify-content: center; gap: 10px; background: var(--cta-bg); color: var(--cta-text); border: 0; cursor: pointer; border-radius: var(--radius-m); padding: 16px 28px; font-family: var(--font-display); font-weight: 400; font-size: var(--type-price-s); letter-spacing: .04em; text-transform: uppercase; box-shadow: var(--shadow-cta); transition: background var(--t-quick) var(--ease-cube), transform var(--t-quick) var(--ease-cube); } /* verrou sur les 3 états (passe de cohérence 12/07) : la recette du parent couvre hover, focus ET active (0-1-1) — l'active non verrouillé peignait l'ajout panier en noir le temps du clic, et son box-shadow de survol remplaçait le halo or sur hôte