.kb-swipe-root { position: relative; text-align: center; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }

/* Filtres : disposition claire */
.kb-filters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  margin: 10px auto 14px;
}
.kb-filters input,
.kb-filters select,
.kb-filters button {
  padding: 6px 10px;
  border: 1px solid #d0d5dd;
  border-radius: 8px;
  font-size: 14px;
}
.kb-filters button {
  background: #0ea5e9;
  color: #fff;
  border: none;
  cursor: pointer;
}

/* Pile de cartes */
.kb-cards {
  position: relative;
  width: var(--kb-card-w, 320px);
  height: var(--kb-card-h, 420px);
  margin: 12px auto;
}
.kb-card {
  position: absolute; inset: 0;
  border-radius: var(--kb-radius, 12px);
  overflow: hidden;
  background: #fff;
  box-shadow: 0 4px 14px rgba(0,0,0,var(--kb-shadow, .2));
  transition: transform .4s ease, opacity .4s ease, filter .2s ease;
}
.kb-card img {
  width: 100%;
  height: 75%;
  object-fit: cover;
  image-rendering: auto;
}
.kb-meta { padding: 10px; text-align: left; }
.kb-meta h3 { margin: 6px 0 4px; font-size: 18px; }
.kb-meta p { margin: 0; font-size: 13px; opacity: .9; }
.kb-dist { font-size: 12px; opacity: .7; margin-top: 4px; }

/* Boutons actions */
.kb-actions { margin-top: 12px; position: relative; z-index: 5; }
.kb-actions button {
  font-size: 28px; margin: 0 10px;
  width: 70px; height: 70px;
  border-radius: 50%;
  border: none;
  background: #fff;
  cursor: pointer;
  box-shadow: 0 3px 6px rgba(0,0,0,.2);
  transition: transform .12s ease;
}
.kb-actions button:hover { transform: scale(1.08); }

/* Popup match */
.kb-match {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.6);
  display: flex; align-items: center; justify-content: center;
  z-index: 9999;
}
.kb-match-box {
  background: #fff;
  padding: 18px 26px;
  border-radius: 16px;
  font-size: 18px;
  box-shadow: 0 6px 22px rgba(0,0,0,.35);
}

@media (max-width: 420px) {
  .kb-cards { width: min(92vw, 340px); height: calc(min(92vw, 340px) * 1.3); }
}
