/* =============================================================================
   recits-apercu.css — « Conseils & recits de terrain », l'apercu de l'accueil
   =============================================================================
   Repris de la maquette figee : `style.css` l. 1349-1368, plus les deux paliers de
   grille de `mobile.css` (l. 516 et 546) et le bouton de `mobile.css` l. 1317.

   ⚠️ LE TYPE S'APPELLE `recits_apercu`, LES CLASSES S'APPELLENT `.blog` ET `.post`.
   Le code nomme en francais comme le reste du projet, le balisage reprend la
   maquette a la lettre pour que ses regles mordent. Meme partage que `temoignages`
   / `.testimonials`, ou `recits` / « Recits de terrain » cote backoffice.
   ⚠️ Et `apercu` n'est pas decoratif : ce bloc montre TROIS recits et renvoie vers
   la liste. Ce n'est pas la liste.

   ⚠️ AUCUN JS. Le seul comportement attache a `.blog` et `.post` dans la maquette
   est le moteur d'apparition (ils sont dans ses deux listes), deja porte (D121).

   ⚠️ `.post` EST UNE CLASSE TRES COURTE, et c'est un risque assume : la maquette
   l'emploie telle quelle. Ne pas la renommer — ses regles viennent d'elle — mais
   garder en tete qu'un futur bloc nommant une « publication » devra choisir autre
   chose plutot que de la reutiliser par commodite.
   ============================================================================= */

/* ---- BLOG ---- */
.blog{ background:var(--creme); }
.blog__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,2.4vw,34px); }
.post{ background:var(--blanc); border-radius:18px; overflow:hidden; box-shadow:0 14px 40px rgba(0,0,0,.08);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease); }
.post:hover{ transform:translateY(-6px); box-shadow:0 24px 60px rgba(0,0,0,.14); }
.post__link{ display:block; color:inherit; text-decoration:none; }   /* carte article entièrement cliquable -> fiche récit */
.post__img{ aspect-ratio:3/2; background:#241d12 center/cover no-repeat; }
.post__body{ padding:22px 24px 26px; }
.post__cat{ display:inline-block; font-size:var(--fs-label); font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--jaune-d); margin-bottom:10px; }
/* titre de carte « Récits de terrain » (home) — SERIF, comme les titres de récits */
.post__title{ font-family:var(--serif); font-size:clamp(21px,1.7vw,25px); font-weight:400;
  line-height:1.15; letter-spacing:-.01em; color:var(--noir); margin-bottom:12px; }
/* extrait de l'article (retour client 03/07) : 3 lignes max, puis "…" */
.post__excerpt{ font-size:var(--fs-small); line-height:1.6; color:var(--noir-50); margin-bottom:14px;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.post__meta{ font-size:var(--fs-small); color:var(--noir-50); }
.post__more{ margin-top:16px; }   /* bouton jaune "Lire la suite" (style .btn--primary partagé) */

/* ⚠️ REGLE PARTAGEE, part extraite — CINQUIEME occurrence du meme piege dans ce
   portage. `mobile.css:516` et `:546` portent
   `.depforts__grid, .blog__grid, .testimonials__grid{ … }`, et c'est le MEME bloc
   `@media` que celui qui portait la grille du pied de page, perdue deux semaines
   pour cette raison exacte. `.testimonials__grid` a deja pris sa part dans son
   fichier ; `.depforts__grid` prendra la sienne quand ce bloc sera decoupe. */
@media (max-width:1024px){
  .blog__grid{ grid-template-columns:repeat(2,1fr); }

  /* Le bouton « Lire la suite » passe en bloc centre : sur deux colonnes, un bouton
     cale a gauche dans une carte etroite parait decroche de son texte. */
  .post__more{ display:flex; margin:16px auto 0; width:fit-content; }
}

@media (max-width:640px){
  .blog__grid{ grid-template-columns:1fr; gap:clamp(16px,4vw,24px); }
}