/* Boutons, cartes, tags */
.btn {
  display: inline-block; padding: 12px 22px; border-radius: 999px;
  text-decoration: none; font-weight: 600; border: 1px solid transparent;
  transition: background .15s, border-color .15s, color .15s;
}
.btn-primary { background: var(--green); color: #fff; }
.btn-primary:hover { background: var(--green-light); }
.btn-ghost { color: var(--text); border-color: var(--border); }
.btn-ghost:hover { border-color: var(--muted); }

.card {
  background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 18px; display: flex; flex-direction: column; gap: 8px;
}
.card p { color: var(--muted); margin: 0; }
.card-media {
  aspect-ratio: 16 / 9; width: 100%; object-fit: cover; border-radius: 10px;
  background: var(--gradient);
  margin-bottom: 6px;
}

.tag {
  align-self: flex-start; margin-top: 6px;
  font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em;
  color: var(--yellow); border: 1px solid var(--yellow); border-radius: 999px; padding: 3px 10px;
}