/* Blog — shared shell. Everything the index, the category listing and the article all need: the design tokens, the breadcrumb, the icon sizing and the type scale. It used to live in article.css, which is why the category page rendered its breadcrumb as a bare unstyled list — that sheet is only loaded on an article. Loaded BEFORE article.css / listing.css so a page-specific rule still wins. */ /* .blog-products-bar and #blog-products-modal carry the tokens too: both are chrome rendered at the end of , OUTSIDE .blog-redesign, and the second is a — custom properties inherit down the DOM tree, not from the top layer it is painted in. Without this the mini card's add-to-cart resolved `background: var(--vd-primary)` to nothing and came out transparent with white text: an invisible button, exactly the failure the comment below describes. Listed here rather than redeclared, so the values live once. */ .blog-redesign, .blog-products-bar, #blog-products-modal { --navy: #1c1c1c; --navy-light: #2a2a2a; --green: #00d4aa; --green-dark: #00b894; --orange: #ff6b35; --orange-light: #ff8c5a; --white: #ffffff; --gray-light: #f0f2f5; /* Text, borrowed wholesale from the video page (videos/css/video.css:25-27) so an article and a video read as the same site. The blog had its own lighter scale; the secondary tone in particular was #8892a4, a blue-grey that only reaches 3.1:1 on white and so fails WCAG AA for body copy. The three below are 7.2:1, 13.3:1 and 15.9:1. */ --gray: #515862; /* meta, captions, anything secondary */ --text-body: #2b3038; /* prose: paragraphs, list items, quotes */ --text-dark: #15181c; /* headings */ /* The mini product card is shared with the Fiche Vidéo and styles itself from --vd-*, which video.css declares on `.vd`. A blog page has no such ancestor, so every one of these resolved to nothing and the card lost its border, its thumbnail background and its add-to-cart colour outright — an invalid var() kills the whole declaration, it does not fall back. Same values as videos/css/video.css:25-36. */ --vd-ink: #15181c; --vd-muted: #515862; --vd-line: #e4e7ea; --vd-bg-soft: #f3f6f4; --vd-primary: #ec7330; --vd-primary-dark: #d9601f; --vd-shadow: 0 6px 24px rgba(20, 30, 25, 0.10); /* The reading size, same token and same value the video pages use. One size for every prose block, so the editorial voice does not change between a paragraph, a list item and a quote. */ --vd-read: 17px; } /* --- Breadcrumb, meta and share, now that core/css/blog.css is gone --------- The legacy sheet is what made the trail a centred grey box that wrapped onto two lines. These rules replace what it provided, on the mockup's shapes. */ .article-breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; /* The trail wraps as soon as an article has a long title, and the hero it sits in is centred. Left to its default the wrapped lines aligned left inside a centred block, so a two-line trail looked broken rather than wrapped: measured at 320 on both lines against a hero centred on 720. */ justify-content: center; gap: 8px; list-style: none; margin: 0; padding: 0; } .article-breadcrumb li { display: inline-flex; align-items: center; gap: 8px; } /* The separator is drawn, not written: a ">" between two
  • would be read aloud as content and would land in the name a crawler extracts. */ .article-breadcrumb li + li::before { content: "›"; color: rgba(0, 0, 0, 0.25); } .article-breadcrumb a { text-decoration: none; } .article-breadcrumb li:last-child a { color: var(--text-dark); pointer-events: none; } /* On a phone the trail is cut to ONE crumb: the level immediately above. `‹ Mouches` on an article, `‹ Articles vidéo` on a category listing. This is the pattern NN/G recommends — "consider shortening the breadcrumb trail to include only the last level(s)" — and it answers the three things at once that the full trail and the bare removal each got wrong. The full trail wrapped onto two lines and cost 68px, which NN/G names as the mobile failure mode. Removing it outright took the only way back up to the category with it. One crumb wraps nothing and still goes up. nth-last-child(2), not a fixed position: the trail is two crumbs deep on the blog home, three on a listing and four on an article, so "the one before the current page" is the only way to say "the parent" for all three. The separator flips to a back chevron for the same reason it exists at all — it is drawn, never written, so it stays out of what a screen reader reads and out of the name a crawler extracts. The other crumbs are hidden, not removed: the