/* * typography.css — Titres, corps, liens, contenu éditorial, code, tableaux. */ /* ── Headings ────────────────────────────────────────────────────── */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-body); font-weight: var(--fw-bold); line-height: var(--lh-tight); color: var(--fg); letter-spacing: -0.02em; } h1 { font-size: var(--text-4xl); } h2 { font-size: var(--text-3xl); } h3 { font-size: var(--text-2xl); } h4 { font-size: var(--text-xl); font-weight: var(--fw-semi); } h5 { font-size: var(--text-lg); font-weight: var(--fw-semi); } h6 { font-size: var(--text-md); font-weight: var(--fw-semi); } @media (max-width: 767px) { h1 { font-size: var(--text-3xl); } h2 { font-size: var(--text-2xl); } h3 { font-size: var(--text-xl); } } /* ── Paragraphes ─────────────────────────────────────────────────── */ p { line-height: var(--lh-relaxed); } p + p { margin-top: var(--space-4); } /* ── Contenu éditorial — aération entre blocs ────────────────────── */ /* Pattern "stack" scopé à .entry-content : espacement vertical entre tous les enfants directs (p→p, p→h2, p→ul, h2→p, ul→p, etc.). Plus large que la règle globale `p + p` ci-dessus qui ne couvre que les paragraphes consécutifs. Même valeur que `p + p` pour qu'aucune addition ne se produise là où les deux règles matchent. */ .entry-content > * + * { margin-top: var(--space-4); } /* Justification du contenu éditorial : paragraphes + items de liste (pas titres, boutons, tableaux). hyphens: auto évite les rivières typographiques — activé grâce à lang="fr-FR" sur . */ .entry-content p, .entry-content li { text-align: justify; hyphens: auto; -webkit-hyphens: auto; hyphenate-limit-chars: 6 3 3; } /* ── Liens ───────────────────────────────────────────────────────── */ a { color: var(--link); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; transition: color var(--transition); } a:hover { color: var(--bw-red-hover); text-decoration-thickness: 2px; } /* Liens UI — ni soulignement, ni couleur bleue éditoriale. :not(.btn) partout : les règles descendantes (spé 0,1,1) écraseraient sinon .btn-primary (0,1,0) → texte gris au lieu de blanc sur les CTAs. */ nav a:not(.btn), .site-header a:not(.btn), .site-footer a:not(.btn), .qualifs-bar a:not(.btn), .breadcrumb a:not(.btn), .card a:not(.btn) { text-decoration: none; color: inherit; } /* ── Code inline ─────────────────────────────────────────────────── */ code, kbd, samp { font-family: var(--font-mono); font-size: 0.875em; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0.1em 0.35em; color: var(--fg); } /* ── Blocs de code ───────────────────────────────────────────────── */ pre { font-family: var(--font-mono); font-size: var(--text-sm); line-height: var(--lh-relaxed); background: #1a1d21; color: #e8eaed; border-radius: var(--radius-md); padding: var(--space-6); overflow-x: auto; tab-size: 2; } [data-theme="dark"] pre { background: #0a0c10; border: 1px solid var(--border); } pre code { background: none; border: none; padding: 0; font-size: inherit; color: inherit; } /* ── Blockquote ──────────────────────────────────────────────────── */ blockquote { border-left: 4px solid var(--accent); padding: var(--space-4) var(--space-6); background: var(--surface); border-radius: 0 var(--radius-md) var(--radius-md) 0; font-size: var(--text-md); color: var(--fg); font-style: italic; } blockquote cite { display: block; margin-top: var(--space-3); font-size: var(--text-sm); font-style: normal; color: var(--fg-muted); } blockquote cite::before { content: '— '; } /* ── Listes éditoriales (dans .entry-content uniquement) ─────────── */ .entry-content ul, .entry-content ol { padding-left: var(--space-6); margin-top: var(--space-4); } .entry-content ul { list-style: disc; } .entry-content ol { list-style: decimal; } .entry-content li { margin-top: var(--space-2); line-height: var(--lh-relaxed); } .entry-content li + li { margin-top: var(--space-2); } .entry-content ul ul, .entry-content ol ol { margin-top: var(--space-2); } /* ── Tableaux éditoriaux ─────────────────────────────────────────── */ .entry-content table { width: 100%; margin-top: var(--space-6); font-size: var(--text-sm); line-height: var(--lh-snug); } .entry-content th, .entry-content td { padding: var(--space-3) var(--space-4); text-align: left; border-bottom: 1px solid var(--border); vertical-align: top; } .entry-content th { font-weight: var(--fw-semi); color: var(--fg); background: var(--surface); } .entry-content tr:hover td { background: var(--surface); } /* ── HR ──────────────────────────────────────────────────────────── */ hr { border: none; border-top: 1px solid var(--border); margin: var(--space-8) 0; } /* ── Inline ──────────────────────────────────────────────────────── */ strong, b { font-weight: var(--fw-semi); color: var(--fg); } em, i { font-style: italic; } mark { background: var(--bw-red-light); color: var(--fg); padding: 0 0.2em; border-radius: 2px; } small { font-size: var(--text-sm); } sup, sub { font-size: 0.75em; line-height: 0; position: relative; vertical-align: baseline; } sup { top: -0.5em; } sub { bottom: -0.25em; }