/* Styles propres au blog. Fichier séparé et chargé uniquement sur /blog :
   styles.css reste strictement identique au site d'origine. */

.blog-hero {
  padding: 132px 0 46px;
  background: var(--cream-2);
  border-bottom: 1px solid var(--line);
}
.blog-hero h1 {
  font-family: var(--serif);
  font-size: clamp(34px, 5vw, 54px);
  line-height: 1.08;
  margin: 10px 0 14px;
  color: var(--forest);
}
.blog-hero p {
  color: var(--ink-soft);
  font-size: 17px;
  max-width: 620px;
  margin: 0;
}

.post-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 28px;
}
.post-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform .25s ease, box-shadow .25s ease;
  display: flex;
  flex-direction: column;
}
.post-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.post-card .cover { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--cream-2); }
.post-card .body { padding: 22px 22px 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
/* h3 sur l'accueil, où les cartes sont sous le h2 de la section. */
.post-card h2, .post-card h3 { font-family: var(--serif); font-size: 21px; line-height: 1.25; margin: 0; color: var(--forest); }
.post-card p { color: var(--ink-soft); font-size: 15px; line-height: 1.6; margin: 0; flex: 1; }
.post-meta { font-size: 13px; color: var(--ink-soft); opacity: .8; display: flex; gap: 8px; flex-wrap: wrap; }
.post-card a.title-link { text-decoration: none; }

.post-tags { display: flex; gap: 8px; flex-wrap: wrap; }
.post-tag {
  font-size: 12px; font-weight: 600; letter-spacing: .02em;
  color: var(--forest-2); background: rgba(64, 145, 108, .12);
  padding: 4px 10px; border-radius: 999px;
}

/* ── Article ─────────────────────────────────────────────────────────────── */

.article-head { padding: 128px 0 0; }
.article-head .back { font-size: 14px; color: var(--ink-soft); text-decoration: none; }
.article-head .back:hover { color: var(--forest); }
.article-head h1 {
  font-family: var(--serif);
  font-size: clamp(30px, 4.4vw, 47px);
  line-height: 1.1;
  color: var(--forest);
  margin: 14px 0 16px;
}
.article-cover {
  width: 100%; max-height: 460px; object-fit: cover;
  border-radius: var(--radius-lg); margin: 30px 0 6px; background: var(--cream-2);
}
.article-body { max-width: 760px; margin: 0 auto; padding: 26px 0 70px; font-size: 17.5px; line-height: 1.75; color: var(--ink); }
.article-body h2 { font-family: var(--serif); font-size: 29px; line-height: 1.2; color: var(--forest); margin: 42px 0 14px; }
.article-body h3 { font-family: var(--serif); font-size: 23px; color: var(--forest-2); margin: 32px 0 10px; }
.article-body p { margin: 0 0 20px; }
.article-body ul, .article-body ol { margin: 0 0 20px; padding-left: 24px; }
.article-body li { margin-bottom: 8px; }
.article-body a { color: var(--forest-2); text-underline-offset: 3px; }
.article-body img { max-width: 100%; border-radius: var(--radius); margin: 12px 0; }
.article-body blockquote {
  margin: 26px 0; padding: 4px 0 4px 22px;
  border-left: 3px solid var(--harvest); color: var(--ink-soft); font-style: italic;
}
.article-body code {
  background: var(--cream-2); padding: 2px 6px; border-radius: 6px;
  font-size: .92em; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.article-body pre { background: var(--forest); color: #eaf3ee; padding: 18px 20px; border-radius: var(--radius); overflow-x: auto; }
.article-body pre code { background: none; color: inherit; padding: 0; }
.article-body table { width: 100%; border-collapse: collapse; margin: 0 0 22px; font-size: 15.5px; }
.article-body th, .article-body td { border: 1px solid var(--line); padding: 10px 12px; text-align: left; }
.article-body th { background: var(--cream-2); font-weight: 600; }
@media (max-width: 640px) {
  .blog-hero { padding: 110px 0 36px; }
  .article-head { padding: 108px 0 0; }
}