/* Blog : liste d'articles, page article, sommaire. S'appuie sur les couleurs et typographies du site. */
.blog-list, .blog-related { background: #f2ede4; color: #171512; padding: clamp(56px, 8vw, 110px) clamp(20px, 7vw, 112px); }
.blog-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 32px); }
.blog-card { background: #fbf8f2; border: 1px solid #17151224; transition: box-shadow .3s, transform .3s; }
.blog-card:hover { box-shadow: 0 18px 40px #17151214; transform: translateY(-3px); }
.blog-card-link { display: flex; flex-direction: column; height: 100%; color: inherit; text-decoration: none; }
.blog-card-media { aspect-ratio: 16 / 10; overflow: hidden; background: #1a1814; }
.blog-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(.85); transition: transform .6s; }
.blog-card:hover .blog-card-media img { transform: scale(1.04); }
.blog-card-body { display: flex; flex-direction: column; gap: 10px; padding: 22px 22px 26px; flex: 1; }
.blog-card-meta { margin: 0; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: #9b6d35; }
.blog-card h2 { margin: 0; font-family: var(--font-cormorant), serif; font-weight: 500; font-size: clamp(24px, 2.2vw, 30px); line-height: 1.12; }
.blog-card p:not(.blog-card-meta) { margin: 0; color: #645c53; font-size: 14px; line-height: 1.65; }
.blog-card-more { margin-top: auto; padding-top: 10px; display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; color: #8c5e2b; }
.blog-card-more svg { width: 15px; height: 15px; }
.blog-empty { text-align: center; color: #645c53; }

.blog-meta { font-size: 13px; letter-spacing: .04em; opacity: .75; }
.blog-article { background: #f2ede4; color: #171512; padding: clamp(48px, 7vw, 96px) clamp(20px, 7vw, 112px); }
.blog-article-inner { max-width: 760px; margin: 0 auto; }
.blog-toc { border: 1px solid #17151224; background: #fbf8f2; padding: 20px 24px; margin-bottom: 40px; }
.blog-toc p { margin: 0 0 8px; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: #9b6d35; }
.blog-toc ol { margin: 0; padding-left: 20px; display: grid; gap: 6px; font-size: 14px; }
.blog-toc a { color: #3b352e; text-decoration: none; }
.blog-toc a:hover { color: #8c5e2b; text-decoration: underline; }

.prose { font-size: clamp(16px, 1.25vw, 18px); line-height: 1.8; color: #2c2722; }
.prose h2, .prose h3, .prose h4 { font-family: var(--font-cormorant), serif; font-weight: 500; line-height: 1.12; color: #171512; scroll-margin-top: 96px; }
.prose h2 { font-size: clamp(30px, 3.2vw, 42px); margin: 2.1em 0 .55em; }
.prose h3 { font-size: clamp(24px, 2.4vw, 30px); margin: 1.7em 0 .5em; }
.prose h4 { font-size: 22px; margin: 1.5em 0 .4em; }
.prose p, .prose ul, .prose ol, .prose blockquote { margin: 0 0 1.2em; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li { margin-bottom: .45em; }
.prose a { color: #8c5e2b; text-decoration: underline; text-underline-offset: 3px; }
.prose a:hover { color: #6c451d; }
.prose strong { color: #171512; }
.prose blockquote { border-left: 2px solid #c9985a; padding: 4px 0 4px 22px; font-family: var(--font-cormorant), serif; font-size: 1.35em; color: #3b352e; }
.prose img { max-width: 100%; height: auto; }
.prose hr { border: 0; border-top: 1px solid #17151224; margin: 2.4em 0; }
.prose code { background: #17151210; padding: 1px 6px; font-size: .9em; }

.blog-cta { background: #0b0b0a; color: #f4efe6; padding: clamp(64px, 9vw, 120px) clamp(20px, 7vw, 112px); text-align: center; }
.blog-cta > div { max-width: 720px; margin: 0 auto; display: grid; gap: 18px; justify-items: center; }
.blog-cta h2 { margin: 0; font-family: var(--font-cormorant), serif; font-weight: 500; font-size: clamp(36px, 4.6vw, 62px); line-height: 1; }
.blog-cta h2 em { color: #d8ae77; }
.blog-cta p { margin: 0; color: #c9c0b3; }
.blog-related h2 { font-family: var(--font-cormorant), serif; font-weight: 500; font-size: clamp(30px, 3.4vw, 44px); margin: 0 0 28px; }
.blog-faq { margin: 0; }

@media (max-width: 960px) { .blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .blog-grid { grid-template-columns: minmax(0, 1fr); } }