/* ============================================================================
   GTLYS — Blog premium (listes : /blog/, catégories, recherche)
   Présentation inspirée du blog Batilys (cards, chips, effets), portée sur la
   charte GTLYS : bleu royal #2563EB (hover #1D4ED8), encre #0D1B2E,
   chips #EAF1FE, coins tranchés (cartes 8-10px).
   Chargé après gtlys-saas.css, uniquement sur les listes du blog.
   ========================================================================== */

/* ------------------------------------------------------------- HERO (lead) */
.gs-blog-hero__lead{
  color:#94A3B8;font-size:clamp(1rem,1.3vw,1.15rem);line-height:1.7;
  max-width:760px;margin:1.1rem auto 0;text-align:center;
}
.gs-blog-hero__lead p{margin:0;}

/* --------------------------------------------------- FILTRES PAR CATÉGORIE */
.gs-blogfilters{
  display:flex;flex-wrap:wrap;justify-content:center;gap:.55rem;
  margin:0 0 2.6rem;
}
.gs-scope a.gs-blogfilters__chip{
  display:inline-block;padding:.5rem 1.1rem;border-radius:var(--r-pill,999px);
  background:#EAF1FE;color:#1D4ED8;border:1px solid #DBE0FC;
  font-size:.9rem;font-weight:600;line-height:1.2;text-decoration:none;
  transition:background .18s,color .18s,border-color .18s,transform .18s;
}
.gs-scope a.gs-blogfilters__chip:hover{
  background:#DCE9FD;color:#1D4ED8;transform:translateY(-1px);
}
.gs-scope a.gs-blogfilters__chip.is-active{
  background:#2563EB;border-color:#2563EB;color:#fff;
}

/* ------------------------------------------------------- GRILLE DE CARTES */
.gs-blog-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1.8rem;
}
@media (max-width:1024px){ .gs-blog-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:640px){ .gs-blog-grid{grid-template-columns:1fr;} }

/* ------------------------------------------------------------------ CARTE */
.gs-post-card{
  display:flex;flex-direction:column;overflow:hidden;
  background:#fff;border:1px solid #E3E9F2;border-radius:10px;
  transition:transform .2s var(--ease-out,ease),box-shadow .2s var(--ease-out,ease),border-color .2s;
}
.gs-post-card:hover{
  transform:translateY(-4px);
  box-shadow:0 14px 34px rgba(13,27,46,.12);
  border-color:#CFE0FB;
}

/* Média : ratio 3/2, zoom doux au survol (effet Batilys) */
.gs-post-card__media{display:block;aspect-ratio:3/2;overflow:hidden;background:#F1F5FB;}
.gs-post-card__media img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .35s var(--ease-out,ease);
}
.gs-post-card:hover .gs-post-card__media img{transform:scale(1.04);}
.gs-post-card__ph{
  display:flex;align-items:center;justify-content:center;width:100%;height:100%;
  background:linear-gradient(135deg,#0D1B2E,#1D4ED8);color:rgba(255,255,255,.55);
}
.gs-post-card__ph svg{width:56px;height:56px;}

/* Corps */
.gs-post-card__body{
  display:flex;flex-direction:column;gap:.6rem;flex:1;
  padding:1.2rem 1.3rem 1.4rem;
}
.gs-scope a.gs-post-card__cat{
  align-self:flex-start;
  background:#EAF1FE;color:#2563EB;border-radius:var(--r-pill,999px);
  font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  padding:.28rem .75rem;text-decoration:none;transition:background .18s;
}
.gs-scope a.gs-post-card__cat:hover{background:#DCE9FD;color:#1D4ED8;}
.gs-post-card__title{
  font-size:1.1rem;line-height:1.35;margin:0;font-weight:800;letter-spacing:-.02em;
}
.gs-scope .gs-post-card__title a{color:#0D1B2E;text-decoration:none;transition:color .18s;}
.gs-scope .gs-post-card__title a:hover{color:#2563EB;}
.gs-post-card__excerpt{font-size:.93rem;color:#5D6C81;line-height:1.65;margin:0;}

/* Lien « Lire l'article » : flèche qui glisse au survol */
.gs-scope a.gs-post-card__link{
  margin-top:auto;display:inline-flex;align-items:center;gap:.4rem;
  color:#2563EB;font-weight:700;font-size:.92rem;text-decoration:none;
  padding-top:.5rem;transition:color .18s;
}
.gs-post-card__link svg{width:16px;height:16px;transition:transform .2s var(--ease-out,ease);}
.gs-scope a.gs-post-card__link:hover{color:#1D4ED8;}
.gs-scope a.gs-post-card__link:hover svg{transform:translateX(4px);}

/* -------------------------------------------------------------- PAGINATION */
.gs-blog-pagination{margin:2.8rem 0 0;}
.gs-blog-pagination ul.page-numbers{
  list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:.45rem;
  margin:0;padding:0;
}
.gs-blog-pagination .page-numbers li{margin:0;}
.gs-scope .gs-blog-pagination a.page-numbers,
.gs-scope .gs-blog-pagination span.page-numbers{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:2.5rem;height:2.5rem;padding:0 .7rem;border-radius:8px;
  background:#EAF1FE;color:#0D1B2E;font-weight:700;font-size:.95rem;
  text-decoration:none;transition:background .18s,color .18s;
}
.gs-scope .gs-blog-pagination a.page-numbers:hover{background:#DCE9FD;color:#1D4ED8;}
.gs-scope .gs-blog-pagination span.page-numbers.current{background:#2563EB;color:#fff;}
.gs-scope .gs-blog-pagination span.page-numbers.dots{background:transparent;color:#5D6C81;}

/* --------------------------- « POUR ALLER PLUS LOIN » (chips du CTA sombre)
   Bloc de maillage en fin d'article, façon related-links Batilys mais adapté
   au CTA sombre GTLYS : pills translucides blanches, hover éclairci. */
.gs-cta__related{
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:.5rem;
  margin-top:1.4rem;padding-top:1.4rem;
  border-top:1px solid rgba(255,255,255,.14);
}
.gs-cta__related-label{
  flex-basis:100%;
  color:#94A3B8;font-size:.8rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.12em;
  margin-bottom:.35rem;
}
.gs-scope .gs-cta__related a{
  display:inline-block;padding:.45rem 1rem;border-radius:var(--r-pill,999px);
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.22);
  color:#E2E8F0;font-size:.88rem;font-weight:600;line-height:1.3;
  text-decoration:none;
  transition:background .18s,border-color .18s,color .18s,transform .18s;
}
.gs-scope .gs-cta__related a:hover{
  background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.45);
  color:#fff;transform:translateY(-1px);
}

/* ------------------------------------------------------------- ÉTAT VIDE */
.gs-blog-empty{
  text-align:center;padding:3.5rem 1rem;
  border:1px dashed #CFE0FB;border-radius:10px;background:#F8FAFE;
}
.gs-blog-empty p{color:#5D6C81;font-size:1.02rem;margin:0 0 1.4rem;}