/* Effet 3D boutons — même logique que Community */
:root {
  --btn-3d-sm-depth: 3px;
  --btn-3d-sm-depth-hover: 4.5px;
  --btn-3d-sm-depth-active: 1.5px;
  --btn-3d-sm-lift-hover: -1.5px;
  --btn-3d-sm-lift-active: 1.5px;

  --btn-3d-md-depth: 4px;
  --btn-3d-md-depth-hover: 6px;
  --btn-3d-md-depth-active: 2px;
  --btn-3d-md-lift-hover: -2px;
  --btn-3d-md-lift-active: 2px;

  --btn-3d-lg-depth: 6px;
  --btn-3d-lg-depth-hover: 9px;
  --btn-3d-lg-depth-active: 3px;
  --btn-3d-lg-lift-hover: -3px;
  --btn-3d-lg-lift-active: 3px;
}

.btn-3d--sm,
.login-button {
  --btn-3d-depth: var(--btn-3d-sm-depth);
  --btn-3d-depth-hover: var(--btn-3d-sm-depth-hover);
  --btn-3d-depth-active: var(--btn-3d-sm-depth-active);
  --btn-3d-lift-hover: var(--btn-3d-sm-lift-hover);
  --btn-3d-lift-active: var(--btn-3d-sm-lift-active);
}

.btn-3d--md {
  --btn-3d-depth: var(--btn-3d-md-depth);
  --btn-3d-depth-hover: var(--btn-3d-md-depth-hover);
  --btn-3d-depth-active: var(--btn-3d-md-depth-active);
  --btn-3d-lift-hover: var(--btn-3d-md-lift-hover);
  --btn-3d-lift-active: var(--btn-3d-md-lift-active);
}

.btn-3d--lg,
.audience__cta {
  --btn-3d-depth: var(--btn-3d-lg-depth);
  --btn-3d-depth-hover: var(--btn-3d-lg-depth-hover);
  --btn-3d-depth-active: var(--btn-3d-lg-depth-active);
  --btn-3d-lift-hover: var(--btn-3d-lg-lift-hover);
  --btn-3d-lift-active: var(--btn-3d-lg-lift-active);
}

.login-button,
.audience__cta,
.hero__cta-primary {
  --btn-3d-shadow: color-mix(in srgb, var(--accent) 76%, black);
}

.login-button:active,
.audience__cta:active,
.hero__cta-primary:active {
  --btn-3d-shadow: color-mix(in srgb, var(--accent-active) 82%, black);
}

.audience__cta--dark {
  --btn-3d-shadow: #0a120c;
}

.login-button,
.audience__cta,
.hero__cta-primary {
  transition:
    transform 0.12s ease,
    box-shadow 0.12s ease,
    background-color 0.12s ease,
    filter 0.12s ease,
    color 0.12s ease,
    border-color 0.12s ease;
}

.login-button:not(:disabled),
.audience__cta,
.hero__cta-primary {
  box-shadow: 0 var(--btn-3d-depth) 0 var(--btn-3d-shadow);
}

.login-button:not(:disabled):hover,
.audience__cta:hover,
.hero__cta-primary:hover {
  transform: translateY(var(--btn-3d-lift-hover));
  box-shadow: 0 var(--btn-3d-depth-hover) 0 var(--btn-3d-shadow);
  --btn-3d-shadow: #0d1a10;
}

.login-button:not(:disabled):active,
.audience__cta:active,
.hero__cta-primary:active {
  transform: translateY(var(--btn-3d-lift-active));
  box-shadow: 0 var(--btn-3d-depth-active) 0 var(--btn-3d-shadow);
  --btn-3d-shadow: #061008;
}

@media (prefers-reduced-motion: reduce) {
  .login-button,
  .audience__cta,
  .hero__cta-primary {
    transition: none;
  }

  .login-button:hover,
  .audience__cta:hover,
  .hero__cta-primary:hover,
  .login-button:active,
  .audience__cta:active,
  .hero__cta-primary:active {
    transform: none;
  }
}