/**
 * BIENHABILLÉ — typography.css (Bloc C — Niche)
 * Typographie niche : hérite de variables.css.
 * Uniquement var(--bh-*).
 */

body {
  font-family: var(--bh-font-body);
  font-size: var(--bh-fs-base);
  font-weight: var(--bh-fw-regular);
  line-height: var(--bh-lh-base);
  color: var(--bh-text-primary);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--bh-font-heading);
  font-weight: var(--bh-fw-semibold);
  line-height: var(--bh-lh-heading);
  color: var(--bh-text-primary);
}

h1 { font-size: var(--bh-fs-3xl); }
h2 { font-size: var(--bh-fs-2xl); }
h3 { font-size: var(--bh-fs-xl); }
h4 { font-size: var(--bh-fs-lg); }
h5 { font-size: var(--bh-fs-md); }
h6 { font-size: var(--bh-fs-base); }

p {
  margin: 0 0 var(--bh-space-md);
}

a {
  color: var(--bh-text-link);
  text-decoration: none;
  transition: color var(--bh-transition-fast);
}

a:hover {
  color: var(--bh-text-link-hover);
}

/* Articles */
.bh-article__header {
  margin-bottom: var(--bh-space-lg);
}

.bh-article__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bh-space-sm);
  margin-top: var(--bh-space-xs);
  font-size: var(--bh-fs-sm);
  color: var(--bh-text-muted);
}

.bh-article__meta .bh-meta + .bh-meta::before {
  content: '·';
  padding: 0 var(--bh-space-xs);
}

.bh-article__thumbnail {
  margin-bottom: var(--bh-space-lg);
  overflow: hidden;
}

.bh-article__img {
  width: 100%;
  height: auto;
  display: block;
}

.bh-article__content {
  margin-bottom: var(--bh-space-xl);
}

.bh-article--excerpt .bh-article__link {
  display: block;
  text-decoration: none;
  color: inherit;
}

.bh-article--excerpt .bh-article__thumbnail {
  aspect-ratio: 3/2;
  overflow: hidden;
}

.bh-article--excerpt .bh-article__excerpt {
  font-size: var(--bh-fs-sm);
  color: var(--bh-text-secondary);
  margin-top: var(--bh-space-xs);
}

/* Elementor : contenu pleine largeur sans contrainte du thème */
.bh-site-content--elementor {
  max-width: none;
  padding: 0;
}

.bh-site-content--elementor .bh-page__content {
  max-width: none;
}

.bh-site-content--elementor .elementor-section.elementor-section-boxed > .elementor-container {
  max-width: var(--bh-container-max);
}

/* Hero sous header (Customizer) : la 1re section en « boxed » restait à 1320px → bandes blanches.
   On étire le conteneur au viewport. Idéal : dans Elementor, section → Pleine largeur + contenu pleine largeur. */
body.bh-hero-overlay .bh-site-content--elementor .bh-page__content > .elementor > .elementor-top-section:first-child.elementor-section-boxed > .elementor-container {
  max-width: 100%;
  width: 100%;
  padding-left: 0;
  padding-right: 0;
}

/* Même logique avec les conteneurs flex Elementor (e-con) : évite le cadre « boxed » sur le 1er bloc */
body.bh-hero-overlay .bh-site-content--elementor .bh-page__content > .elementor > .e-con:first-child.e-con-boxed {
  max-width: 100% !important;
  width: 100%;
}
body.bh-hero-overlay .bh-site-content--elementor .bh-page__content > .elementor > .e-con:first-child {
  margin-top: 0;
}

/* Page (non-Elementor) */
.bh-page__header {
  margin-bottom: var(--bh-space-xl);
}

.bh-page__title {
  font-size: var(--bh-fs-3xl);
  font-weight: var(--bh-fw-semibold);
  margin: 0;
}

.bh-page__content {
  margin-bottom: var(--bh-space-xl);
}

.bh-page-links {
  margin-top: var(--bh-space-xl);
  padding-top: var(--bh-space-xl);
  border-top: 1px solid var(--bh-border-color-light);
}

.bh-page-links__title {
  font-weight: var(--bh-fw-semibold);
  margin-right: var(--bh-space-sm);
}

/* ═══════════════════════════════════════════════════════════════════
   Scrollbar page — fin, gris clair
   WebKit (Chrome, Edge, Safari) + Firefox (thin + scrollbar-color)
   ═══════════════════════════════════════════════════════════════════ */

html {
  scrollbar-width: thin;
  scrollbar-color: var(--bh-scrollbar-thumb) var(--bh-scrollbar-track);
}

html::-webkit-scrollbar {
  width: var(--bh-scrollbar-size);
  height: var(--bh-scrollbar-size);
}

html::-webkit-scrollbar-track {
  background: var(--bh-scrollbar-track);
}

html::-webkit-scrollbar-thumb {
  background-color: var(--bh-scrollbar-thumb);
  border-radius: 999px;
  border: 2px solid var(--bh-scrollbar-track);
}

html::-webkit-scrollbar-thumb:hover {
  background-color: var(--bh-scrollbar-thumb-hover);
}