/* ====================================================
   PLANTIDICO — page-blog.css (Lot 5 Étape C)
   Layout d'assemblage 3 templates blog :
   - archive-blog.html      (/blog/)
   - blog-category.html     (/blog/{category}/)
   - single-article.html    (/blog/{category}/{slug}/)

   Pas de re-définition de composants existants (tous
   stylés dans components.css ou gutenberg-blocks.css).
   Ce fichier ne contient que les containers de page,
   les paddings entre zones, le layout 2-col single
   article (TOC sticky + body) et les ajustements
   responsive.
   ==================================================== */


/* Reset minimal page (mêmes règles que page-fiche-plante / page-archive) */
body {
  margin: 0;
  background: var(--linen);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--text-body-m);
  line-height: var(--leading-body-m);
}


/* ====================================================
   BLOG ARCHIVE — wrapper + container
   Réutilise pattern .archive__container Lot 3.
   ==================================================== */
.blog-archive {
  background: var(--linen);
}
.blog-archive__container {
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--container-padding);
}
@media (max-width: 768px) {
  .blog-archive__container {
    padding-inline: var(--container-padding-mobile);
  }
}


/* ====================================================
   BREADCRUMB
   ==================================================== */
.blog-archive__breadcrumb {
  padding-block: var(--space-12) 0;
}


/* ====================================================
   HEADER DE PAGE
   ==================================================== */
.blog-archive__header {
  padding-block: var(--space-24) var(--space-12);
}
.blog-archive__count {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-eyebrow);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--ink-mute);
  font-weight: var(--weight-mono);
  margin-top: var(--space-8);
}


/* ====================================================
   GRID ARTICLES
   Wrapper neutre. .card-article-grid (composant 29)
   gère la grille 3 cols + responsive.
   ==================================================== */
.blog-archive__grid {
  padding-block: var(--space-12) var(--space-32);
}


/* ====================================================
   PAGINATION
   ==================================================== */
.blog-archive__pagination {
  margin-top: 0;
  padding-bottom: var(--space-44);
}


/* ====================================================
   EMPTY STATE archive blog
   ==================================================== */
.blog-archive__empty {
  min-height: 360px;
  display: flex;
  align-items: center;
  justify-content: center;
}


/* ====================================================
   BLOG SINGLE — wrapper + layout 2 cols
   Sidebar TOC 240px sticky + body 740px max.
   Mobile <1024px : TOC display:none (cohérent
   page-fiche-plante.css).
   ==================================================== */
.blog-single {
  background: var(--linen);
}
.blog-single__layout {
  max-width: var(--max-w);
  margin-inline: auto;
  padding-block: var(--space-44) var(--space-48);
  padding-inline: var(--container-padding);
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: var(--space-44);
  align-items: start;
}
.blog-single__body {
  min-width: 0;
  max-width: var(--max-w-text);
}

/* Patches V1 P3 (2026-05-09) : si pas de TOC, layout 1 col propre. */
.blog-single__layout--no-toc {
  grid-template-columns: 1fr;
}


/* ====================================================
   DISCLAIMER MÉDICAL en bas du single article
   Spacing au-dessus pour le détacher du dernier
   paragraphe / dernière section.
   ==================================================== */
.blog-single__disclaimer {
  margin-top: var(--space-32);
  margin-bottom: 0;
  max-width: 100%;
}


/* ====================================================
   RESPONSIVE
   ==================================================== */

/* Hide TOC en mobile/tablet (<1024px). Body passe en 1 col. */
@media (max-width: 1023px) {
  .blog-single__layout {
    grid-template-columns: 1fr;
    gap: 0;
    padding-block: var(--space-32) var(--space-32);
  }
  .blog-single .toc {
    display: none;
  }
}

@media (max-width: 768px) {
  .blog-single__layout {
    padding-inline: var(--container-padding-mobile);
  }
  .blog-archive__header {
    padding-block: var(--space-16) var(--space-8);
  }
  .blog-archive__pagination {
    padding-bottom: var(--space-32);
  }
}