.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 56px;
  width: 234px;
  border-radius: 9999px;
  background: linear-gradient(270.04deg, #3f7bf8 0.04%, #b86bf8 99.96%);
  color: #fff;
  font-family: var(--font-satoshi);
  font-weight: 700;
  font-size: 16px;
  /* Every other `.btn` on the site is an <a>, which has no default browser
     chrome to begin with — this class was never actually tested against a
     real <button> until the AI Hub's "Afficher plus" used one. Without
     this reset, the browser's own UA stylesheet still wins: a chunky
     outset border and a plain (non-pointer) cursor were showing through
     right on top of the gradient, making that one button look broken/
     inert next to every anchor-based CTA that never had the problem. */
  border: none;
  appearance: none;
  cursor: pointer;
  transition: opacity 0.2s;
}

.btn:hover {
  opacity: 0.8;
}

.btn:focus-visible {
  outline: 2px solid #b86bf8;
  outline-offset: 3px;
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn:active:not(:disabled) {
  transform: scale(0.98);
}