.avs-sdc-back-button {
  /* Tokens — surchargez-les dans votre thème si besoin */
  --bb-color: var(--color-primary, #1a1a1a);
  --bb-color-hover: var(--color-primary-dark, #000);
  --bb-gap: 0.5rem;
  --bb-font-size: 0.9375rem; /* 15 px */
  --bb-font-weight: 500;
  --bb-transition: 220ms ease;

  display: inline-flex;
  align-items: center;
  gap: var(--bb-gap);

  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;

  color: var(--bb-color);
  font-size: var(--bb-font-size);
  font-weight: var(--bb-font-weight);
  font-family: inherit;
  line-height: 1;
  text-decoration: none;

  transition: color var(--bb-transition), transform var(--bb-transition);
}

.avs-sdc-back-button:hover,
.avs-sdc-back-button:focus-visible {
  color: var(--bb-color-hover);
  transform: translateX(-3px);
  outline: none;
}

.avs-sdc-back-button:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
  border-radius: 2px;
}

/* Icône SVG */
.avs-sdc-back-button__icon {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  transition: transform var(--bb-transition);
}

.avs-sdc-back-button__icon svg {
  fill: currentColor;
}

.avs-sdc-back-button:hover .avs-sdc-back-button__icon,
.avs-sdc-back-button:focus-visible .avs-sdc-back-button__icon {
  transform: translateX(-2px);
}

/* Variante outline (via modifier_class="btn--outline") */
.avs-sdc-back-button.btn--outline {
  padding: 0.5rem 1rem;
  border: 1px solid currentColor;
  border-radius: 4px;
}

.avs-sdc-back-button.btn--outline:hover,
.avs-sdc-back-button.btn--outline:focus-visible {
  transform: none;
  background: var(--bb-color);
  color: #fff;
}