/* [vd-split] sticky-buy-bar — extracted verbatim from videos/css/video.css. Tokens (--vd-*) come from .vd in video.css. */
/* =========================================================================
   Rich sticky buy bar — mobile only (desktop relies on the sticky kit column)
   Kept to a single compact row: the info column never wraps (it truncates),
   so the bar stays short and the "Tout ajouter" button is always visible.
   ========================================================================= */
.vd-stickybar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 55;
  display: flex; align-items: center; gap: 10px; padding: 8px 12px;
  background: #fff; border-top: 1px solid var(--vd-line); box-shadow: 0 -6px 22px rgba(0,0,0,.12);
  transform: translateY(120%); transition: transform .25s ease; will-change: transform;
  text-decoration: none; color: inherit;
}
.vd-stickybar.is-visible { transform: none; }
.vd-stickybar-thumbs { display: flex; flex: 0 0 auto; }
.vd-stickybar-thumbs img { width: 36px; height: 36px; object-fit: contain; background: var(--vd-bg-soft); border: 2px solid #fff; border-radius: 8px; margin-left: -12px; box-shadow: 0 1px 4px rgba(0,0,0,.12); }
.vd-stickybar-thumbs img:first-child { margin-left: 0; }
.vd-stickybar-info { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; line-height: 1.25; }
.vd-stickybar-title { font-weight: 800; font-size: 13px; color: var(--vd-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vd-stickybar-meta { color: var(--vd-body); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vd-stickybar-meta strong { color: var(--vd-ink); }
.vd-stickybar-cta { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px; color: var(--vd-primary-dark); font-weight: 800; font-size: 13.5px; }
.vd-stickybar-cta .vd-icon { font-size: 18px; }
@media (min-width: 901px) { .vd-stickybar { display: none; } }