/* Accueil bamlearn.com — complète home.css avec les variables du design system (nashdev.css). */

.bl-hero { padding-top: 104px; }
.bl-hero-title {
  max-width: 760px;
  margin: 0 0 18px;
  font-size: clamp(32px, 5vw, 54px);
  line-height: 1.08;
  font-weight: 700;
  color: var(--nd-text);
}
.bl-hero-sub {
  max-width: 640px;
  margin: 0 0 32px;
  font-size: 17px;
  line-height: 1.65;
  color: var(--nd-text2);
}

.bl-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.bl-actions-center { justify-content: center; }

.bl-categories {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}
.bl-category {
  padding: 22px;
  background: var(--nd-surface);
  border: 1px solid var(--nd-border);
  border-radius: 14px;
}
.bl-category h3 { margin: 0 0 12px; font-size: 16px; color: var(--nd-text); }
.bl-category ul { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.bl-category a { color: var(--nd-text2); font-size: 14px; text-decoration: none; }
.bl-category a:hover { color: var(--nd-green); }

@media (max-width: 640px) {
  .bl-hero { padding-top: 72px; }
  .bl-actions > a { flex: 1 1 100%; }
}