/* Offres, en paquet (offers-deck.js) : les cartes empilées, posées et tournées par le script, la lueur du plateau
   et la barre de commandes. Sans mouvement, rien de tout ça : les cartes restent en grille (offers.css). */

.deck-glow {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(34% 44% at 50% 46%, var(--glow, #9c978e), transparent 72%);
  opacity: 0;
  transition: opacity 1.1s var(--ease-out);
  pointer-events: none;
}
.deck-glow.is-on {
  opacity: 0.2;
}

.deck-bar {
  display: none;
}
.offers-stage.is-deck {
  padding: 56px 32px 24px;
}
.is-deck .offer-cards {
  --card-w: clamp(300px, 31vw, 440px);
  grid-template-columns: var(--card-w);
  justify-content: center;
  gap: 0;
  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none;
}
.is-deck .offer-card {
  grid-area: 1 / 1;
  transform-origin: 50% 80%;
  backface-visibility: hidden;
  cursor: pointer;
  transition: transform 0.95s var(--ease-expo);
}
/* Le voile qui assombrit les cartes à mesure qu'elles reculent ; il s'éclaircit au survol. */
.is-deck .offer-card::after {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: 2;
  border-radius: inherit;
  background: #050505;
  opacity: var(--shade, 0);
  transition: opacity 0.8s var(--ease-out);
  pointer-events: none;
}
.is-deck .offer-card:not(.is-front):hover::after {
  opacity: calc(var(--shade, 0) * 0.6);
}
.is-deck .offer-card.is-front {
  cursor: grab;
}
.is-deck.is-dragging .offer-card.is-front {
  cursor: grabbing;
  transition: transform 0.25s var(--ease-out);
}
.is-deck .offer-card.is-returning {
  transition: transform 0.8s cubic-bezier(0.34, 1.45, 0.64, 1);
}
.is-deck .offer-card.is-flicking,
.is-deck.is-resizing .offer-card {
  transition: none;
}
.is-deck.is-waiting .offer-card {
  opacity: 0;
}
/* La carte qui arrive devant : son contenu monte en cascade, l'ancien prix se barre à nouveau. */
.is-deck .offer-card.is-front > * {
  animation: deck-rise 0.8s var(--ease-expo) both;
  animation-delay: calc(0.16s + var(--k, 0) * 45ms);
}
.is-deck .offer-card.is-front .offer-old {
  animation: deck-strike 0.6s var(--ease-out) 0.7s both;
}
@keyframes deck-rise {
  from {
    opacity: 0;
    translate: 0 16px;
  }
}
@keyframes deck-strike {
  from {
    background-size: 0% 1.5px;
  }
}

.is-deck .deck-bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 24px;
  margin-top: 40px;
}
.deck-hint {
  color: rgb(var(--bg-rgb) / 0.55);
  transition: color 0.5s ease;
}
/* Pendant l'indice de glissement (offers-deck.js), « Glissez les cartes » s'allume. */
.is-hinting .deck-hint {
  color: var(--bg);
}
.deck-bars {
  display: flex;
  gap: 6px;
}
.deck-bars span {
  width: 36px;
  height: 2px;
  background: rgb(255 255 255 / 0.2);
  transition: background-color 0.3s ease;
}
.deck-bars span.is-active {
  background: var(--bg);
}
.deck-controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}
.deck-count {
  margin-right: 14px;
  white-space: nowrap;
  color: rgb(var(--bg-rgb) / 0.55);
  font-variant-numeric: tabular-nums;
}
.deck-count b {
  font-weight: 500;
  color: var(--bg);
}
.deck-nav {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1px solid rgb(255 255 255 / 0.22);
  border-radius: 50%;
  background: rgb(255 255 255 / 0.06);
  color: var(--bg);
  font-size: 18px;
  transition:
    background-color 0.2s ease,
    color 0.2s ease;
}
.deck-nav:hover {
  background: var(--bg);
  color: var(--ink);
}

@media (max-width: 640px) {
  .offers-stage.is-deck {
    padding: 40px 0 20px;
  }
  .is-deck .offer-cards {
    --card-w: min(80vw, 330px);
  }
  .is-deck .deck-bar {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 16px;
    margin-top: 36px;
    padding: 0 16px;
  }
  .deck-hint {
    display: none;
  }
  .deck-bars span {
    width: 22px;
  }
  .deck-controls {
    gap: 8px;
  }
  .deck-count {
    margin-right: 8px;
  }
}