/* =========================================================
   BACHATA DISTRICT — Composants
   Portage du prototype React vers des classes CSS
   ========================================================= */

/* ---------- Layout ---------- */
.bd-wrap      { max-width: 1280px; margin: 0 auto; }
.bd-band      { max-width: 1280px; margin: 0 auto; padding: 40px 32px; }
.bd-page      { max-width: 1280px; margin: 0 auto; padding: 40px 32px 96px; }
.bd-page-narrow { max-width: 860px; margin: 0 auto; padding: 40px 32px 96px; }
.bd-stack     { display: flex; flex-direction: column; }
.bd-row       { display: flex; align-items: center; }
.bd-gap-2 { gap: 8px; } .bd-gap-3 { gap: 12px; } .bd-gap-4 { gap: 16px; }
.bd-gap-6 { gap: 24px; } .bd-gap-8 { gap: 32px; }
.bd-wraprow   { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.bd-mt-2 { margin-top: 8px; } .bd-mt-4 { margin-top: 16px; }
.bd-mt-6 { margin-top: 24px; } .bd-mt-8 { margin-top: 32px; } .bd-mt-12 { margin-top: 48px; }

.bd-grid       { display: grid; gap: 16px; }
.bd-grid-3     { grid-template-columns: repeat(3, 1fr); }
.bd-grid-2     { grid-template-columns: repeat(2, 1fr); }
.bd-grid-side  { grid-template-columns: 1.6fr 1fr; gap: 40px; align-items: start; }

/* ---------- Typographie utilitaire ---------- */
.bd-eyebrow {
  font-family: var(--font-mono); font-size: 12px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-muted);
}
.bd-eyebrow--coral { color: var(--coral-400); }
.bd-eyebrow--sun   { color: var(--sun-200); }
.bd-meta {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--coral-400);
}
.bd-title-xl {
  font-family: var(--font-display); font-size: clamp(52px, 7vw, 104px);
  line-height: 0.98; letter-spacing: -0.025em; margin: 0;
  color: var(--fg-strong); font-weight: 400;
}
.bd-title-lg {
  font-family: var(--font-display); font-size: 72px; margin: 0;
  letter-spacing: -0.025em; color: var(--fg-strong); line-height: 1.02;
}
.bd-title-md {
  font-family: var(--font-display); font-size: 48px; margin: 0;
  letter-spacing: -0.02em; color: var(--fg-strong); line-height: 1.05;
}
.bd-italic { font-style: italic; }
.bd-coral  { color: var(--coral-400); }
.bd-lead   { font-size: 19px; line-height: 1.5; color: var(--fg-muted); max-width: 560px; }
.bd-muted  { color: var(--fg-muted); }

/* ---------- Boutons ---------- */
.bd-btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-body); font-weight: 500;
  border-radius: var(--radius-pill); border: 1px solid transparent;
  cursor: pointer; transition: all var(--dur-base) var(--ease-out);
  letter-spacing: -0.005em; white-space: nowrap; text-decoration: none;
  padding: 11px 18px; font-size: 15px;
}
.bd-btn--sm { padding: 7px 14px; font-size: 13px; }
.bd-btn--lg { padding: 14px 22px; font-size: 16px; }
.bd-btn--primary   { background: var(--primary); color: var(--primary-fg); }
.bd-btn--primary:hover  { background: var(--primary-hover); }
.bd-btn--secondary { background: var(--ink-300); color: var(--sand-50); }
.bd-btn--secondary:hover { background: var(--ink-400); }
.bd-btn--ghost     { background: transparent; color: var(--fg-strong); border-color: var(--border-strong); }
.bd-btn--ghost:hover { background: var(--surface-2); }
.bd-btn--subtle    { background: var(--surface-2); color: var(--fg-strong); }
.bd-btn--plain     { background: transparent; color: var(--fg-strong); }
.bd-btn--plain:hover { color: var(--coral-400); }
.bd-btn--on-dark   { background: var(--sand-50); color: var(--ink-300); }
.bd-btn--block     { width: 100%; justify-content: center; }

