/* =====================================================================
   Blog — complément à style.css (mêmes variables, même langage visuel).
   Chargé uniquement sur /blog et /blog/<article>.
   ===================================================================== */

/* ---------- Grille d'articles ---------- */
.posts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 26px;
}

.post-card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  color: inherit;
  box-shadow: var(--shadow-sm);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.post-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--emerald);
  color: inherit;
}

.post-card__media {
  display: block;
  aspect-ratio: 16 / 9;
  background: var(--bg-alt);
  overflow: hidden;
}
.post-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.post-card:hover .post-card__media img { transform: scale(1.04); }

.post-card__body { display: block; padding: 24px; }
.post-card__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  font-size: .82rem; color: var(--muted); margin-bottom: 12px;
}
.post-card__cat {
  font-weight: 700; font-size: .7rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--emerald-dark); background: var(--emerald-soft);
  padding: 5px 11px; border-radius: 999px;
}
.post-card h3 { margin: 0 0 10px; font-size: 1.25rem; }
.post-card p { color: var(--muted); font-size: .96rem; margin: 0 0 16px; }

/* ---------- Article ---------- */
.article { max-width: 780px; margin-inline: auto; }
.article__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  color: var(--muted); font-size: .9rem; margin-bottom: 8px;
}
/* Page article : le chapeau et l'image d'ouverture appartiennent au même bloc.
   Sans cela, le bas du hero (jusqu'à 88px) s'ajoute au haut de la section
   (jusqu'à 116px) et laisse un trou de plus de 200px sur grand écran. */
.hero--article { padding-bottom: clamp(18px, 2vw, 26px); }
.section--article { padding-top: clamp(16px, 2vw, 24px); }

/* Le cadre arrondi porte sur l'image, pas sur la figure : la légende reste
   au-dessous du visuel au lieu d'être enfermée dans la vignette, collée au bord. */
.article__cover { margin: 0 0 clamp(28px, 4vw, 44px); }
.article__cover img {
  width: 100%; display: block;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}
.article__cover figcaption {
  font-size: .85rem; color: var(--muted); text-align: center;
  margin-top: 12px; padding: 0 4px;
}

/* Image insérée dans le corps de l'article, via un emplacement préparé. */
.article__figure { margin: clamp(28px, 4vw, 40px) 0; }
.article__body .article__figure img {
  width: 100%; height: auto; display: block;
  border-radius: var(--radius); box-shadow: var(--shadow-sm);
  /* annule la marge de 28px que .article__body img applique aux images
     autonomes : ici elle écarterait l'image de sa propre légende.
     Sélecteur plus précis, sinon la règle générale déclarée plus bas l'emporte. */
  margin: 0;
}
.article__figure figcaption {
  font-size: .85rem; color: var(--muted); text-align: center;
  margin-top: 12px; padding: 0 4px;
}

.article__body { font-size: 1.08rem; }
.article__body h2 { margin-top: 1.8em; }
.article__body h3 { margin-top: 1.6em; font-size: 1.18rem; }
.article__body img { border-radius: var(--radius); margin: 28px 0; box-shadow: var(--shadow-sm); }
.article__body a { text-decoration: underline; text-underline-offset: 3px; }

.article__list { margin: 0 0 1.2em; padding-left: 1.25em; }
.article__list li { margin-bottom: .5em; }

.article__quote {
  margin: 32px 0; padding: 4px 0 4px 24px;
  border-left: 3px solid var(--emerald);
  color: var(--ink); font-family: var(--font-head); font-size: 1.2rem; font-style: italic;
}
.article__quote p:last-child { margin-bottom: 0; }

.article__hr { border: none; border-top: 1px solid var(--line); margin: 40px 0; }

.article__code {
  background: var(--forest); color: #E8E4D8;
  padding: 18px 20px; border-radius: var(--radius-sm);
  overflow-x: auto; font-size: .9rem; line-height: 1.6; margin: 0 0 1.2em;
}
.article__body code {
  background: var(--bg-alt); border: 1px solid var(--line);
  padding: 2px 6px; border-radius: 6px; font-size: .9em;
}
.article__code code { background: none; border: none; padding: 0; }

/* Encart de rappel en fin d'article */
.article__cta {
  margin: clamp(40px, 6vw, 64px) 0 0;
  background: var(--forest); color: #CFCABE;
  border-radius: var(--radius-lg); padding: clamp(28px, 4vw, 44px);
  text-align: center;
}
.article__cta h2 { color: #fff; margin-bottom: .4em; }
.article__cta p { color: #B6B0A3; max-width: 520px; margin-inline: auto; }

/* État vide */
.blog-empty {
  text-align: center; color: var(--muted);
  border: 1px dashed var(--line); border-radius: var(--radius);
  padding: clamp(40px, 6vw, 72px) 24px; background: var(--white);
}

/* Pagination */
.pagination {
  display: flex; justify-content: center; align-items: center; gap: 14px;
  margin-top: clamp(36px, 5vw, 56px);
}
.pagination span { color: var(--muted); font-size: .92rem; }