/* Destination : assets/css/blog-article.css */

.nh-ba-breadcrumb-wrap { padding: 1.4rem 0; background: var(--nh-cream); }

.nh-ba-article { padding: 3rem 0; }

.nh-ba-header { text-align: center; max-width: 720px; margin: 0 auto 2rem; }
.nh-ba-header h1 { font-size: clamp(1.7rem, 3.2vw, 2.4rem); font-weight: 900; margin: 1rem 0 1rem; }
.nh-ba-meta { font-size: 0.85rem; color: var(--nh-grey-600); }
.nh-ba-meta i { color: var(--nh-rose); margin-right: 0.3rem; }

.nh-blog-category { display: inline-block; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; color: var(--nh-rose); background: var(--nh-rose-light); padding: 0.3rem 0.8rem; border-radius: 50px; }

.nh-ba-cover { aspect-ratio: 16 / 8; border-radius: var(--nh-radius-lg); margin-bottom: 2.5rem; }
img.nh-ba-cover { width: 100%; object-fit: cover; }

/* ---------- Articles liés (cartes) ---------- */
.nh-blog-card { display: block; background: var(--nh-white); border-radius: var(--nh-radius-md); overflow: hidden; box-shadow: var(--nh-shadow-sm); transition: var(--nh-transition); color: var(--nh-dark); height: 100%; }
.nh-blog-card:hover { transform: translateY(-6px); box-shadow: var(--nh-shadow-md); color: var(--nh-dark); }
.nh-blog-img { aspect-ratio: 16 / 10; }
img.nh-blog-img { width: 100%; object-fit: cover; }
.nh-blog-body { padding: 1.4rem; }
.nh-blog-meta { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 0.7rem; }
.nh-blog-category { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; color: var(--nh-rose); background: var(--nh-rose-light); padding: 0.25rem 0.7rem; border-radius: 50px; }
.nh-blog-date { font-size: 0.75rem; color: var(--nh-grey-600); }
.nh-blog-body h3 { font-size: 1.05rem; margin-bottom: 0; }

.nh-ba-content { font-size: 1rem; color: var(--nh-grey-600); line-height: 1.8; }
.nh-ba-content h4 { color: var(--nh-dark); margin-top: 1.8rem; font-size: 1.15rem; }
.nh-ba-content p { margin-bottom: 1.2rem; }
.nh-ba-content ul, .nh-ba-content ol { padding-left: 1.3rem; margin-bottom: 1.2rem; }
.nh-ba-content li::marker { color: var(--nh-rose); }

.nh-ba-share {
  display: flex; align-items: center; gap: 0.8rem;
  margin-top: 2.5rem; padding-top: 2rem;
  border-top: 1px solid var(--nh-grey-300);
}
.nh-ba-share span { font-size: 0.85rem; font-weight: 700; color: var(--nh-dark); margin-right: 0.4rem; }
.nh-ba-share a, .nh-ba-share button {
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--nh-rose-light); color: var(--nh-rose);
  display: flex; align-items: center; justify-content: center;
  border: none; transition: var(--nh-transition);
}
.nh-ba-share a:hover, .nh-ba-share button:hover { background: var(--nh-gradient-primary); color: var(--nh-white); }
.nh-ba-share button.copied { background: var(--nh-success); color: var(--nh-white); }