/* Layout d'authentification (héro + carte) — extrait de l'ancien base_auth.html */
  .auth-hero-bg {
    background: linear-gradient(160deg, #0B0A0F 0%, #15131C 55%, rgba(30,12,30,0.95) 100%);
  }

  /* ── Canvas particles ──────────────────────────────── */
  #auth-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
  }

  /* ── Floating stat cards ───────────────────────────── */
  .float-card {
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    will-change: transform;
    animation: floatCard 5s ease-in-out infinite;
  }
  .float-card:nth-child(1) { animation-duration: 5s;   animation-delay: 0s;    }
  .float-card:nth-child(2) { animation-duration: 6.5s; animation-delay: -2.2s; }
  .float-card:nth-child(3) { animation-duration: 4.8s; animation-delay: -4s;   }
  /* rotation variants — replaces inline --rot */
  .fc-a { --rot: -3deg;   }
  .fc-b { --rot:  2deg;   }
  .fc-c { --rot: -1.5deg; }
  @keyframes floatCard {
    0%, 100% { transform: translateY(0)     rotate(var(--rot, 0deg)); }
    50%       { transform: translateY(-10px) rotate(var(--rot, 0deg)); }
  }

  /* ── Hero text reveal ──────────────────────────────── */
  .hero-reveal {
    opacity: 0;
    will-change: opacity, transform;
    animation: heroReveal 0.75s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  }
  /* delay variants — replaces inline animation-delay */
  .hr-1 { animation-delay: .05s; }
  .hr-2 { animation-delay: .18s; }
  .hr-3 { animation-delay: .32s; }
  .hr-4 { animation-delay: .46s; }
  .hr-5 { animation-delay: .55s; }
  @keyframes heroReveal {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0);    }
  }

  /* ── Form card entrance ────────────────────────────── */
  .auth-card-wrap {
    opacity: 0;
    will-change: opacity, transform;
    animation: cardIn 0.65s cubic-bezier(0.16, 1, 0.3, 1) 0.15s forwards;
  }
  @keyframes cardIn {
    from { opacity: 0; transform: translateY(28px); }
    to   { opacity: 1; transform: translateY(0);    }
  }

  /* ── Field stagger ─────────────────────────────────── */
  .auth-field {
    opacity: 0;
    will-change: opacity, transform;
    animation: fieldIn 0.4s ease forwards;
  }
  @keyframes fieldIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0);    }
  }

  /* ── Input focus glow ──────────────────────────────── */
  .input-glow:focus-within {
    filter: drop-shadow(0 0 10px rgba(212,160,86,0.18));
  }

  /* ── Button shimmer ────────────────────────────────── */
  .btn-shimmer {
    position: relative;
    overflow: hidden;
  }
  .btn-shimmer::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg,
      transparent 30%,
      rgba(255,255,255,0.22) 50%,
      transparent 70%);
    transform: translateX(-120%);
  }
  .btn-shimmer:hover::after {
    animation: shimmerSweep 0.6s ease forwards;
  }
  @keyframes shimmerSweep {
    to { transform: translateX(120%); }
  }

  /* ── Logo pulse ────────────────────────────────────── */
  @keyframes logoPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(212,160,86,0); }
    50%       { box-shadow: 0 0 0 6px rgba(212,160,86,0.12); }
  }
  .logo-pulse { animation: logoPulse 3s ease-in-out infinite; }

  /* ── Tab underline transition ─────────────────────── */
  .auth-tab-indicator {
    position: absolute;
    bottom: -1px;
    left: 0;
    height: 2px;
    background: #D4A056;
    transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1), width 0.3s ease;
  }