.op-btn {
  --op-btn-color: var(--onepager-color0);
  --op-btn-bg-color: var(--onepager-color1);
  --op-btn-contrast: oklch(
    from var(--op-btn-bg-color) calc((0.95 - l) * infinity) 0 0
  );
  --op-btn-radius: var(--btn-radius);
  --op-btn-padding: 10px 40px;
  --op-btn-border-width: 2px; /* Ajout pour les bordures */

  display: inline-block;
  padding: var(--op-btn-padding);
  background: var(--op-btn-bg-color);
  color: var(--op-btn-color);
  text-decoration: none;
  font-size: 1rem;
  font-weight: 600;
  border-radius: var(--op-btn-radius) !important;
  border: var(--op-btn-border-width) solid transparent;
  transition: all 0.3s ease;
  cursor: pointer;

  /* Hover par défaut */
  &:hover {
    filter: brightness(0.9);
  }

  /* États */
  &.op-btn-active {
    transform: translateY(1px);
  }

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

  /* Variantes de style */
  &.op-btn-outline {
    background: transparent;
    border: var(--op-btn-border-width) solid var(--op-btn-bg-color);
    color: var(--op-btn-bg-color);

    &:hover {
      background: rgba(
        var(--op-btn-bg-color),
        0.1
      ); /* Léger remplissage au hover */
    }
  }

  &.op-btn-soft {
    background: color-mix(
      in oklab,
      var(--op-btn-bg-color) 30%,
      var(--op-btn-contrast) 70%
    );
    color: color-mix(
      in oklab,
      var(--op-btn-bg-color) 100%,
      var(--op-btn-contrast) 0%
    );
    border: none;

    &:hover {
      background: color-mix(
        in oklab,
        var(--op-btn-bg-color) 100%,
        var(--op-btn-contrast) 0%
      );
      color: color-mix(
        in oklab,
        var(--op-btn-bg-color) 0%,
        var(--op-btn-contrast) 100%
      );
    }
  }

  &.op-btn-ghost {
    background: transparent;
    color: var(--op-btn-bg-color);
    border: none;

    &:hover {
      background: rgba(var(--op-btn-bg-color), 0.1);
    }
  }

  &.op-btn-link {
    background: transparent;
    color: var(--op-btn-bg-color);
    text-decoration: underline;
    font-weight: 400;
    padding: 0;
    border: none;
    border-radius: 0;

    &:hover {
      text-decoration: none;
    }
  }

  &.op-btn-dash {
    background: transparent;
    border: var(--op-btn-border-width) dashed var(--op-btn-bg-color);
    color: var(--op-btn-bg-color);

    &:hover {
      border-style: solid; /* Passe en solid au hover, optionnel */
    }
  }

  /* Tailles */
  &.op-btn-xs {
    --op-btn-padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
  }

  &.op-btn-sm {
    --op-btn-padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
  }

  /* md est le défaut avec 10px 40px, mais tu peux ajuster si besoin */

  &.op-btn-lg {
    --op-btn-padding: 0.75rem 1.5rem;
    font-size: 1.125rem;
  }

  &.op-btn-xl {
    --op-btn-padding: 1rem 2rem;
    font-size: 1.25rem;
  }

  /* Modificateurs */
  &.op-btn-wide {
    padding-left: 3rem;
    padding-right: 3rem;
  }

  &.op-btn-block {
    display: block;
    width: 100%;
  }

  &.op-btn-square {
    padding: 0;
    width: 2.5rem; /* Ajuste selon la taille */
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  &.op-btn-circle {
    --op-btn-radius: 9999px;
    padding: 0;
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Animations add-on (adaptées des trois premiers de Codrops ButtonHoverStyles) */
  /* 1. Fill from bottom: Fond qui remplit de bas en haut */
  &.op-btn-anim1 {
    position: relative;
    overflow: hidden;
    z-index: 1; /* Pour que le texte reste au-dessus */

    &::before {
      content: "";
      position: absolute;
      bottom: -100%;
      left: 0;
      width: 100%;
      height: 100%;
      background: var(--op-btn-contrast);
      transition: bottom 0.3s ease;
      z-index: -1;
    }

    &:hover::before {
      bottom: 0;
    }
    &:hover {
      color: var(--op-btn-bg-color);
    }
  }

  /* 2. Underline from center: Ligne qui grandit du centre */
  &.op-btn-anim2 {
    position: relative;

    &::after {
      content: "";
      position: absolute;
      left: 50%;
      top: 50%;
      width: 0;
      height: 0;
      translate: -50% -50%;
      border-radius: var(--op-btn-radius);
      background: var(--op-btn-color);
      transition:
        width 0.3s ease,
        height 0.3s ease;
      z-index: -1;
    }

    &:hover::after {
      width: 100%;
      height: 100%;
    }
  }

  /* 3. Circle reveal: Cercle qui s'étend du centre pour un effet reveal */
  &.op-btn-anim3 {
    position: relative;
    overflow: hidden;
    z-index: 1;

    &::before {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      width: 0;
      height: auto;
      background: var(--op-btn-bg-color);
      border-radius: 50%;
      transform: translate(-50%, -50%);
      transition:
        width 0.4s ease,
        height 0.4s ease;
      z-index: -1;
      aspect-ratio: 1 / 1;
    }

    &:hover::before {
      width: 300%; /* Suffisamment grand pour couvrir le bouton */
    }
  }
}

.section-boutons .section-content {
	margin: auto;
	text-align: center;
}