/* Barre d'achat collante — téléphones uniquement.
   Sur un écran de téléphone, les pages d'offre font 13 écrans de haut : le
   bouton du haut sort de vue au deuxième scroll et ne revient qu'à la fin.
   Cette barre le remet sous le pouce en permanence, dès qu'on a dépassé le
   premier écran. Sur grand écran, le bouton reste visible assez longtemps —
   on ne la montre pas, elle mangerait de la place pour rien. */
.barre-achat {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 60;
  display: none;
  align-items: center;
  gap: 12px;
  padding: 11px 14px calc(11px + env(safe-area-inset-bottom));
  background: rgba(250, 250, 247, .94);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
          backdrop-filter: saturate(180%) blur(14px);
  border-top: 1px solid var(--grey-200, rgba(10, 10, 10, .1));
  transform: translateY(105%);
  transition: transform .34s cubic-bezier(.16, 1, .3, 1);
}
.barre-achat.visible { transform: translateY(0); }
.barre-achat-texte { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.barre-achat-offre { font-size: 11px; color: var(--grey-500, #888); text-transform: uppercase; letter-spacing: .07em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.barre-achat-prix  { font-size: 16px; font-weight: 700; color: var(--ink, #0a0a0a); letter-spacing: -.02em; white-space: nowrap; }
.barre-achat-btn {
  margin-left: auto; flex: 0 0 auto;
  padding: 12px 20px; border-radius: 999px;
  background: var(--ink, #0a0a0a); color: var(--ivory, #fafaf7);
  font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap;
}
.barre-achat-btn:active { transform: scale(.97); }

@media (max-width: 860px) { .barre-achat { display: flex; } }
/* Quelqu'un qui a demandé moins d'animations la voit apparaître sans glissement. */
@media (prefers-reduced-motion: reduce) { .barre-achat { transition: none; } }