.bd-icon-btn {
  width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--border);
  background: transparent; color: var(--fg-strong); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background var(--dur-base), color var(--dur-base);
  position: relative; flex: none;
}
.bd-icon-btn:hover { background: var(--surface-2); }
.bd-icon-btn.is-active { color: var(--coral-300); }
.bd-badge {
  position: absolute; top: -3px; right: -3px; min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 999px; background: var(--coral-300); color: #fff;
  font-family: var(--font-mono); font-size: 10px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}

/* ---------- Tags & chips ---------- */
.bd-tag {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em;
  padding: 4px 8px; border-radius: var(--radius-pill);
  display: inline-flex; align-items: center; gap: 5px;
  text-transform: uppercase; font-weight: 500;
  background: var(--surface-2); color: var(--fg-muted);
}
.bd-tag--coral { background: var(--coral-50); color: var(--coral-500); }
.bd-tag--sun   { background: var(--sun-50);   color: var(--sun-400); }
.bd-tag--leaf  { background: var(--leaf-100); color: var(--leaf-400); }
.bd-tag--mauve { background: var(--mauve-100);color: var(--mauve-400); }
.bd-tag--ink   { background: var(--ink-300);  color: var(--sand-50); }
.bd-tag--outline { background: transparent; color: var(--fg-muted); border: 1px solid var(--border-strong); }
.bd-tag--outline-light { background: transparent; color: var(--sand-50); border: 1px solid rgba(251,248,241,0.45); }

.bd-chip {
  font-family: var(--font-body); font-size: 13px; font-weight: 500;
  padding: 7px 14px; border-radius: var(--radius-pill);
  border: 1px solid var(--border-strong); background: transparent;
  color: var(--fg-strong); cursor: pointer;
  transition: all var(--dur-base) var(--ease-out);
}
.bd-chip:hover { border-color: var(--fg-strong); }
.bd-chip.is-active { background: var(--ink-300); border-color: var(--ink-300); color: var(--sand-50); }

/* ---------- Navigation ---------- */
.bd-nav {
  position: sticky; top: 16px; z-index: 40;
  margin: 16px auto 0; max-width: 1280px; width: calc(100% - 32px);
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 18px;
  background: var(--nav-bg);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--border); border-radius: var(--radius-pill);
  box-shadow: var(--shadow-sm); flex-wrap: wrap; row-gap: 10px;
  transition: border-radius var(--dur-base) var(--ease-out);
}
.bd-nav.is-open { border-radius: var(--radius-xl); }
.bd-nav__logo { display: flex; align-items: center; }
.bd-nav__logo img { height: 28px; }
.bd-nav__links { display: flex; gap: 28px; }
.bd-nav__links a {
  font-size: 14px; font-weight: 500; color: var(--fg-strong);
  text-decoration: none; transition: color var(--dur-base);
}
.bd-nav__links a:hover, .bd-nav__links a[aria-current="page"] { color: var(--coral-400); }
.bd-nav__actions { display: flex; gap: 8px; align-items: center; }
.bd-nav__burger { display: none; }
.bd-nav__drawer {
  flex-basis: 100%; border-top: 1px solid var(--border);
  padding-top: 12px; margin-top: 2px; display: none; flex-direction: column; gap: 2px;
}
.bd-nav.is-open .bd-nav__drawer { display: flex; }
.bd-nav__drawer a {
  font-size: 16px; font-weight: 500; padding: 10px 6px;
  color: var(--fg-strong); text-decoration: none; border-radius: var(--radius-sm);
}
.bd-nav__drawer a[aria-current="page"] { color: var(--coral-400); }

/* Logo : bascule jour / nuit */
.bd-logo-night { display: none; }
html.night .bd-logo-day   { display: none; }
html.night .bd-logo-night { display: block; }

