/* ══════════════════════════════════════════════════════════════
   BLOG HOME — overrides & composants Skin B
   Chargé après blog-home.css sur le template page-blog-home-b.php
   ══════════════════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════════════════
   INTRO ÉDITORIALE — alignée à gauche, pleine largeur (Skin B)
   Calqué sur .sb-archive-top de la page catégorie
   ══════════════════════════════════════════════════════════════ */
.bh-lb .bh-page-content {
  background: var(--white, #fff);
  padding: 40px 0 32px;
  border-bottom: 1px solid var(--ink-100, #f1f5f9);
}
.bh-lb .bh-page-content__inner {
  max-width: var(--bh-max, 1280px);
  padding: 0 var(--lx, clamp(16px, 4vw, 40px));
  text-align: left;
  font-size: 16px;
  color: var(--ink-500, #64748b);
}
.bh-lb .bh-page-content__h1 {
  font-size: clamp(26px, 3.5vw, 44px);
  font-weight: 900;
  letter-spacing: -.02em;
  margin-bottom: 10px;
}
/* ── Background page — blanc comme Skin A ───────────────────── */
.bh-lb.bh-page {
  background: var(--white, #fff);
}

/* ── Section "derniers articles" — fond ink-50 pour le contraste */
.bh-lb .bh-latest {
  background: var(--bhlb-latest-bg, var(--ink-50, #f8fafc));
  padding: 56px 0 64px;
}

/* ── Titre de section — style magazine avec tiret ────────────── */
.bh-lb .bh-section__title,
.bh-lb .bh-latest__title {
  font-weight: 900;
  letter-spacing: -.03em;
  padding-bottom: 0;
}

/* Supprime le trait souligné de Skin A */
.bh-lb .bh-section__title::after {
  display: none;
}

/* Tiret magazine avant le titre de section */
.bh-lb .bh-section__title::before {
  content: '— ';
  color: var(--brand);
}

/* ── "Voir tout" — bouton carré plutôt que pill ──────────────── */
.bh-lb .bh-section__more {
  border-radius: var(--radius-sm, 6px);
}


/* ══════════════════════════════════════════════════════════════
   MAGAZINE HERO LAYOUT (bh-latest)
   — grille gauche : article hero  |  droite : stack articles —
   ══════════════════════════════════════════════════════════════ */
.bh-lb .bh-magazine-layout {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 32px;
  align-items: start;
}

/* ── Hero article (colonne gauche) ───────────────────────────── */
.bh-lb .bh-mhero {
  display: flex;
  flex-direction: column;
}

.bh-lb .bh-mhero__img-wrap {
  display: block;
  overflow: hidden;
  border-radius: var(--radius-md, 10px);
  height: 360px;
  flex-shrink: 0;
}

.bh-lb .bh-mhero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.bh-lb .bh-mhero__body {
  padding: 22px 0 0;
}

.bh-lb .bh-mhero__cat {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  color: var(--bhlb-hero-cat, var(--brand));
  text-transform: uppercase;
  letter-spacing: .1em;
  text-decoration: none;
  margin-bottom: 10px;
  transition: opacity .15s;
}
.bh-lb .bh-mhero__cat::before { content: '— '; }
.bh-lb .bh-mhero__cat:hover { opacity: .75; }

.bh-lb .bh-mhero__title {
  font-family: var(--font-display, 'Playfair Display', serif);
  font-size: clamp(26px, 2.8vw, 36px);
  font-weight: 900;
  color: var(--bhlb-hero-title, var(--ink-900, #0f172a));
  line-height: 1.2;
  letter-spacing: -.025em;
  margin: 0 0 14px;
}
.bh-lb .bh-mhero__title a {
  color: inherit;
  text-decoration: none;
  transition: color .15s;
}
.bh-lb .bh-mhero__title a:hover { color: var(--brand); }

.bh-lb .bh-mhero__excerpt {
  font-size: 15px;
  color: var(--bhlb-hero-text, var(--ink-500, #64748b));
  line-height: 1.7;
  margin: 0 0 14px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.bh-lb .bh-mhero__meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--bhlb-hero-meta, var(--ink-400, #94a3b8));
  margin-bottom: 18px;
}

.bh-lb .bh-mhero__read {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  font-weight: 700;
  color: var(--bhlb-hero-read, var(--brand));
  text-decoration: none;
}
.bh-lb .bh-mhero__read:hover { color: var(--brand-dark, var(--brand)); }

/* ── Stack articles (colonne droite) ─────────────────────────── */
.bh-lb .bh-mstack {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 2px solid var(--bhlb-stack-border, var(--brand-soft, #fce7f3));
}

.bh-lb .bh-mitem {
  display: flex;
  gap: 14px;
  padding: 16px 0;
  border-bottom: 1px solid var(--ink-100, #f1f5f9);
  text-decoration: none;
}

.bh-lb .bh-mitem__img-wrap {
  width: 90px;
  height: 74px;
  flex-shrink: 0;
  overflow: hidden;
  border-radius: var(--radius-sm, 6px);
  display: block;
}

.bh-lb .bh-mitem__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.bh-lb .bh-mitem__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.bh-lb .bh-mitem__cat {
  display: block;
  font-size: 10px;
  font-weight: 700;
  color: var(--bhlb-item-cat, var(--brand));
  text-transform: uppercase;
  letter-spacing: .09em;
  text-decoration: none;
  margin-bottom: 5px;
}
.bh-lb .bh-mitem__cat::before { content: '— '; }

.bh-lb .bh-mitem__title {
  font-family: var(--font-display, 'Playfair Display', serif);
  font-size: 15px;
  font-weight: 700;
  color: var(--bhlb-item-title, var(--ink-900, #0f172a));
  line-height: 1.35;
  margin: 0 0 6px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.bh-lb .bh-mitem__title a {
  color: inherit;
  text-decoration: none;
  transition: color .15s;
}
.bh-lb .bh-mitem__title a:hover { color: var(--brand); }

.bh-lb .bh-mitem__meta {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--bhlb-item-meta, var(--ink-400, #94a3b8));
}


/* ══════════════════════════════════════════════════════════════
   SECTIONS PAR CATÉGORIE — bandes alternées + lcard horizontal
   ══════════════════════════════════════════════════════════════ */

/* Bandes pleine largeur avec fonds alternés */
.bh-lb .bh-section-band { background: var(--bhlb-band-bg, var(--white, #fff)); }
.bh-lb .bh-section-band--even { background: var(--bhlb-band-alt-bg, var(--ink-50, #f8fafc)); }

/* La section elle-même garde son max-width centré */
.bh-lb .bh-section-band .bh-section {
  max-width: var(--bh-max, 1280px);
  margin: 0 auto;
}

/* ── Cards horizontales (bh-lcard) ──────────────────────────── */
.bh-lb .bh-llist {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.bh-lb .bh-lcard {
  display: flex;
  gap: 0;
  background: var(--bhlb-card-bg, var(--white, #fff));
  border: 1px solid var(--bhlb-card-border, var(--ink-100, #f1f5f9));
  border-radius: var(--radius-md, 10px);
  overflow: hidden;
  transition: box-shadow .2s ease;
}

.bh-lb .bh-lcard__img-wrap {
  width: 220px;
  min-width: 220px;
  flex-shrink: 0;
  overflow: hidden;
  display: flex;
}

.bh-lb .bh-lcard__img {
  width: 100%;
  object-fit: cover;
  display: block;
  min-height: 148px;
}
.bh-lb .bh-lcard:hover { box-shadow: var(--shadow-md, 0 6px 24px rgba(0,0,0,.1)); }

.bh-lb .bh-lcard__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 20px 22px;
}

.bh-lb .bh-lcard__cat {
  display: block;
  font-size: 10px;
  font-weight: 700;
  color: var(--bhlb-card-cat, var(--brand));
  text-transform: uppercase;
  letter-spacing: .1em;
  text-decoration: none;
  margin-bottom: 7px;
  background: none;
  padding: 0;
  border-radius: 0;
  align-self: auto;
  transition: opacity .15s;
}
.bh-lb .bh-lcard__cat::before { content: '— '; }
.bh-lb .bh-lcard__cat:hover { opacity: .75; }

.bh-lb .bh-lcard__title {
  font-family: var(--font-display, 'Playfair Display', serif);
  font-size: 21px;
  font-weight: 900;
  color: var(--bhlb-card-title, var(--ink-900, #0f172a));
  line-height: 1.3;
  margin: 0 0 9px;
  letter-spacing: -.015em;
}
.bh-lb .bh-lcard__title a {
  color: inherit;
  text-decoration: none;
  transition: color .15s;
}
.bh-lb .bh-lcard__title a:hover { color: var(--brand); }

.bh-lb .bh-lcard__excerpt {
  font-size: 14px;
  color: var(--bhlb-card-text, var(--ink-500, #64748b));
  line-height: 1.65;
  margin: 0 0 12px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.bh-lb .bh-lcard__footer {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  margin-top: auto;
}

.bh-lb .bh-lcard__meta {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--bhlb-card-meta, var(--ink-400, #94a3b8));
}

.bh-lb .bh-lcard__read {
  font-size: 13px;
  font-weight: 700;
  color: var(--bhlb-card-read, var(--brand));
  text-decoration: none;
  white-space: nowrap;
}
.bh-lb .bh-lcard__read:hover { color: var(--brand-dark, var(--brand)); }


/* ══════════════════════════════════════════════════════════════
   CTA BAND — couleurs Skin B
   ══════════════════════════════════════════════════════════════ */
.bh-lb .bh-cta-band {
  background: linear-gradient(135deg, var(--bhlb-cta-bg1, #e84393), var(--bhlb-cta-bg2, #c2185b));
  margin-top: 0;
}
.bh-lb .bh-cta-band__title { color: var(--bhlb-cta-title, #ffffff); }
.bh-lb .bh-cta-band__sub   { color: var(--bhlb-cta-sub, #ffffff); opacity: .85; }

/* Bouton carré au lieu de pill */
.bh-lb .bh-cta-band__btn {
  background: var(--bhlb-cta-btn-bg, #ffffff);
  color: var(--bhlb-cta-btn-color, var(--brand)) !important;
  border-radius: var(--radius-sm, 6px);
}

.bh-lb .bh-cta-band__btn:hover {
  background: linear-gradient(135deg, var(--bhlb-cta-btn-hover-bg1, #f8e8f2), var(--bhlb-cta-btn-hover-bg2, #fce7f3));
  color: var(--bhlb-cta-btn-hover-color, var(--brand)) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, .15);
}


/* ══════════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════════════════
   SECTIONS — MODE GRILLE (rp_archive_layout = grid)
   Même visuel que /category/ en mode grille : cartes verticales
   ══════════════════════════════════════════════════════════════ */
.bh-lb .bh-llist--grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

/* En grille, la card devient verticale */
.bh-lb .bh-llist--grid .bh-lcard {
  flex-direction: column;
  padding: 0;
  border-bottom: none;
  background: var(--bhlb-card-bg, var(--white, #fff));
  border: 1px solid var(--bhlb-card-border, var(--ink-100, #f1f5f9));
  border-radius: var(--radius-md, 10px);
  overflow: hidden;
  transition: box-shadow .2s ease;
}
.bh-lb .bh-llist--grid .bh-lcard:first-child {
  border-top: 1px solid var(--bhlb-card-border, var(--ink-100));
}
.bh-lb .bh-llist--grid .bh-lcard:hover {
  box-shadow: var(--shadow-md, 0 6px 24px rgba(0,0,0,.1));
}

/* Image : pleine largeur en haut */
.bh-lb .bh-llist--grid .bh-lcard__img-wrap {
  width: 100%;
  height: 200px;
  margin-right: 0;
  border-radius: 0;
  display: flex;
}

/* Corps sous l'image */
.bh-lb .bh-llist--grid .bh-lcard__body {
  padding: 16px 18px 18px;
  justify-content: flex-start;
}

/* Badge catégorie : revient au style texte sans padding en grille */
.bh-lb .bh-llist--grid .bh-lcard__cat {
  margin-bottom: 8px;
}

/* Titre un peu plus petit en grille (3 colonnes) */
.bh-lb .bh-llist--grid .bh-lcard__title {
  font-size: 18px;
  margin-bottom: 8px;
}

/* Excerpt visible en grille */
.bh-lb .bh-llist--grid .bh-lcard__excerpt {
  display: -webkit-box;
}

/* Footer : empilé en grille pour garder le lien en bas */
.bh-lb .bh-llist--grid .bh-lcard__footer {
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  margin-top: 12px;
}


/* ══════════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .bh-lb .bh-magazine-layout {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .bh-lb .bh-mhero__img-wrap { height: 280px; }
  .bh-lb .bh-mstack { border-top: 1px solid var(--ink-100); margin-top: 0; }
  .bh-lb .bh-llist--grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .bh-lb .bh-mhero__img-wrap { height: 220px; }
  .bh-lb .bh-llist--grid { grid-template-columns: 1fr; }
  .bh-lb .bh-llist--grid .bh-lcard__img-wrap { width: 100%; height: 200px; }
  .bh-lb .bh-llist--grid .bh-lcard__excerpt { display: -webkit-box; }
  /* lcard list → vertical (aligne sur sb-lcard de inner-skin-b.css) */
  .bh-lb .bh-lcard { flex-direction: column; }
  .bh-lb .bh-lcard__img-wrap { width: 100%; min-width: 0; min-height: 0; }
  .bh-lb .bh-lcard__img { min-height: 200px; }
  .bh-lb .bh-lcard__excerpt { display: -webkit-box; }
}

@media (max-width: 520px) {
  .bh-lb .bh-lcard__title { font-size: 17px; }
  .bh-lb .bh-lcard__img { min-height: 170px; }
}
