/* ================================
   Composant bouton submit premium
================================ */

.formBloc .buttonSub.btn-submit-premium {
  position: relative;
  overflow: hidden;

  display: block;
  width: 100%;
  max-width: 300px;

  margin: 45px auto 20px;
  padding: 16px 30px;

  border: none;
  border-radius: 50px;

  background: linear-gradient(
    135deg,
    rgb(100, 187, 245),
    rgb(82, 96, 173)
  );

  color: #fff;

  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.4px;

  cursor: pointer;

  box-shadow:
    0 8px 20px rgba(82, 96, 173, 0.25),
    inset 0 1px 1px rgba(255, 255, 255, 0.25);

  transition:
    transform 0.28s ease,
    box-shadow 0.28s ease,
    filter 0.28s ease,
    background 0.28s ease;
}

.formBloc .buttonSub.btn-submit-premium:hover {
  transform: translateY(-2px);
  filter: brightness(1.05);

  box-shadow:
    0 14px 28px rgba(82, 96, 173, 0.32),
    inset 0 1px 1px rgba(255, 255, 255, 0.25);
}

.formBloc .buttonSub.btn-submit-premium:active {
  transform: translateY(1px);

  box-shadow:
    0 4px 12px rgba(82, 96, 173, 0.22);
}

.formBloc .buttonSub.btn-submit-premium:focus {
  outline: none;

  box-shadow:
    0 0 0 4px rgba(100, 187, 245, 0.25),
    0 10px 24px rgba(82, 96, 173, 0.28);
}

.formBloc .buttonSub.btn-submit-premium:disabled {
  cursor: not-allowed;
  opacity: 0.9;
}

/* Contenu interne */

.btn-submit-text,
.btn-submit-loader,
.btn-submit-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.btn-submit-loader,
.btn-submit-check {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: scale(0.7);
}

/* Loader */

.btn-submit-loader::after {
  content: "";
  width: 20px;
  height: 20px;

  border: 3px solid rgba(255, 255, 255, 0.45);
  border-top-color: #fff;
  border-radius: 50%;

  animation: btn-loader-spin 0.8s linear infinite;
}

/* État chargement */

.btn-submit-premium.is-loading .btn-submit-text {
  opacity: 0;
  transform: translateY(-8px);
}

.btn-submit-premium.is-loading .btn-submit-loader {
  opacity: 1;
  transform: scale(1);
}

/* État succès */

.formBloc .buttonSub.btn-submit-premium.is-success {
  background: linear-gradient(135deg, #2ecc71, #27ae60);
}

.btn-submit-premium.is-success .btn-submit-loader,
.btn-submit-premium.is-success .btn-submit-text {
  opacity: 0;
  transform: scale(0.7);
}

.btn-submit-premium.is-success .btn-submit-check {
  opacity: 1;
  transform: scale(1.2);

  font-size: 1.6rem;
  font-weight: 800;
}

@keyframes btn-loader-spin {
  to {
    transform: rotate(360deg);
  }
}