/* ---------- Visuel d'événement (dégradés) ---------- */
.bd-art { position: relative; overflow: hidden; background: var(--ink-300); }
.bd-art::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(120% 80% at 30% 70%, rgba(244,162,97,0.42), transparent 60%);
}
.bd-art--0 { background: linear-gradient(135deg, #211726 0%, #5f25a8 55%, #cf1601 100%); }
.bd-art--1 { background: linear-gradient(160deg, #0e0a16 0%, #211726 45%, #7d0d00 100%); }
.bd-art--2 { background: linear-gradient(135deg, #0e0a16 0%, #4a1f7a 60%, #f0dc82 100%); }
.bd-art--3 { background: linear-gradient(150deg, #211726 0%, #9c52f2 50%, #e85f4d 100%); }
.bd-art--4 { background: linear-gradient(135deg, #5f25a8 0%, #7d0d00 60%, #f0dc82 100%); }
.bd-art--5 { background: linear-gradient(120deg, #14101c 0%, #5f25a8 40%, #a81100 100%); }
.bd-art--1::after, .bd-art--4::after { background: radial-gradient(100% 70% at 70% 30%, rgba(255,255,255,0.18), transparent 60%); }
.bd-art--2::after, .bd-art--5::after { background: radial-gradient(110% 80% at 20% 30%, rgba(238,154,133,0.35), transparent 65%); }
.bd-art > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ---------- Carte soirée ---------- */
.bd-card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--shadow-sm); display: flex; flex-direction: column;
  transition: all var(--dur-base) var(--ease-out);
  text-decoration: none; color: inherit;
}
.bd-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.bd-card__art { position: relative; aspect-ratio: 16 / 10; }
.bd-card--lg .bd-card__art { aspect-ratio: 16 / 9; }
.bd-card__pills { position: absolute; top: 12px; left: 12px; display: flex; gap: 6px; flex-wrap: wrap; z-index: 1; }
.bd-pill {
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  letter-spacing: 0.06em; text-transform: uppercase;
  padding: 4px 9px; border-radius: var(--radius-pill);
  background: rgba(251,248,241,0.95); color: var(--ink-400);
}
.bd-pill--coral { background: var(--coral-300); color: #fff; }
.bd-card__fav { position: absolute; top: 12px; right: 12px; z-index: 2; }
.bd-card__body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.bd-card__top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.bd-card__price { font-family: var(--font-mono); font-size: 12px; color: var(--fg-muted); }
.bd-card__title {
  font-family: var(--font-display); font-size: 22px; line-height: 1.1; margin: 0;
  color: var(--fg-strong); letter-spacing: -0.01em;
}
.bd-card--lg .bd-card__title { font-size: 28px; }
.bd-card__addr { font-size: 13px; color: var(--fg-muted); display: flex; align-items: center; gap: 6px; }
.bd-card__tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }

/* Bouton favori */
.bd-fav {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--surface-2); border: none;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--ink-300);
  transition: transform var(--dur-fast) var(--ease-spring), color var(--dur-base);
}
.bd-fav--light { background: rgba(251,248,241,0.95); }
.bd-fav:hover { transform: scale(1.12); }
.bd-fav.is-fav { color: var(--coral-300); }
.bd-fav .bd-heart-full { display: none; }
.bd-fav.is-fav .bd-heart-full { display: block; }
.bd-fav.is-fav .bd-heart-line { display: none; }

/* ---------- Carte compacte ---------- */
.bd-card-compact {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: 14px;
  display: grid; grid-template-columns: 88px 1fr auto; gap: 16px;
  align-items: center; transition: all var(--dur-base) var(--ease-out);
  text-decoration: none; color: inherit;
}
.bd-card-compact:hover { border-color: var(--border-strong); }
.bd-card-compact__art { aspect-ratio: 1; border-radius: var(--radius-sm); }
.bd-card-compact__mid { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.bd-card-compact__title {
  font-family: var(--font-display); font-size: 22px; margin: 0;
  color: var(--fg-strong); line-height: 1.1; letter-spacing: -0.01em;
}
.bd-card-compact__end { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }

/* ---------- Hero ---------- */
.bd-hero { position: relative; padding: 80px 32px; overflow: hidden; }
.bd-hero__disk {
  position: absolute; right: -80px; top: 40px; width: 540px; height: 540px; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #f0dc82, #cf1601 35%, #5f25a8 75%, #0e0a16);
  filter: blur(2px); opacity: 0.95; pointer-events: none;
}
.bd-hero__glow {
  position: absolute; right: 120px; top: 200px; width: 220px; height: 220px; border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, #f7ecb8, #f0dc82 60%, transparent);
  mix-blend-mode: screen; opacity: 0.6; pointer-events: none;
}
.bd-hero__inner {
  position: relative; max-width: 1280px; margin: 0 auto;
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 64px; align-items: center;
}
.bd-stats { margin-top: 64px; display: flex; gap: 48px; flex-wrap: wrap; }
.bd-stat__num {
  font-family: var(--font-display); font-size: 56px; line-height: 1;
  color: var(--fg-strong); letter-spacing: -0.02em;
}
.bd-stat__label {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--fg-muted); margin-top: 6px;
}

/* ---------- En-tête de section ---------- */
.bd-section-head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 14px; margin-bottom: 24px; flex-wrap: wrap;
}

/* ---------- Bande nuit ---------- */
.bd-night {
  background: var(--ink-night); color: var(--sand-50);
  margin-top: 80px; padding: 80px 32px;
}
.bd-night h2 {
  font-family: var(--font-display); font-size: 56px; margin: 0;
  letter-spacing: -0.02em; max-width: 820px; color: var(--sand-50);
}
.bd-night-card {
  background: rgba(251,248,241,0.04); border: 1px solid rgba(251,248,241,0.1);
  border-radius: var(--radius-lg); padding: 24px;
  transition: all var(--dur-base) var(--ease-out);
  text-decoration: none; color: inherit; display: block;
}
.bd-night-card:hover { background: rgba(251,248,241,0.08); transform: translateY(-2px); }
.bd-night-card__dot { width: 44px; height: 44px; border-radius: 50%; margin-bottom: 16px; }
.bd-night-card__name { font-family: var(--font-display); font-size: 32px; font-style: italic; margin-bottom: 4px; }
.bd-night-card__count {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase; color: rgba(251,248,241,0.5); margin-bottom: 14px;
}
.bd-night-card p { font-size: 14px; line-height: 1.6; color: rgba(251,248,241,0.78); margin: 0; }

/* ---------- Fiche détaillée ---------- */
.bd-detail__hero { position: relative; aspect-ratio: 21 / 9; border-radius: var(--radius-lg); overflow: hidden; }
.bd-detail__grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 48px; margin-top: 40px; align-items: start; }
.bd-panel {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 24px;
}
.bd-panel--sticky { position: sticky; top: 96px; }
.bd-kv { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--border); }
.bd-kv:last-child { border-bottom: none; }
.bd-kv__k { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-muted); }
.bd-kv__v { font-size: 15px; color: var(--fg-strong); text-align: right; }
.bd-prose { font-size: 16px; line-height: 1.7; color: var(--fg); max-width: 68ch; }
.bd-prose p { margin: 0 0 16px; }

/* Planning */
.bd-schedule { display: flex; flex-direction: column; gap: 2px; }
.bd-schedule__day {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--coral-400); margin: 20px 0 8px;
}
.bd-schedule__row {
  display: grid; grid-template-columns: 80px 1fr auto; gap: 16px;
  padding: 12px 0; border-bottom: 1px solid var(--border); align-items: center;
}
.bd-schedule__hour { font-family: var(--font-mono); font-size: 14px; color: var(--fg-strong); }

/* Tarifs */
.bd-price-row {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 12px 0; border-bottom: 1px dashed var(--border);
}
.bd-price-row:last-child { border-bottom: none; }
.bd-price-row__amount { font-family: var(--font-display); font-size: 24px; color: var(--fg-strong); }

/* ---------- Filtres ---------- */
.bd-filters {
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
  padding: 16px 0; border-bottom: 1px solid var(--border); margin-bottom: 24px;
}
.bd-filter-group { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.bd-filter-label {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--fg-subtle); margin-right: 4px;
}
.bd-search {
  display: flex; align-items: center; gap: 10px; flex: 1; min-width: 220px;
  background: var(--card); border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill); padding: 10px 16px;
}
.bd-search input { border: none; background: transparent; outline: none; flex: 1; font-size: 15px; color: var(--fg); }
.bd-empty {
  padding: 64px 24px; text-align: center; color: var(--fg-muted);
  border: 1px dashed var(--border-strong); border-radius: var(--radius-lg);
}

/* ---------- Formulaires ---------- */
.bd-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 18px; }
.bd-field label {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--fg-muted);
}
.bd-field input, .bd-field select, .bd-field textarea {
  background: var(--card); border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm); padding: 12px 14px;
  font-size: 15px; color: var(--fg); outline: none;
  transition: border-color var(--dur-base);
}
.bd-field input:focus, .bd-field select:focus, .bd-field textarea:focus { border-color: var(--coral-300); }
.bd-field textarea { min-height: 120px; resize: vertical; }
.bd-field__hint { font-size: 13px; color: var(--fg-subtle); }
.bd-form-note {
  background: var(--surface); border-left: 3px solid var(--coral-300);
  padding: 14px 16px; border-radius: var(--radius-sm); font-size: 14px; color: var(--fg-muted);
}

