/* ═══════════════════════════════════════════════════════════════ ARTICLE · Page d'un article de blog ─────────────────────────────────────────────────────────────── Style papier ivoire, lecture longue forme, max-width 720px. Aucun mode sombre : data-theme="light" forcé sur . ═══════════════════════════════════════════════════════════════ */ .article-page { max-width: 760px; margin: 0 auto; padding: 40px 24px 80px; } /* ─── Breadcrumb ──────────────────────────────────────────────── */ .article-breadcrumb { margin-bottom: 32px; font-family: 'Inter', sans-serif; font-size: 13px; color: #8a93a3; } .article-breadcrumb ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; } .article-breadcrumb li { display: flex; align-items: center; gap: 8px; } .article-breadcrumb li + li::before { content: "·"; color: #b3b9c4; margin-right: 8px; } .article-breadcrumb a { color: #5a6478; text-decoration: none; transition: color 0.15s ease; } .article-breadcrumb a:hover { color: #c9a36a; } .article-breadcrumb [aria-current="page"] { color: #1a2238; } /* ─── Article header ──────────────────────────────────────────── */ .article-head { margin-bottom: 40px; padding-bottom: 28px; border-bottom: 1px solid rgba(15,20,36,0.08); } .article-sigil { display: block; width: 28px; height: 28px; color: #c9a36a; margin-bottom: 20px; } .article-title { margin: 0 0 20px 0; font-family: var(--font-heading, 'Montserrat', sans-serif); font-weight: 600; font-size: clamp(28px, 3.4vw, 40px); line-height: 1.18; letter-spacing: -0.005em; color: #1a2238; } .article-byline { font-family: 'Inter', sans-serif; font-size: 14px; line-height: 1.6; color: #5a6478; } .article-byline a { color: #1a2238; font-weight: 500; text-decoration: none; border-bottom: 1px solid rgba(201,163,106,0.4); transition: border-color 0.15s ease; } .article-byline a:hover { border-bottom-color: #c9a36a; } .article-byline time { color: #8a93a3; } /* ─── Article body ────────────────────────────────────────────── */ .article-body { font-family: 'Inter', sans-serif; font-size: 17px; line-height: 1.7; color: #2d3a52; } .article-body > * + * { margin-top: 1.1em; } .article-body h2 { margin-top: 2.4em; margin-bottom: 0.6em; font-family: var(--font-heading, 'Montserrat', sans-serif); font-weight: 600; font-size: clamp(22px, 2.4vw, 28px); line-height: 1.28; letter-spacing: -0.003em; color: #1a2238; } .article-body h3 { margin-top: 1.8em; margin-bottom: 0.5em; font-family: var(--font-heading, 'Montserrat', sans-serif); font-weight: 600; font-size: 18px; line-height: 1.32; color: #1a2238; } .article-body p { margin: 0; } .article-body a { color: #8d6f3a; text-decoration: none; border-bottom: 1px solid rgba(201,163,106,0.35); transition: color 0.15s ease, border-color 0.15s ease; } .article-body a:hover { color: #1a2238; border-bottom-color: #c9a36a; } .article-body strong { color: #1a2238; font-weight: 600; } .article-body em { font-style: italic; } .article-body ul, .article-body ol { padding-left: 22px; margin: 0; } .article-body li + li { margin-top: 0.4em; } .article-body code { font-family: 'JetBrains Mono', monospace; font-size: 0.92em; background: rgba(201,163,106,0.10); padding: 1px 6px; border-radius: 4px; color: #1a2238; } /* ─── Encadrés définition (blockquote) ────────────────────────── */ .article-body blockquote { margin: 1.8em 0; padding: 18px 22px; background: #fcfaf4; border-left: 3px solid #c9a36a; border-radius: 0 8px 8px 0; font-family: 'Inter', sans-serif; font-size: 15.5px; line-height: 1.6; color: #2d3a52; } .article-body blockquote p { margin: 0; } .article-body blockquote strong { color: #1a2238; font-weight: 700; } /* ─── FAQ ─────────────────────────────────────────────────────── */ .article-faq { margin-top: 3em; padding-top: 2em; border-top: 1px solid rgba(15,20,36,0.08); } .article-faq h2 { margin-top: 0; } .article-faq-item { margin-top: 2em; } .article-faq-item h3 { margin-top: 0; margin-bottom: 0.5em; font-family: var(--font-heading, 'Montserrat', sans-serif); font-weight: 600; font-size: 17px; line-height: 1.4; color: #1a2238; } .article-faq-item p { margin: 0; } /* ─── Disclaimer ──────────────────────────────────────────────── */ .article-disclaimer { margin-top: 3em; padding: 18px 22px; background: #fcfaf4; border: 1px solid rgba(15,20,36,0.08); border-radius: 8px; font-family: 'Inter', sans-serif; font-size: 13.5px; line-height: 1.6; color: #5a6478; } .article-disclaimer strong { color: #1a2238; font-weight: 600; } /* ─── Bio auteur ──────────────────────────────────────────────── */ .article-bio { margin-top: 2.5em; padding-top: 2em; border-top: 1px solid rgba(15,20,36,0.08); text-align: center; font-family: 'Inter', sans-serif; font-size: 14.5px; line-height: 1.6; color: #5a6478; font-style: italic; } .article-bio strong { color: #1a2238; font-weight: 600; font-style: normal; } /* ─── Lien retour blog ────────────────────────────────────────── */ .article-back { display: inline-flex; align-items: center; gap: 8px; margin-top: 3em; font-family: 'Inter', sans-serif; font-size: 14px; color: #8d6f3a; text-decoration: none; font-weight: 500; transition: gap 0.18s ease, color 0.15s ease; } .article-back:hover { gap: 12px; color: #1a2238; } /* ─── Skip link ───────────────────────────────────────────────── */ .skip-link { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; } .skip-link:focus { position: fixed; top: 12px; left: 12px; width: auto; height: auto; padding: 10px 16px; background: #1a2238; color: #ffffff; border-radius: 6px; font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 500; z-index: 9999; text-decoration: none; } /* ─── Responsive ──────────────────────────────────────────────── */ @media (max-width: 640px) { .article-page { padding: 28px 20px 64px; } .article-head { margin-bottom: 32px; } .article-body { font-size: 16px; line-height: 1.65; } .article-body blockquote { padding: 14px 18px; font-size: 14.5px; } }