/* ================================================================
   BLOG — "Du contenu pour gagner la partie"
   Section articles sur la homepage

   Structure card : réutilisation complète de .faq__card,
   .faq__edge, .faq__strip-*, .faq__center, .faq__line-top,
   .faq__depth-* (même palette violet pixel-art).

   Les variables --faq-* sont redéclarées ici pour que les
   classes FAQ fonctionnent hors de leur section d'origine.
================================================================ */

/* ── Variables ─────────────────────────────────────────────────── */
/* heading → .ch__* (character.css) */
.blog {
  --faq-card-bg:   #f2ecff;
  --faq-purple:    #624c96;
  --faq-purple-md: #9d8ac8;
  --faq-text:      #1b1564;
  --blog-label-bg: #c1b9f5;
  --ch-accent:     var(--purple-700);  /* #7b3dee — dots + em */
}


/* ════════════════════════════════════════════════════════════════
   GRILLE
════════════════════════════════════════════════════════════════ */

.blog__grid {
  display:        flex;
  flex-direction: column;
  gap:            32px;
  width:          100%;
}


/* ════════════════════════════════════════════════════════════════
   INNER — contenu à l'intérieur de .faq__body
   (override du padding/layout sans toucher aux strips)
════════════════════════════════════════════════════════════════ */

.blog__inner {
  background: #f2ecff;
  display:    flex;
  gap:        32px;
  padding:    16px 8px;
  width:      100%;
  box-sizing: border-box;
}

/* Featured : image à gauche, texte à droite */
.blog__inner--row {
  flex-direction: row;
  align-items:    flex-start;
}

/* Small : image en haut, texte en bas */
.blog__inner--col {
  flex-direction: column;
  align-items:    stretch;
  gap:            16px;
}


/* ════════════════════════════════════════════════════════════════
   IMAGE
════════════════════════════════════════════════════════════════ */

.blog__img {
  position:   relative;
  overflow:   hidden;
  flex-shrink: 0;
  background: #d4c2ff; /* placeholder */
}

.blog__img--featured {
  width:  460px;
  height: 315px;
}

.blog__img--small {
  width:  100%;
  height: 232px;
}

.blog__img img {
  width:        100%;
  height:       100%;
  object-fit:   cover;
  display:      block;
}


/* ════════════════════════════════════════════════════════════════
   CONTENT
════════════════════════════════════════════════════════════════ */

.blog__content {
  flex:           1;
  display:        flex;
  flex-direction: column;
  gap:            16px;
  min-width:      0;
}


/* ── Label catégorie (ticket pixel-art) ─────────────────────── */

.blog__label {
  display:     flex;
  align-items: stretch;
  align-self:  flex-start;
  height:      24px;
}

/* Bande latérale : 2px, 2px de gap haut/bas via transparent */
.blog__label-bd {
  width:       2px;
  flex-shrink: 0;
  background: linear-gradient(
    to bottom,
    transparent 0px 2px,
    #c1b9f5     2px calc(100% - 2px),
    transparent calc(100% - 2px) 100%
  );
}

.blog__label-text {
  background:     #c1b9f5;
  height:         100%;
  padding:        6px 4px 0;
  font-family:    var(--font-heading); /* Raw Pixel */
  font-size:      14px;
  letter-spacing: 1.12px;
  text-transform: uppercase;
  color:          #0d111c;
  white-space:    nowrap;
  line-height:    1;
}


/* ── Titre de la card ───────────────────────────────────────── */

.blog__card-title {
  font-family:  var(--font-body);
  font-weight:  var(--fw-bold);
  color:        #1b1564;
  line-height:  1.3;
}

.blog__card-title--lg { font-size: 28px; }
.blog__card-title--sm { font-size: 24px; }


/* ── Extrait (featured uniquement) ─────────────────────────── */

.blog__excerpt {
  font-family:  var(--font-body);
  font-size:    var(--text-lg);
  font-weight:  var(--fw-regular);
  color:        #1b1564;
  line-height:  1.5;
}


/* ════════════════════════════════════════════════════════════════
   CTA BAS DE SECTION
════════════════════════════════════════════════════════════════ */

.blog__cta {
  display:         flex;
  justify-content: center;
}