/* ---------- Offres (monétisation) ---------- */
.bd-offer {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 28px 24px;
  display: flex; flex-direction: column; gap: 14px;
  transition: all var(--dur-base) var(--ease-out);
}
.bd-offer:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.bd-offer--featured { border-color: var(--coral-300); box-shadow: var(--shadow-coral); }
.bd-offer__price { font-family: var(--font-display); font-size: 48px; line-height: 1; color: var(--fg-strong); }
.bd-offer__period { font-family: var(--font-mono); font-size: 12px; color: var(--fg-muted); }
.bd-offer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.bd-offer li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.5; color: var(--fg); }
.bd-offer li svg { flex: none; margin-top: 2px; color: var(--leaf-400); }

/* ---------- Pied de page ---------- */
.bd-footer {
  margin-top: 96px; padding: 64px 32px 40px;
  background: var(--ink-night); color: var(--sand-50);
}
.bd-footer__cols {
  max-width: 1280px; margin: 0 auto; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 48px;
}
.bd-footer__brand { min-width: 260px; }
.bd-footer__brand img { height: 38px; margin-bottom: 16px; }
.bd-footer__brand p { font-size: 15px; line-height: 1.6; color: rgba(251,248,241,0.7); max-width: 360px; margin: 0; }
.bd-footer__title {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--sun-200); margin-bottom: 18px;
}
.bd-footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.bd-footer ul a { color: rgba(251,248,241,0.85); text-decoration: none; font-size: 14px; }
.bd-footer ul a:hover { color: var(--sun-200); }
.bd-footer__legal {
  max-width: 1280px; margin: 56px auto 0; padding-top: 24px;
  border-top: 1px solid rgba(251,248,241,0.12);
  display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
  font-family: var(--font-mono); font-size: 11px; color: rgba(251,248,241,0.5);
  letter-spacing: 0.06em; text-transform: uppercase;
}

