/**
 * Funnel d'acquisition pages expertise — styles
 * Phase 1 : encart auteur early + mid-CTA + sticky bottom bar
 *
 * Voix BA FR Quiet Luxury :
 *  - paper-card #f7f5ef, ink #0a0a0a, oxblood #6b1f24
 *  - Cormorant Garamond pour le contenu, Inter pour UI
 *  - italique = sens, jamais sur des données factuelles
 *  - hairlines 1px, pas de shadow lourde
 */

/* ─── 01. Byline auteur (après conviction) — version inline, intégrée au flux
   Pas de card, pas de fond, pas de padding box. Juste une signature
   horizontale qui s'inscrit dans le rythme de lecture, comme une byline
   d'article éditorial. Hairline supérieure pour la séparer de la conviction. */
.ba-author-early {
  max-width: 720px;
  margin: 24px auto 0;
  padding: 18px 0 0;
  border-top: 1px solid rgba(10, 10, 10, 0.1);
}
.ba-author-early-inner {
  display: flex;
  align-items: center;
  gap: 14px;
}
.ba-author-early-photo {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
  background: #f3efe6;
}
.ba-author-early-meta {
  flex: 1;
  margin: 0;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 15px;
  line-height: 1.5;
  color: rgba(10, 10, 10, 0.75);
}
.ba-author-early-eyebrow {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 10px;
  font-style: normal;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(10, 10, 10, 0.45);
  margin-right: 6px;
}
.ba-author-early-name {
  color: #0a0a0a;
  text-decoration: none;
  border-bottom: 1px solid rgba(107, 31, 36, 0.35);
  transition: border-color 250ms cubic-bezier(0.16, 1, 0.3, 1);
}
.ba-author-early-name:hover {
  border-bottom-color: #6b1f24;
}
.ba-author-early-bars {
  display: inline;
  color: rgba(10, 10, 10, 0.55);
  font-style: italic;
  font-size: 13px;
}
@media (max-width: 640px) {
  .ba-author-early {
    margin: 20px auto 0;
    padding: 14px 0 0;
  }
  .ba-author-early-inner {
    gap: 12px;
  }
  .ba-author-early-photo {
    width: 40px;
    height: 40px;
  }
  .ba-author-early-meta {
    font-size: 14px;
  }
  .ba-author-early-bars {
    font-size: 12px;
  }
}

/* ─── 02. Mid-CTA (après FAQ) — set-piece sombre BA FR ─────────────────────
   Pattern visuel emprunté à la section Contact du site : bg ink-dark
   (#1a1a1a, jamais #000), texte paper, bouton pill paper sur ink-dark,
   ornement subtil de filets bronze haut/bas pour cadrer l'encart.
   Le contraste fort sépare l'encart du flux beige de l'article sans
   être agressif — c'est exactement le moment 'bascule contenu→contact'. */
.ba-mid-cta {
  margin: 48px 0;
}
.ba-mid-cta-inner {
  max-width: 800px;
  margin: 0 auto;
  padding: 44px 40px;
  background: #1a1a1a; /* ink-dark, jamais #000 */
  color: #fafaf9; /* paper */
  border-radius: 6px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
/* Filet bronze horizontal court (60px) en haut et en bas — code éditorial signature */
.ba-mid-cta-inner::before,
.ba-mid-cta-inner::after {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 48px;
  height: 1px;
  background: #8b6f47; /* bronze */
}
.ba-mid-cta-inner::before { top: 24px; }
.ba-mid-cta-inner::after  { bottom: 24px; }
.ba-mid-cta-text {
  margin: 0 0 22px;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 400;
  font-size: 24px;
  line-height: 1.4;
  color: #fafaf9; /* paper sur ink-dark */
}
.ba-mid-cta-text em {
  font-style: italic;
  color: #fafaf9;
}
/* Override du bouton primaire : pill paper sur fond ink-dark */
.ba-mid-cta .ba-mid-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 11px 24px;
  background: #fafaf9;
  color: #1a1a1a;
  text-decoration: none;
  border: none;
  border-radius: 999px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.02em;
  transition: transform 250ms cubic-bezier(0.16, 1, 0.3, 1), background 250ms cubic-bezier(0.16, 1, 0.3, 1);
}
.ba-mid-cta .ba-mid-cta-btn:hover {
  transform: translateY(-1px);
  background: #c9a872; /* bronze clair en hover, élégant */
  color: #1a1a1a;
}
.ba-mid-cta-reassurance {
  margin: 16px 0 0;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: rgba(250, 250, 249, 0.55); /* paper @55% sur ink-dark */
}
@media (max-width: 640px) {
  .ba-mid-cta-inner {
    padding: 36px 24px;
  }
  .ba-mid-cta-text {
    font-size: 20px;
  }
  .ba-mid-cta-reassurance {
    font-size: 11px;
  }
}

/* ─── 03. Sticky bottom bar ───────────────────────────────────────────── */
.ba-sticky-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background: rgba(247, 245, 239, 0.96); /* paper-card semi-transparent */
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-top: 1px solid rgba(10, 10, 10, 0.08);
  padding: 12px 0;
  transform: translateY(120%);
  opacity: 0;
  transition: transform 400ms cubic-bezier(0.16, 1, 0.3, 1), opacity 400ms cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}
.ba-sticky-bar.is-visible {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}
.ba-sticky-bar-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  gap: 16px;
}
.ba-sticky-bar-mark {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fafaf9; /* paper, contraste subtil avec paper-card du fond barre */
  border: 1px solid rgba(10, 10, 10, 0.1);
  border-radius: 4px; /* cartouche institutionnel — pas rond */
  color: #0a0a0a;
}
.ba-sticky-bar-mark svg {
  display: block;
  fill: currentColor;
}
.ba-sticky-bar-meta {
  flex: 1;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13px;
  line-height: 1.3;
  color: #0a0a0a;
}
.ba-sticky-bar-meta-cabinet {
  font-weight: 500;
}
.ba-sticky-bar-meta-pole {
  display: block;
  font-size: 11px;
  color: rgba(10, 10, 10, 0.55);
  margin-top: 1px;
}
.ba-sticky-bar-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 18px;
  background: #6b1f24; /* oxblood — premier signal éditorial fort */
  color: #fafaf9;
  text-decoration: none;
  border-radius: 999px; /* pill */
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  white-space: nowrap;
  transition: transform 250ms cubic-bezier(0.16, 1, 0.3, 1), background 250ms cubic-bezier(0.16, 1, 0.3, 1);
}
.ba-sticky-bar-cta:hover {
  transform: translateY(-1px);
  background: #0a0a0a;
}
.ba-sticky-bar-dismiss {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  color: rgba(10, 10, 10, 0.4);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  border-radius: 50%;
  transition: background 250ms cubic-bezier(0.16, 1, 0.3, 1), color 250ms cubic-bezier(0.16, 1, 0.3, 1);
}
.ba-sticky-bar-dismiss:hover {
  background: rgba(10, 10, 10, 0.06);
  color: #0a0a0a;
}
@media (max-width: 640px) {
  .ba-sticky-bar-inner {
    padding: 0 14px;
    gap: 10px;
  }
  .ba-sticky-bar-meta {
    font-size: 12px;
  }
  .ba-sticky-bar-meta-pole {
    display: none; /* gain d'espace mobile */
  }
  .ba-sticky-bar-cta {
    padding: 8px 14px;
    font-size: 12px;
  }
}