/*═══════════════════════════════════════════════════════════════════════════
  EAU DE VIGNE — Carnet · feuille des index d'articles
  Lot BLOG-INDEX (2026-09-04)

  Chargée automatiquement par functions.php §8 selon le nom du gabarit
  résolu. Ce même contenu existe donc en DEUX exemplaires :
  assets/pages/index.css (la page des articles, /blog/) et
  assets/pages/archive.css (les catégories, /category/<slug>/).
  Le chargeur est indexé par nom de gabarit, il n'a pas de mécanisme
  d'alias : deux fichiers identiques est le prix à payer pour ne pas
  toucher functions.php pendant R-RECETTE. À fusionner en une règle unique
  de edv-production.css une fois R-RECETTE close.

  Zéro valeur en dur : toute couleur / typo / espace passe par un token de
  edv-production.css, dont cette feuille dépend.
═══════════════════════════════════════════════════════════════════════════*/

/*───────────────────────────────────────────────────────────────────────────
  EN-TÊTE DE PAGE
───────────────────────────────────────────────────────────────────────────*/
.blog-hero{ padding:var(--space-12) var(--gutter) var(--space-8); }
.blog-hero h1{
  margin-top:var(--space-4);
  font-size:clamp(2.125rem, 6vw, var(--text-3xl));
  line-height:1.02;
}
.blog-hero__lede{
  margin-top:var(--space-4);
  max-width:60ch;
  color:var(--color-ink-2);
  font-size:var(--text-md);
}

/*───────────────────────────────────────────────────────────────────────────
  GRILLE
  Une colonne en mobile, deux dès 720px, trois dès 1080px. La grille
  s'auto-ajuste sans media query supplémentaire.
───────────────────────────────────────────────────────────────────────────*/
.blog-liste{ padding:0 var(--gutter) var(--space-16); }
.blog-grille{
  list-style:none; margin:0; padding:0;
  display:grid; gap:var(--space-8);
  grid-template-columns:repeat(auto-fill, minmax(min(300px, 100%), 1fr));
}

/*───────────────────────────────────────────────────────────────────────────
  CARTE
───────────────────────────────────────────────────────────────────────────*/
.blog-card{
  display:flex; flex-direction:column;
  padding-top:var(--space-5);
  border-top:var(--border-firm);
}
.blog-card__photo{
  display:block; margin-bottom:var(--space-5);
  overflow:hidden; border-radius:var(--radius-sm);
  background:var(--color-cream);
}
.blog-card__photo img{
  display:block; width:100%; height:auto;
  aspect-ratio:3 / 2; object-fit:cover;
}
.blog-card__corps{ display:flex; flex-direction:column; gap:var(--space-2); }
.blog-card__k{
  margin:0;
  font-family:var(--font-mono); font-size:var(--text-xs);
  letter-spacing:.18em; text-transform:uppercase; color:var(--color-bordeaux);
}
.blog-card__titre{
  margin:0;
  font-family:var(--font-display);
  font-size:var(--text-xl); line-height:1.12;
}
.blog-card__titre a{ color:var(--color-ink); text-decoration:none; }
.blog-card__titre a:hover{ color:var(--color-bordeaux); text-decoration:underline; }
.blog-card__date{
  margin:0;
  font-family:var(--font-mono); font-size:var(--text-xs);
  letter-spacing:.08em; color:var(--color-ink-3);
}
.blog-card__angle{
  margin:var(--space-2) 0 0;
  color:var(--color-ink-2); font-size:var(--text-sm); line-height:1.5;
}

/*───────────────────────────────────────────────────────────────────────────
  VIDE ET PAGINATION
───────────────────────────────────────────────────────────────────────────*/
.blog-vide{ color:var(--color-ink-2); font-size:var(--text-md); }
.blog-liste .pagination{
  margin-top:var(--space-12); padding-top:var(--space-6);
  border-top:var(--border-hair);
  font-family:var(--font-mono); font-size:var(--text-xs);
  letter-spacing:.12em; text-transform:uppercase;
}
.blog-liste .pagination .page-numbers{
  display:inline-block; padding:var(--space-2) var(--space-3);
  color:var(--color-ink-2); text-decoration:none;
}
.blog-liste .pagination .page-numbers:hover{ color:var(--color-bordeaux); }
.blog-liste .pagination .page-numbers.current{ color:var(--color-bordeaux); font-weight:700; }