/* ---------- Fil d'Ariane ---------- */
.bd-crumbs {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--fg-subtle); margin-bottom: 20px;
}
.bd-crumbs a { color: var(--fg-muted); text-decoration: none; }
.bd-crumbs a:hover { color: var(--coral-400); }

/* ---------- Responsive ---------- */
@media (max-width: 1039px) {
  .bd-hero__inner  { grid-template-columns: 1fr; gap: 40px; }
  .bd-hero__disk   { right: -180px; opacity: 0.4; }
  .bd-hero__glow   { right: 0; }
  .bd-grid-3       { grid-template-columns: repeat(2, 1fr); }
  .bd-grid-side    { grid-template-columns: 1fr; }
  .bd-detail__grid { grid-template-columns: 1fr; gap: 32px; }
  .bd-panel--sticky { position: static; }
  .bd-nav__links   { display: none; }
  .bd-nav__desktop-actions { display: none; }
  .bd-nav__burger  { display: flex; }
}

[id] { scroll-margin-top: 96px; }

@media (max-width: 759px) {
  .bd-hero__disk { opacity: 0.22; top: 0; }
  .bd-hero__glow { display: none; }
  .bd-band, .bd-page  { padding: 32px 18px; }
  .bd-page            { padding-bottom: 80px; }
  .bd-page-narrow     { padding: 28px 18px 80px; }
  .bd-hero            { padding: 40px 18px 24px; }
  .bd-night           { padding: 56px 18px; }
  .bd-night h2        { font-size: 36px; }
  .bd-grid-3, .bd-grid-2 { grid-template-columns: 1fr; }
  .bd-title-lg        { font-size: 48px; }
  .bd-title-md        { font-size: 34px; }
  .bd-stats           { margin-top: 40px; gap: 28px; }
  .bd-stat__num       { font-size: 44px; }
  .bd-lead            { font-size: 17px; }
  .bd-card-compact    { grid-template-columns: 64px 1fr; }
  .bd-card-compact__end { grid-column: 2; flex-direction: row; align-items: center; justify-content: space-between; }
  .bd-detail__hero    { aspect-ratio: 16 / 10; }
  .bd-schedule__row   { grid-template-columns: 64px 1fr; }
  .bd-footer          { padding: 48px 18px 32px; }
}

