/* ============================================================ Blog Ai4x */

/* Grille de la liste d'articles */
.post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-top: 8px; }
.post-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; transition: transform .15s, box-shadow .15s; }
.post-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.post-card__img { aspect-ratio: 1200/630; background: linear-gradient(135deg, #f3f1ff, #fbeaef); overflow: hidden; }
.post-card__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.post-card__body { padding: 20px 22px 24px; display: flex; flex-direction: column; flex: 1; }
.post-card__meta { font-size: .8rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 8px; }
.post-card__body h3 { font-size: 1.15rem; line-height: 1.3; margin-bottom: 8px; }
.post-card__body p { font-size: .94rem; color: var(--muted); margin-bottom: 14px; }
.post-card__more { margin-top: auto; font-weight: 600; font-size: .9rem; color: var(--indigo); }

/* En-tête d'article */
.post { padding: clamp(40px, 6vw, 72px) 0 60px; }
.post__top { max-width: 760px; }
.post__back { font-weight: 600; font-size: .9rem; color: var(--indigo); }
.post__meta { font-size: .85rem; color: var(--muted); margin: 18px 0 8px; text-transform: uppercase; letter-spacing: .04em; }
.post__title { font-size: clamp(1.9rem, 4vw, 2.8rem); line-height: 1.12; letter-spacing: -.02em; }
.post__lead { font-size: 1.15rem; color: var(--ink-soft, #4a4852); margin-top: 16px; max-width: 760px; }
.post__cover { width: 100%; max-width: 960px; aspect-ratio: 1200/630; object-fit: cover; border-radius: var(--radius-lg); margin: 30px 0 10px; display: block; }

/* Corps d'article (typographie de lecture) */
.post__body { max-width: 760px; }
.prose { font-size: 1.08rem; line-height: 1.75; color: #2a2930; }
.prose > * + * { margin-top: 1.1em; }
.prose h2 { font-size: 1.6rem; line-height: 1.25; margin-top: 1.8em; letter-spacing: -.01em; }
.prose h3 { font-size: 1.28rem; margin-top: 1.6em; }
.prose a { color: var(--indigo); text-decoration: underline; text-underline-offset: 2px; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li + li { margin-top: .4em; }
.prose img { max-width: 100%; height: auto; border-radius: 14px; }
.prose blockquote { border-left: 4px solid var(--lime); background: #f7fbe9; margin: 1.4em 0; padding: 14px 22px; border-radius: 10px; color: #3a393e; font-style: italic; }
.prose code { background: #f3f1f6; border-radius: 6px; padding: .12em .4em; font-size: .92em; }
.prose pre { background: var(--ink); color: #f4f2f7; border-radius: 12px; padding: 18px 20px; overflow: auto; }
.prose pre code { background: none; padding: 0; }

.post__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 34px; }
.post__tag { font-size: .8rem; font-weight: 600; color: var(--indigo); background: rgba(108,97,236,.10); border-radius: 999px; padding: 5px 13px; }

.post__cta { margin-top: 44px; background: linear-gradient(135deg, #f3f1ff, #fbeaef); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 30px 28px; text-align: center; }
.post__cta h3 { font-size: 1.3rem; margin-bottom: 6px; }
.post__cta p { color: var(--ink-soft, #4a4852); margin-bottom: 18px; }

@media (max-width: 900px) { .post-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .post-grid { grid-template-columns: 1fr; } }