. * Shell: .blog-header > .blog-shell, .blog-footer > .blog-shell. * Components: .blog-breadcrumbs, .blog-meta, .blog-summary, .blog-toc, * .blog-tip, .blog-lyrics, .blog-comparison, .blog-cta, .blog-button. * Wrap tables in .blog-table-scroll with tabindex="0", role="region" * and a localized aria-label so keyboard users can scroll them. * Set lang on , image width/height and alt in HTML. * Use the public stylesheet URL configured by the deployment. * Reference: shared landing chrome CSS supplied by Maude. * Inter/Manrope are used when the shared stylesheet loads their font faces. * No font URLs are assumed here; system fonts remain the standalone fallback. * Keep shared #siteNav/footer markup outside .blog-article. * No Tailwind or JavaScript dependency. */ .ilena-blog { --blog-accent: #6d3cc9; --blog-font-body: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --blog-font-heading: 'Manrope', 'Inter', system-ui, sans-serif; --blog-anchor-offset: 7.25rem; /* Shared desktop navigation: 100px + 16px. */ --blog-background: #f9fafb; --blog-surface: #ffffff; --blog-heading: #111827; --blog-subheading: #1f2937; --blog-text: #374151; --blog-secondary: #4b5563; /* Slightly darker than reference #6b7280 for small text on gray. */ --blog-muted: #626975; --blog-border: #e5e7eb; --blog-gutter: 1rem; --blog-radius: 0.5rem; margin: 0; background: var(--blog-background); color: var(--blog-text); font-family: var(--blog-font-body); font-size: 1rem; line-height: 1.8; text-align: start; overflow-wrap: anywhere; color-scheme: light; } .ilena-blog, .ilena-blog *, .ilena-blog *::before, .ilena-blog *::after { box-sizing: border-box; } .ilena-blog .blog-article a { color: var(--blog-accent); text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 0.08em; } .ilena-blog .blog-article a:hover { text-decoration-thickness: 0.15em; } .ilena-blog :focus-visible { outline: 3px solid var(--blog-accent); outline-offset: 4px; } .ilena-blog img, .ilena-blog svg, .ilena-blog video { max-width: 100%; height: auto; } .ilena-blog button { font: inherit; } .ilena-blog .blog-shell { width: 100%; max-width: 64rem; margin-inline: auto; padding-inline: var(--blog-gutter); } .ilena-blog .blog-header { position: sticky; top: 0; z-index: 10; background: var(--blog-surface); border-bottom: 1px solid var(--blog-border); } .ilena-blog .blog-header .blog-shell { min-height: 4rem; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem 1rem; padding-block: 0.5rem; } .ilena-blog .blog-logo { display: inline-flex; align-items: center; max-width: 100%; } .ilena-blog .blog-logo img { display: block; max-width: 11.25rem; max-height: 2rem; width: auto; height: auto; } .ilena-blog .blog-header nav { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; } .ilena-blog .blog-header nav a { padding-block: 0.375rem; } .ilena-blog .blog-header a, .ilena-blog .blog-footer a, .blog-skip-link { color: var(--blog-accent); text-decoration: underline; text-underline-offset: 0.2em; } .ilena-blog .blog-article { width: 100%; max-width: 48rem; margin-inline: auto; padding: 2.5rem var(--blog-gutter); } .ilena-blog .blog-article [id] { scroll-margin-top: var(--blog-anchor-offset); } .ilena-blog .blog-article h1, .ilena-blog .blog-article h2, .ilena-blog .blog-article h3, .ilena-blog .blog-article h4 { color: var(--blog-heading); font-family: var(--blog-font-heading); line-height: 1.3; } .ilena-blog .blog-article h1 { margin: 0 0 1rem; font-size: 1.875rem; font-weight: 700; line-height: 1.2; } .ilena-blog .blog-article h2 { margin: 2rem 0 1rem; font-size: 1.25rem; font-weight: 700; } .ilena-blog .blog-article h3 { margin: 1.5rem 0 0.75rem; font-size: 1.125rem; font-weight: 600; color: var(--blog-subheading); } .ilena-blog .blog-article h4 { margin: 1.5rem 0 0.75rem; font-size: 1rem; font-weight: 600; } .ilena-blog .blog-article p { margin: 0 0 1.25rem; } .ilena-blog .blog-article ul, .ilena-blog .blog-article ol { margin: 0 0 1.25rem; padding-inline-start: 1.5rem; line-height: 1.7; } .ilena-blog .blog-article li + li { margin-top: 0.5rem; } .ilena-blog .blog-article li > ul, .ilena-blog .blog-article li > ol { margin-block: 0.5rem 0; } .ilena-blog .blog-meta { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; margin-bottom: 1.5rem; color: var(--blog-muted); font-size: 0.875rem; } .ilena-blog .blog-breadcrumbs { margin-bottom: 1.5rem; font-size: 0.875rem; color: var(--blog-secondary); } .ilena-blog .blog-breadcrumbs ol { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; padding: 0; margin: 0; } .ilena-blog .blog-breadcrumbs li + li { margin: 0; } /* Put localized separators in the HTML with aria-hidden="true". */ .ilena-blog .blog-article img { display: block; border-radius: var(--blog-radius); margin-block: 1.5rem; } .ilena-blog .blog-article figure { margin: 1.5rem 0; } .ilena-blog .blog-article figure img { margin: 0; } .ilena-blog .blog-article figcaption { margin-top: 0.5rem; color: var(--blog-secondary); font-size: 0.875rem; line-height: 1.6; } .ilena-blog .blog-summary, .ilena-blog .blog-article blockquote { margin: 1.5rem 0; padding: 1rem 1.5rem; border-inline-start: 4px solid var(--blog-accent); background: var(--blog-surface); font-style: normal; } .ilena-blog .blog-article blockquote { color: var(--blog-secondary); } .ilena-blog .blog-article blockquote cite { font-size: 0.875rem; } .ilena-blog .blog-summary > :first-child, .ilena-blog .blog-toc > :first-child, .ilena-blog .blog-cta > :first-child, .ilena-blog .blog-comparison > * > :first-child { margin-top: 0; } .ilena-blog .blog-summary > :last-child, .ilena-blog .blog-article blockquote > :last-child, .ilena-blog .blog-toc > :last-child, .ilena-blog .blog-cta > :last-child, .ilena-blog .blog-comparison > * > :last-child { margin-bottom: 0; } .ilena-blog .blog-toc { margin-block: 1.5rem 2rem; padding: 1.25rem; border: 1px solid var(--blog-border); border-radius: var(--blog-radius); } .ilena-blog .blog-tip { margin-block: 1.5rem; } .ilena-blog .blog-lyrics { margin-block: 1.5rem; padding-inline-start: 1.5rem; border-inline-start: 2px solid var(--blog-border); white-space: pre-wrap; font-family: inherit; line-height: 1.8; } .ilena-blog .blog-table-scroll { max-width: 100%; overflow-x: auto; margin-block: 1.5rem; } .ilena-blog .blog-article table { width: 100%; border-collapse: collapse; font-size: 1rem; line-height: 1.6; } .ilena-blog .blog-article th, .ilena-blog .blog-article td { padding: 0.75rem; border: 1px solid var(--blog-border); text-align: start; vertical-align: top; } .ilena-blog .blog-article th { background: var(--blog-surface); color: var(--blog-heading); font-weight: 600; } .ilena-blog .blog-article caption { text-align: start; margin-bottom: 0.75rem; font-weight: 600; } .ilena-blog .blog-comparison { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; margin-block: 1.5rem; } .ilena-blog .blog-comparison > * { min-width: 0; padding: 1.25rem; background: var(--blog-surface); border: 1px solid var(--blog-border); border-radius: var(--blog-radius); } .ilena-blog .blog-cta { margin-block: 2rem; padding: 1.5rem; border-inline-start: 4px solid var(--blog-accent); background: var(--blog-surface); } .ilena-blog .blog-article .blog-button { font-family: var(--blog-font-heading); display: inline-flex; align-items: center; justify-content: center; min-height: 2.75rem; max-width: 100%; padding: 0.625rem 1.25rem; border: 2px solid var(--blog-accent); border-radius: var(--blog-radius); background: var(--blog-accent); color: var(--blog-surface); font-weight: 600; line-height: 1.5; text-align: center; text-decoration: none; cursor: pointer; } .ilena-blog .blog-article .blog-button:hover { text-decoration: underline; } .ilena-blog .blog-article details { margin-block: 1rem; padding-block: 1rem; border-bottom: 1px solid var(--blog-border); } .ilena-blog .blog-article summary { cursor: pointer; color: var(--blog-heading); font-weight: 600; } .ilena-blog details[open] summary { margin-bottom: 1rem; } .ilena-blog .blog-article hr { margin-block: 2rem; border: 0; border-top: 1px solid var(--blog-border); } .ilena-blog .blog-footer { padding-block: 2rem; background: var(--blog-surface); border-top: 1px solid var(--blog-border); color: var(--blog-secondary); font-size: 0.875rem; } /* SANS ANCÊTRE, ET C'EST LA RAISON D'ÊTRE DE CETTE LIGNE. Le lien d'évitement est le premier élément du , donc AVANT le

