/* ==========================================================
   Les essentiels bébé — Base templates
   Scope: hub / univers / checklist templates only.
   Objectif: lisibilité, rythme éditorial, layout robuste.
   ========================================================== */

.bf-les-essentiels-base {
  --bf-les-essentiels-max: 1100px;
  --bf-les-essentiels-gap: clamp(14px, 1.8vw, 22px);
  --bf-les-essentiels-section-y: clamp(32px, 5vw, 58px);
  --bf-les-essentiels-card-radius: 16px;
  --bf-les-essentiels-card-padding: clamp(14px, 2.2vw, 22px);
  --bf-les-essentiels-line: rgba(20, 20, 20, 0.08);
}

.bf-les-essentiels-base .bf-wrap {
  max-width: var(--bf-les-essentiels-max);
}

.bf-les-essentiels-base .bf-section {
  padding: var(--bf-les-essentiels-section-y) 0;
}

.bf-les-essentiels-base .bf-section + .bf-section {
  border-top: 1px solid var(--bf-les-essentiels-line);
}

.bf-les-essentiels-base .bf-section--muted {
  border-top-color: transparent;
}

.bf-les-essentiels-base .bf-section__head {
  margin-bottom: clamp(16px, 2.6vw, 26px);
  max-width: 760px;
}

.bf-les-essentiels-base .bf-richtext {
  line-height: 1.75;
}

.bf-les-essentiels-base .bf-richtext > :last-child {
  margin-bottom: 0;
}

.bf-les-essentiels-base .bf-grid {
  gap: var(--bf-les-essentiels-gap);
  align-items: start;
}

.bf-les-essentiels-base .bf-card {
  border-radius: var(--bf-les-essentiels-card-radius);
  padding: var(--bf-les-essentiels-card-padding);
  min-height: 100%;
}

.bf-les-essentiels-base .bf-card .bf-p:last-child,
.bf-les-essentiels-base .bf-card .bf-list:last-child,
.bf-les-essentiels-base .bf-card .bf-link:last-child {
  margin-bottom: 0;
}

.bf-les-essentiels-base .bf-faq,
.bf-les-essentiels-base .bf-les-essentiels-hub__faq-items {
  display: grid;
  gap: 12px;
}

.bf-les-essentiels-base .bf-faq__item,
.bf-les-essentiels-base .bf-les-essentiels-hub__faq-items details {
  border-radius: var(--bf-les-essentiels-card-radius);
}

@media (max-width: 1024px) {
  .bf-les-essentiels-base .bf-grid--3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .bf-les-essentiels-base {
    --bf-les-essentiels-section-y: 28px;
    --bf-les-essentiels-gap: 12px;
  }

  .bf-les-essentiels-base .bf-grid--3,
  .bf-les-essentiels-base .bf-grid--2 {
    grid-template-columns: 1fr;
  }

  .bf-les-essentiels-base .bf-hero {
    padding-top: 30px;
  }
}