)
et la typographie est gérée à un seul endroit.
La charte reprend celle de l'accueil : fond slate-950, dégradé signature
cyan → emerald, coins arrondis généreux, ombres colorées, survols qui soulèvent.
⚠️ Après modification : bumper le ?v=AAAAMMJJ-N sur les pages qui chargent ce
fichier (voir le skill parametres-et-seo).
========================================================================== */
:root {
--blog-cyan: #22d3ee;
--blog-emerald: #34d399;
--blog-fond: #020617;
--blog-surface: rgba(15, 23, 42, .55);
--blog-bordure: rgba(51, 65, 85, .7);
/* 12,55:1 sur le fond, au lieu de 13,59:1 avec l'ancien #cbd5e1. Un seul cran en
dessous : sur un fond très sombre, un contraste maximal fait « vibrer » les
lettres (effet de halo), surtout pour les astigmates. On reste très largement
au-dessus du seuil d'accessibilité de 4,5:1. */
--blog-texte: #c2cddc;
--blog-titre-police: "Bricolage Grotesque", system-ui, sans-serif;
--blog-texte-police: "Hanken Grotesk", system-ui, sans-serif;
/* 68 caractères : la longueur de ligne au-delà de laquelle l'œil perd la ligne
suivante en revenant à la marge. C'est LA variable de confort de lecture. */
--blog-mesure: 68ch;
}
/* ─────────────────── Ossature ─────────────────── */
/* 🎨 FOND « DESIGNER », repris de .ef-after-hero sur l'accueil (accueil.html, ~ligne 101).
Le champ d'étoiles animé est volontairement ABSENT du blog : des points clairs qui
bougent derrière un texte long fatiguent la lecture, et c'est justement ce qu'on
demande ici. Ce décor-là est 100 % statique — aucun coût d'animation.
Les couches, du dessus vers le dessous : texture pointillée, puis trois halos aux
SEULES couleurs de la marque — cyan en haut à droite, emerald à gauche, emerald plus
profond en bas — puis le dégradé de fond.
⚠️ Pas de violet ni d'orange ici, contrairement à .ef-after-hero sur l'accueil :
choix d'Alexy le 2026-08-08, le blog s'en tient au cyan → vert.
⚠️ Les pages du blog ne doivent PAS charger starfield.js. */
.blog-page {
font-family: var(--blog-texte-police);
background:
radial-gradient(rgba(148, 163, 184, .07) 1px, transparent 1.4px) 0 0 / 24px 24px,
radial-gradient(820px 560px at 88% 4%, rgba(34, 211, 238, .13), transparent 60%),
radial-gradient(760px 680px at 4% 24%, rgba(52, 211, 153, .12), transparent 58%),
radial-gradient(880px 720px at 62% 102%, rgba(16, 185, 129, .10), transparent 55%),
linear-gradient(180deg, #020617 0%, #0b1224 45%, #060b18 100%);
/* Le décor reste en place au défilement : sur un article long, des halos étirés sur
toute la hauteur du document perdraient tout leur effet. */
background-attachment: fixed;
background-color: var(--blog-fond); /* filet de secours si les dégradés ne rendent pas */
}
.blog-conteneur {
max-width: 46rem;
margin: 0 auto;
padding: 0 1.25rem;
}
/* 🌠 Halo décoratif derrière l'en-tête, comme sur l'accueil. `pointer-events:none`
pour qu'il n'intercepte jamais un clic, et aria-hidden côté HTML. */
.blog-halo {
position: absolute;
top: -4rem; left: 50%;
width: min(38rem, 90vw); height: 22rem;
transform: translateX(-50%);
background: radial-gradient(closest-side, rgba(34, 211, 238, .16), transparent 70%);
filter: blur(40px);
pointer-events: none;
z-index: 0;
}
.blog-entete {
position: relative;
/* L'en-tête du site est « sticky » et occupe déjà 56 px : 3rem de plus faisaient
démarrer le contenu très bas, surtout sur téléphone. Valeur fluide, plus serrée. */
padding: clamp(1.25rem, 3.5vw, 2rem) 0 1.25rem;
}
/* ⚠️ LE :not(.blog-halo) EST INDISPENSABLE — bug vécu le 2026-08-08.
Le halo est lui aussi un enfant direct de .blog-entete. Sans l'exclusion, ce
sélecteur (même spécificité que .blog-halo, mais écrit APRÈS) lui repassait
`position: relative` : il rentrait dans le flux et poussait tout le contenu de
352 px vers le bas. Un halo décoratif DOIT rester en position absolue. */
.blog-entete > *:not(.blog-halo) { position: relative; z-index: 1; }
/* ─────────────────── Fil d'Ariane ─────────────────── */
.blog-ariane {
font-size: .8125rem;
color: #8296ae;
margin-bottom: 1.5rem;
}
.blog-ariane a { color: #94a3b8; text-decoration: none; transition: color .15s; }
.blog-ariane a:hover { color: var(--blog-cyan); }
.blog-ariane span { margin: 0 .5rem; opacity: .5; }
/* ─────────────────── Titres ─────────────────── */
.blog-h1 {
font-family: var(--blog-titre-police);
font-weight: 800;
font-size: clamp(1.9rem, 5vw, 2.85rem);
line-height: 1.12;
letter-spacing: -.02em;
color: #fff;
margin: 0 0 1rem;
text-wrap: balance; /* évite le mot orphelin sur la dernière ligne */
}
/* Le dégradé signature d'EditFast, appliqué au texte. */
.blog-degrade {
background: linear-gradient(100deg, var(--blog-cyan), var(--blog-emerald));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
/* ─────────────────── Méta (date, durée) ─────────────────── */
.blog-meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: .5rem;
font-size: .8125rem;
color: #94a3b8;
}
.blog-pastille {
display: inline-flex;
align-items: center;
gap: .4rem;
padding: .3rem .7rem;
border: 1px solid var(--blog-bordure);
border-radius: 999px;
background: var(--blog-surface);
}
/* ─────────────────── Corps de l'article ─────────────────── */
.blog-corps {
color: var(--blog-texte);
font-size: 1.0625rem;
line-height: 1.78;
}
.blog-corps > p,
.blog-corps > ul,
.blog-corps > ol { max-width: var(--blog-mesure); }
.blog-corps p { margin: 0 0 1.15rem; }
/* Blanc CASSÉ, pas blanc pur : les mots en gras sont la principale source
d'éblouissement dans un texte sombre, puisqu'ils reviennent à chaque paragraphe.
Le gras suffit à les faire ressortir, le blanc pur n'apporte que de la fatigue. */
.blog-corps strong { color: #f1f5f9; font-weight: 650; }
.blog-corps em { color: #e2e8f0; }
.blog-corps a {
color: var(--blog-cyan);
text-decoration: underline;
text-decoration-color: rgba(34, 211, 238, .35);
text-underline-offset: 3px;
transition: text-decoration-color .15s;
}
.blog-corps a:hover { text-decoration-color: var(--blog-cyan); }
/* Le chapô : premier paragraphe, plus grand, qui donne envie de lire la suite. */
.blog-chapo {
font-size: 1.1875rem;
line-height: 1.7;
color: #e2e8f0;
}
.blog-corps h2 {
font-family: var(--blog-titre-police);
font-size: clamp(1.35rem, 3.2vw, 1.65rem);
font-weight: 750;
line-height: 1.25;
color: #fff;
margin: 3rem 0 1.1rem;
padding-top: .4rem;
text-wrap: balance;
}
/* Le petit trait dégradé au-dessus de chaque section : repère visuel de rythme. */
.blog-corps h2::before {
content: "";
display: block;
width: 2.5rem; height: 3px;
margin-bottom: .9rem;
border-radius: 999px;
background: linear-gradient(90deg, var(--blog-cyan), var(--blog-emerald));
}
.blog-corps h3 {
font-family: var(--blog-titre-police);
font-size: 1.1rem;
font-weight: 700;
color: #fff;
margin: 2rem 0 .6rem;
}
.blog-corps ul, .blog-corps ol { margin: 0 0 1.15rem; padding-left: 1.35rem; }
.blog-corps li { margin-bottom: .55rem; }
.blog-corps ul li::marker { color: var(--blog-cyan); }
.blog-corps ol li::marker { color: var(--blog-cyan); font-weight: 700; }
/* ─────────────────── Sommaire ─────────────────── */
.blog-sommaire {
border: 1px solid var(--blog-bordure);
background: var(--blog-surface);
border-radius: 1rem;
padding: 1.15rem 1.35rem;
margin: 0 0 2.5rem;
}
.blog-sommaire p {
margin: 0 0 .7rem;
font-size: .75rem;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: #8296ae;
}
.blog-sommaire ol { margin: 0; padding-left: 1.15rem; }
.blog-sommaire li { margin-bottom: .4rem; font-size: .95rem; }
.blog-sommaire a { color: #cbd5e1; text-decoration: none; }
.blog-sommaire a:hover { color: var(--blog-cyan); }
/* Sans ça, un titre visé par une ancre se colle sous l'en-tête fixe. */
.blog-corps h2 { scroll-margin-top: 5rem; }
/* ─────────────────── Encadrés ─────────────────── */
.blog-encadre {
border: 1px solid var(--blog-bordure);
border-left: 3px solid var(--blog-cyan);
background: var(--blog-surface);
border-radius: .35rem 1rem 1rem .35rem;
padding: 1.1rem 1.35rem;
margin: 1.75rem 0;
}
.blog-encadre p:last-child { margin-bottom: 0; }
.blog-encadre--bon { border-left-color: var(--blog-emerald); }
.blog-encadre--mauvais { border-left-color: #f87171; }
.blog-encadre-titre {
display: block;
font-size: .7rem;
font-weight: 800;
letter-spacing: .09em;
text-transform: uppercase;
margin-bottom: .5rem;
color: var(--blog-cyan);
}
.blog-encadre--bon .blog-encadre-titre { color: var(--blog-emerald); }
.blog-encadre--mauvais .blog-encadre-titre { color: #f87171; }
.blog-citation { font-style: italic; color: #e2e8f0; }
/* ─────────────────── Tableaux ─────────────────── */
/* Le conteneur permet le défilement horizontal sur mobile plutôt que de faire
déborder la page — un tableau à 3 colonnes ne rentre pas sur 360 px. */
.blog-tableau-zone {
overflow-x: auto;
margin: 1.75rem 0;
border: 1px solid var(--blog-bordure);
border-radius: 1rem;
-webkit-overflow-scrolling: touch;
}
.blog-tableau { width: 100%; border-collapse: collapse; font-size: .95rem; min-width: 30rem; }
.blog-tableau th {
text-align: left;
font-weight: 700;
color: #fff;
background: rgba(30, 41, 59, .5);
padding: .85rem 1rem;
white-space: nowrap;
}
.blog-tableau td { padding: .85rem 1rem; border-top: 1px solid rgba(51, 65, 85, .5); }
.blog-tableau tbody tr:hover { background: rgba(30, 41, 59, .3); }
.blog-tableau .accent { color: #fff; font-weight: 700; }
/* ─────────────────── Cartes d'articles (index) ─────────────────── */
.blog-grille { display: grid; gap: 1.25rem; }
.blog-carte {
position: relative;
display: block;
border: 1px solid var(--blog-bordure);
background: var(--blog-surface);
border-radius: 1.25rem;
padding: 1.6rem;
text-decoration: none;
transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.blog-carte:hover {
transform: translateY(-3px);
border-color: rgba(34, 211, 238, .5);
box-shadow: 0 12px 30px -12px rgba(34, 211, 238, .3);
}
.blog-carte-titre {
font-family: var(--blog-titre-police);
font-size: 1.25rem;
font-weight: 750;
line-height: 1.3;
color: #fff;
margin: .6rem 0 .6rem;
text-wrap: balance;
}
.blog-carte:hover .blog-carte-titre { color: var(--blog-cyan); }
.blog-carte-resume { color: #94a3b8; font-size: .95rem; line-height: 1.65; margin: 0 0 1rem; }
.blog-carte-lire { color: var(--blog-cyan); font-weight: 650; font-size: .9rem; }
.blog-carte:hover .blog-carte-lire { text-decoration: underline; }
/* ─────────────────── Appel à l'action ─────────────────── */
.blog-cta {
border: 1px solid rgba(34, 211, 238, .25);
border-radius: 1.25rem;
padding: 1.75rem;
margin: 3rem 0 0;
background:
radial-gradient(120% 140% at 0% 0%, rgba(34, 211, 238, .10), transparent 60%),
var(--blog-surface);
}
.blog-cta p { color: var(--blog-texte); margin: 0 0 1.25rem; line-height: 1.7; }
.blog-cta strong { color: #fff; }
/* ⚠️ TEXTE BLANC SUR UN DÉGRADÉ ASSOMBRI — les deux vont ensemble, ne pas en changer un seul.
Mesuré au ratio de contraste WCAG (seuil 4,5:1 pour du texte normal) :
blanc sur #06b6d4 (cyan-500) → 2,43:1 ❌ illisible
blanc sur #0891b2 (cyan-600) → 3,68:1 ❌ insuffisant à cette taille
blanc sur #0e7490 (cyan-700) → 5,36:1 ✅
blanc sur #047857 (emerald-700) → 5,48:1 ✅
Le blanc est le choix d'Alexy ; le ton 700 est ce qui le rend lisible. Éclaircir le
dégradé vers cyan-500/emerald-500 « pour retrouver la couleur de la marque » ferait
retomber le bouton sous le seuil. Le survol éclaircit d'un cran, ce qui suffit à
signaler l'interaction sans casser le contraste au repos. */
.blog-bouton {
display: inline-block;
padding: .85rem 1.6rem;
border-radius: 1rem;
font-weight: 800;
color: #fff;
text-decoration: none;
background: linear-gradient(100deg, #0e7490, #047857);
box-shadow: 0 10px 24px -10px rgba(6, 182, 212, .5);
transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.blog-bouton:hover {
transform: translateY(-2px);
filter: brightness(1.08);
box-shadow: 0 16px 30px -12px rgba(6, 182, 212, .8);
}
/* ⚠️ INDISPENSABLE — bug vécu le 2026-08-08.
Un bouton placé DANS un article est aussi un « .blog-corps a ». Or ce sélecteur
(0,1,1) est plus spécifique que « .blog-bouton » (0,1,0) : le bouton héritait du
cyan et du soulignement des liens de texte — du cyan sur un dégradé cyan, donc
illisible. Le même bouton sur /blog/ s'affichait correctement (il n'est pas dans
.blog-corps), ce qui rendait le défaut déroutant : visible dans les articles
seulement. Ce sélecteur monte à (0,2,1) et tranche sans ambiguïté.
On NE corrige PAS en ajoutant :not(.blog-bouton) sur « .blog-corps a » : ça ferait
passer ce sélecteur à (0,2,1) et il écraserait à son tour « .blog-sommaire a ». */
.blog-corps a.blog-bouton {
color: #fff;
text-decoration: none;
}
/* ─────────────────── Pied d'article ─────────────────── */
.blog-suite {
margin-top: 3rem;
padding-top: 1.75rem;
border-top: 1px solid var(--blog-bordure);
}
.blog-suite-label {
font-size: .7rem; font-weight: 800; letter-spacing: .09em;
text-transform: uppercase; color: #8296ae; display: block; margin-bottom: .6rem;
}
/* Sélecteur volontairement porté à (0,2,1) : la note est un à l'intérieur de
.blog-corps, et « .blog-corps p { margin: 0 0 1.15rem } » (0,1,1) écrasait son
margin-top — la note se collait au paragraphe précédent. Même famille de bug que
le bouton : une règle générique qui gagne contre une classe de composant. */
.blog-corps p.blog-note,
.blog-note {
font-size: .85rem;
color: #8296ae;
line-height: 1.65;
margin-top: 2rem;
padding-top: 1.25rem;
border-top: 1px solid rgba(51, 65, 85, .5);
}
/* ─────────────────── Confort et accessibilité ─────────────────── */
/* Cible tactile d'au moins 44 px et anneau de focus visible au clavier :
deux exigences d'accessibilité que le design sombre fait facilement oublier. */
.blog-carte, .blog-bouton { min-height: 44px; }
.blog-page a:focus-visible {
outline: 2px solid var(--blog-cyan);
outline-offset: 3px;
border-radius: 4px;
}
@media (prefers-reduced-motion: reduce) {
.blog-carte, .blog-bouton { transition: none; }
.blog-carte:hover, .blog-bouton:hover { transform: none; }
}
@media (max-width: 480px) {
.blog-corps { font-size: 1rem; }
.blog-carte { padding: 1.25rem; }
.blog-cta { padding: 1.35rem; }
}