@property --border-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
.btn-gradient {
  position: relative;
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.75rem 1.75rem;
  border-radius: 999px;
  color: var(--creme); background: var(--noir);
  border: none; cursor: pointer;
  isolation: isolate;
  font-family: var(--font-corps);
}
.btn-gradient::before {
  content: "";
  position: absolute; inset: -2px;
  border-radius: inherit; z-index: -1;
  background: conic-gradient(from var(--border-angle),
    transparent 0%, var(--or) 15%, var(--or-clair) 25%, transparent 40%);
  animation: border-rotate 3s linear infinite;
}
.btn-gradient::after {
  content: "";
  position: absolute; inset: 2px;
  border-radius: inherit; background: var(--noir); z-index: -1;
}
@keyframes border-rotate { to { --border-angle: 360deg; } }
.btn-gradient:hover::before { filter: brightness(1.5) blur(1px); }
@media (prefers-reduced-motion: reduce) { .btn-gradient::before { animation: none; } }