// Styles propres à la variante « cover hero » de la login RDQA (photo terrain
// à gauche avec overlay dégradé bleu→vert + card form épurée à droite).
// Chargé automatiquement par Vite via le glob `pages/**/!(_)*.scss`.

@import "../_bootstrap-extended/include";

.auth-cover-hero {

  .auth-hero-side {
    position: relative;
    min-block-size: 100vh;
    // Dégradé bleu Material 600 → 800 + pattern SVG data en overlay.
    // Plus de photo — pattern abstrait cohérent avec la thématique data/santé.
    background:
      url("/assets/img/patterns/auth-data-pattern.svg") center / cover no-repeat,
      linear-gradient(135deg, #1e88e5 0%, #1565c0 100%);
    overflow: hidden;
  }

  .auth-hero-overlay {
    position: absolute;
    inset: 0;
    // Overlay subtil monochrome bleu Material qui renforce le dégradé
    // sans écraser le pattern SVG en dessous.
    background: linear-gradient(
      135deg,
      rgba(30, 136, 229, 0.25) 0%,   // bleu 600 léger
      rgba(21, 101, 192, 0.55) 100%  // bleu 800 plus dense
    );
  }

  .auth-hero-content {
    position: relative;
    z-index: 1;
    padding: 3rem 3.5rem;
    inline-size: 100%;
  }

  .auth-hero-chip {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .55rem 1rem;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .22);
    color: #fff;
    border-radius: .5rem;
    font-size: .875rem;
    backdrop-filter: blur(4px);

    i { font-size: 1.1rem; }
  }

  .auth-form-side {
    min-block-size: 100vh;
    background: var(--#{$prefix}body-bg);
  }

  .auth-form-card {
    box-shadow: 0 10px 40px rgba(0, 0, 0, .08);
    border: 0;
    border-radius: 1rem;
  }

  .auth-secured-chip {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .25rem .65rem;
    background: rgba(16, 185, 129, .12);
    color: #10b981;
    border-radius: .375rem;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .05em;
  }

  .btn-auth-gradient {
    // Bouton monochrome bleu Material 600 → 700 (aligné mobile).
    background: linear-gradient(90deg, #1e88e5 0%, #1976d2 100%);
    border: 0;
    color: #fff;
    transition: transform .15s ease-in-out, background .2s ease-in-out;

    &:hover,
    &:focus,
    &:active {
      background: linear-gradient(90deg, #1976d2 0%, #1565c0 100%);
      color: #fff;
      transform: translateY(-1px);
    }
  }
}