/* ---------------------------------------------------------------
   Questions fréquentes, en bas des listes
   --------------------------------------------------------------- */

.bd-faq { max-width: 72ch; }

.bd-faq__list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--rule, #d8d2c4);
}

.bd-faq__item { border-bottom: 1px solid var(--rule, #d8d2c4); }

.bd-faq__q {
  cursor: pointer;
  list-style: none;
  padding: 18px 40px 18px 0;
  position: relative;
  font-weight: 700;
  line-height: 1.4;
}

.bd-faq__q::-webkit-details-marker { display: none; }

/* Le chevron pivote à l'ouverture — repère d'état, pas décoration. */
.bd-faq__q::after {
  content: "";
  position: absolute;
  right: 6px;
  top: 26px;
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transform-origin: center;
  opacity: .5;
}

.bd-faq__item[open] .bd-faq__q::after {
  transform: rotate(-135deg);
  top: 30px;
}

.bd-faq__q:focus-visible {
  outline: 2px solid var(--coral-400, #cf1601);
  outline-offset: 2px;
  border-radius: 2px;
}

.bd-faq__a {
  padding: 0 40px 20px 0;
  line-height: 1.65;
  opacity: .82;
}

@media (prefers-reduced-motion: no-preference) {
  .bd-faq__q::after { transition: transform .18s ease; }
}

/* ---------------------------------------------------------------
   Blog : liste d'articles
   --------------------------------------------------------------- */

.bd-articles {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--rule, #d8d2c4);
}

.bd-article-row {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 28px;
  padding: 28px 0;
  border-bottom: 1px solid var(--rule, #d8d2c4);
  align-items: start;
}

.bd-article-row__meta {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  opacity: .6;
  padding-top: 6px;
}

.bd-article-row__body { display: flex; flex-direction: column; gap: 10px; }

.bd-article-row__title {
  margin: 0;
  font-size: 26px;
  line-height: 1.2;
}

.bd-article-row__title a {
  color: inherit;
  text-decoration: none;
}

.bd-article-row__title a:hover { color: var(--coral-400, #cf1601); }

.bd-article-row__title a:focus-visible {
  outline: 2px solid var(--coral-400, #cf1601);
  outline-offset: 3px;
  border-radius: 2px;
}

.bd-article-row__excerpt {
  margin: 0;
  opacity: .78;
  line-height: 1.6;
  max-width: 62ch;
}

.bd-article-row__more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 700;
  color: var(--coral-400, #cf1601);
  text-decoration: none;
  align-self: start;
}

.bd-article-row__more:hover { text-decoration: underline; }

@media (max-width: 700px) {
  .bd-article-row { grid-template-columns: 1fr; gap: 10px; }
  .bd-article-row__meta { padding-top: 0; }
  .bd-article-row__title { font-size: 22px; }
}