/* ================================================================
   BLOG LISTING — Page index /blog/
   Figma node : 1629-9688

   Réutilise entièrement :
     sections.css   → .section, .pixel__pattern, .container
     character.css  → .ch__* (titres, suptitle, subtitle)
     icp.css        → .icp section (bg, overflow, stars)
     faq.css        → .faq__card, .faq__edge, .faq__strip-*, etc.
     blog.css       → .blog__label, .blog__card-title
     footer.css     → footer

   Nouvelles classes (listing uniquement) :
     .blog-header       sur-couche pour le header avec icp stars
     .blog-listing      section principale (fond lavande)
     .blog-list__grid   grille 3 colonnes d'articles
     .blog-card         wrapper de lien sur .faq__card
     .blog-card__body   contenu interne (image + texte)
     .blog-card__img    image rapport 3:2
     .blog-card__content label + titre
     .faq__edge--r      bord droit (miroir bord gauche)
================================================================ */

/* ════════════════════════════════════════════════════════════════
   HEADER BLOG — Réutilise entièrement .icp + .icp__star
   Seul ajustement : positions des 3 étoiles (légèrement différentes
   du header ICP homepage selon le Figma 1629-9688)
════════════════════════════════════════════════════════════════ */

.blog-header .icp__star--1 { top: 32px;  left: 50%; margin-left: -421px; }
.blog-header .icp__star--2 { top: 238px; left: 50%; margin-left: -680px; }
.blog-header .icp__star--3 { top: 64px;  left: 50%; margin-left:  459px; margin-right: unset; right: unset; }

/* ════════════════════════════════════════════════════════════════
   SECTION LISTING — fond lavande
   Réutilise .section pour le padding (128px)
════════════════════════════════════════════════════════════════ */

.blog-listing {
  background: var(--purple-50);  /* #edecff */

  /* Variables contextuelles pour .blog__label et .faq__card */
  --faq-card-bg:   #f2ecff;
  --faq-purple:    #624c96;
  --faq-purple-md: #9d8ac8;
  --blog-label-bg: #c1b9f5;
}

/* ════════════════════════════════════════════════════════════════
   GRILLE 3 COLONNES
   gap: 32px entre les cartes (vertical + horizontal)
════════════════════════════════════════════════════════════════ */

.blog-list__grid {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   32px;
  width:                 100%;
}

/* ════════════════════════════════════════════════════════════════
   BLOG CARD — lien sur .faq__card
   Réutilise toute la structure faq.css (bevel pixel-art)
   Pas de text-decoration sur le lien
════════════════════════════════════════════════════════════════ */

.blog-card {
  text-decoration: none;
  display:         flex;     /* override <a> inline */
  align-items:     stretch;
  transition:      transform 0.2s ease, box-shadow 0.2s ease;
}

.blog-card:hover {
  transform:  translateY(-4px);
  box-shadow: 0px 16px 32px 0px rgba(98, 76, 150, 0.32);
}

/* ── Bord DROIT (miroir du bord gauche) ─────────────────────── */
/*   Strips dans l'ordre inverse : inner → mid → outer           */
.faq__edge--r {
  flex-direction: row-reverse;  /* retourne l'ordre inner/mid/outer */
}

/* ── Corps de la carte ───────────────────────────────────────── */
.blog-card__body {
  display:        flex;
  flex-direction: column;
  padding:        16px 8px 8px;
  gap:            0;
}

/* ── Image (rapport 3:2 — 339×232 Figma) ────────────────────── */
.blog-card__img {
  width:        100%;
  aspect-ratio: 339 / 232;
  overflow:     hidden;
  flex-shrink:  0;
  margin-bottom: 24px;  /* gap entre image et label */
}

.blog-card__img img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  display:    block;
  transition: transform 0.35s ease;
}

.blog-card:hover .blog-card__img img {
  transform: scale(1.04);
}

/* ── Contenu (label + titre) ─────────────────────────────────── */
.blog-card__content {
  display:        flex;
  flex-direction: column;
  gap:            8px;
}

/* ════════════════════════════════════════════════════════════════
   RESPONSIVE
════════════════════════════════════════════════════════════════ */

@media (max-width: 900px) {
  .blog-list__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .blog-list__grid {
    grid-template-columns: 1fr;
  }

  .blog-header .icp__star--2 { display: none; }
}