/* =============================================================
   B-COCKPIT 360° — Page Accueil de la verticale (/banque/)
   Styles spécifiques à banque/index.html — la fondation partagée
   (tokens, boutons, cards, sections, grille .bq-grid-3) vit
   dans banque-theme.css.
   ============================================================= */

/* ---------- Bannière produit (toute la carte cliquable, spec UX §4.1) ---------- */
.bq-product-banner {
  display: block;
  text-decoration: none;
}
.bq-product-banner p {
  color: var(--bq-navy-100);
  font-size: var(--font-size-lg);
  margin-bottom: var(--spacing-8);
}
.bq-product-banner:hover .bq-product-cta {
  background: var(--bq-navy-700);
}
.bq-product-banner .bq-product-cta {
  margin-top: var(--spacing-2);
}

/* ---------- Teaser Héritage ---------- */
.bq-card--heritage h3 {
  font-size: var(--font-size-lg);
}
.bq-card--heritage p {
  color: var(--bq-ink-muted);
  font-size: var(--font-size-base);
}
.bq-heritage-cta {
  text-align: center;
  margin-top: var(--spacing-10);
}
.bq-heritage-cta .bq-btn--link {
  font-size: var(--font-size-lg);
}

/* ---------- Responsive ---------- */
@media (max-width: 767px) {
  .bq-section { padding: var(--spacing-12) 0; }

  /* Cartes héritage : défilement horizontal avec scroll-snap (spec UX §4.1) */
  .bq-heritage-cards {
    display: flex;
    gap: var(--spacing-4);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: var(--spacing-4);
    -webkit-overflow-scrolling: touch;
  }
  .bq-heritage-cards .bq-card {
    scroll-snap-align: center;
    flex: 0 0 min(85%, 320px);
  }
}