qui porte `.ilena-blog` depuis que le chrome du site est injecté. Écrite en descendante, la règle ne s'appliquait plus : le lien perdait sa position hors écran et s'affichait en clair au-dessus du menu. Le nom de classe est unique, il n'a besoin d'aucun ancêtre pour être sûr. */ .blog-skip-link { position: fixed; top: 0.5rem; left: 1rem; z-index: 100; padding: 0.5rem 1rem; background: var(--blog-surface, #fff); color: #6d3cc9; transform: translateY(-200%); } .blog-skip-link:focus { transform: translateY(0); } @media (min-width: 40rem) { .ilena-blog { --blog-gutter: 1.5rem; } .ilena-blog .blog-article h1 { font-size: 2.25rem; } } @media (min-width: 40.0625rem) { .ilena-blog { font-size: 1.125rem; } .ilena-blog .blog-article h2 { font-size: 1.5rem; } .ilena-blog .blog-article h3 { font-size: 1.25rem; } .ilena-blog .blog-comparison { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* Static header at small widths also avoids hiding content at high zoom. */ @media (max-width: 40rem) { .ilena-blog .blog-header { position: static; } } @media (min-width: 64rem) { .ilena-blog { --blog-gutter: 2rem; } } @media print { .ilena-blog { background: #fff; color: #111827; font-size: 11pt; } .ilena-blog .blog-header { position: static; } .ilena-blog .blog-article { max-width: none; padding: 0; } .blog-skip-link { display: none; } .ilena-blog .blog-table-scroll { overflow: visible; } .ilena-blog .blog-article h1, .ilena-blog .blog-article h2, .ilena-blog .blog-article h3 { break-after: avoid; } .ilena-blog .blog-article figure, .ilena-blog tr { break-inside: avoid; } } /* ───────────────────────────────────────────────────────────────────────────── Ajouts pour les pages autonomes reprises du corpus AutoSEO (2026-09-07). Les 89 articles hérités portaient leur mise en forme par Tailwind Play CDN — 407 ko de JavaScript qui générait le CSS dans le navigateur du lecteur. Deux blocs de ces pages n'avaient pas d'équivalent ici : la grille d'articles liés en fin de page, et le bandeau de consentement. Les voici, écrits comme le reste de cette feuille plutôt que reconstruits en classes utilitaires. ───────────────────────────────────────────────────────────────────────────── */ .ilena-blog .blog-related { border-top: 1px solid var(--blog-rule, #e5e7eb); margin-top: 3rem; padding-top: 2rem; } .ilena-blog .blog-related > h2 { margin-top: 0; } .ilena-blog .blog-related ul { display: grid; gap: 1.5rem; grid-template-columns: 1fr; list-style: none; margin: 0; padding: 0; } @media (min-width: 48rem) { .ilena-blog .blog-related ul { grid-template-columns: repeat(3, 1fr); } } .ilena-blog .blog-related li + li { margin-top: 0; } .ilena-blog .blog-related a { display: block; text-decoration: none; } .ilena-blog .blog-related img { aspect-ratio: 16 / 9; border-radius: .5rem; margin: 0 0 .75rem; object-fit: cover; width: 100%; } .ilena-blog .blog-related h3 { font-size: 1rem; line-height: 1.4; margin: 0; } .ilena-blog .blog-consent { background: #fff; border-top: 1px solid var(--blog-rule, #e5e7eb); bottom: 0; box-shadow: 0 -1px 3px rgb(0 0 0 / .1); left: 0; position: fixed; right: 0; z-index: 50; } .ilena-blog .blog-consent > div { align-items: center; display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; margin: 0 auto; max-width: 56rem; padding: 1rem; } .ilena-blog .blog-consent p { font-size: .875rem; margin: 0; } .ilena-blog .blog-consent .blog-consent-actions { display: flex; flex-shrink: 0; gap: .5rem; } .ilena-blog .blog-consent button { border: 1px solid var(--blog-rule, #d1d5db); border-radius: .25rem; cursor: pointer; font-size: .875rem; padding: .5rem 1rem; } .ilena-blog .blog-consent button[data-consent="accepted"] { background: #111827; border-color: #111827; color: #fff; } /* Pages de listage, pagination et 404 — même origine que le bloc ci-dessus. */ .ilena-blog .blog-listing { margin: 0 auto; max-width: 64rem; padding: 3rem 1rem; } .ilena-blog .blog-listing > h1 { margin-top: 0; } .ilena-blog .blog-listing ul { display: grid; gap: 1.5rem; grid-template-columns: 1fr; list-style: none; margin: 0; padding: 0; } @media (min-width: 48rem) { .ilena-blog .blog-listing ul { grid-template-columns: repeat(3, 1fr); } } .ilena-blog .blog-listing li + li { margin-top: 0; } .ilena-blog .blog-listing a { display: block; text-decoration: none; } .ilena-blog .blog-listing img { aspect-ratio: 16 / 9; border-radius: .5rem; margin: 0 0 .75rem; object-fit: cover; width: 100%; } .ilena-blog .blog-listing h3 { font-size: 1rem; line-height: 1.4; margin: 0 0 .25rem; } .ilena-blog .blog-listing .blog-card-meta { font-size: .75rem; opacity: .7; } .ilena-blog .blog-pagination { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin: 2.5rem 0; } .ilena-blog .blog-pagination a { border: 1px solid var(--blog-rule, #d1d5db); border-radius: .25rem; padding: .25rem .75rem; text-decoration: none; } .ilena-blog .blog-pagination a[aria-current="page"] { background: #111827; border-color: #111827; color: #fff; } .ilena-blog .blog-notfound { margin: 0 auto; max-width: 48rem; padding: 5rem 1rem; text-align: center; } .ilena-blog .blog-notfound .blog-code { font-size: 3.75rem; font-weight: 700; margin: 0 0 1rem; opacity: .25; } /* Page hôte du blogue — posée sur par `inject-chrome.mjs` (2026-09-07). `.ilena-blog` descend sur le

à la publication, pour que ses règles n'atteignent pas l'en-tête et le pied du site : `img { max-width: 100% }` y étirait le logo à la largeur de son conteneur, et `overflow-wrap: anywhere` coupait « Ilena » en « e n a ». Le fond de page, lui, appartenait à cette même classe et disparaissait avec elle — d'où cette règle, qui ne porte que ce que le doit encore. */ .ilena-blog-page { margin: 0; /* La couleur reste la vérité de repli : si l'image n'arrive pas, la page est claire et lisible, jamais blanche sur blanc. */ background: #f9fafb url("/blog/assets/background-light.webp") center / cover no-repeat fixed; } /* LE FOND EST UN CADRE, PAS UN PAPIER PEINT. L'image a un centre clair et des bords ornés ; poser le texte dessus le rendrait pénible à lire là où la texture est dense. Le contenu reçoit donc sa propre surface, et la texture ne se voit que dans les marges — ce pour quoi l'image a été composée. 1,9 Mo en PNG, 49 ko en WebP : servir l'original aurait fait peser le décor plus lourd que l'article qu'il décore, sur chacune des cent pages. */ .ilena-blog .blog-article, .ilena-blog .blog-listing, .ilena-blog .blog-notfound { background: rgb(255 255 255 / 0.86); border-radius: var(--blog-radius); box-shadow: 0 1px 3px rgb(17 24 39 / 0.06); margin-block: 2rem; } /* LE

NE PEINT PAS DE FOND. `.ilena-blog` porte `background: var(--blog-background)` parce qu'elle vivait sur le et devait donc habiller la page. Depuis qu'elle descend sur le

à la publication, cette même déclaration recouvre l'image d'une couche opaque : on ne voyait plus du fond qu'une bande de quelques pixels au-dessus du contenu. La règle ne vise QUE le

: sur les pages versionnées, où la classe est restée sur le , la couleur doit continuer de faire le fond de page. */ main.ilena-blog { background: transparent; } /* `background-attachment: fixed` coûte cher au défilement sur mobile, et iOS l'ignore de toute façon : au-dessous de cette largeur l'image est simplement fixée à la page. */ @media (max-width: 48rem) { .ilena-blog-page { background-attachment: scroll; } } /* Une personne qui a demandé moins d'animation n'a pas demandé moins d'image ; mais un fond fixe qui se recompose à chaque défilement en fait partie. */ @media (prefers-reduced-motion: reduce) { .ilena-blog-page { background-attachment: scroll; } }