/* ═══════════════════════════════════════════════════════════
   assets/css/login.css — Page d'authentification Pulse
   Thème clair, cohérent avec le dashboard.
   Accent unique : #6C63FF (violet Pulse)
   ═══════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --accent:       #6C63FF;
  --accent-hover: #5A52E8;
  --accent-light: rgba(108, 99, 255, 0.08);
  --accent-border:rgba(108, 99, 255, 0.25);

  --bg:       #F0F1FA;
  --card:     #FFFFFF;
  --border:   #E8EDFB;
  --text:     #0E0E24;
  --muted:    #6B7280;
  --subtle:   #9499C0;
  --placeholder: #B0B5D0;

  --shadow:   0 8px 40px rgba(108, 99, 255, 0.10);
  --radius:   20px;
}

body {
  font-family: 'Inter', system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ─── Page wrapper ───────────────────────────────────────── */
.auth-page {
  position: relative;
  width: 100%;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
}

/* ─── Blobs décoratifs (subtils, couleurs claires) ───────── */
.auth-bg {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.auth-bg__blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  animation: blobFloat 14s ease-in-out infinite;
}
.auth-bg__blob--1 {
  width: 480px; height: 480px;
  background: rgba(108, 99, 255, 0.12);
  top: -160px; right: -120px;
  animation-delay: 0s;
}
.auth-bg__blob--2 {
  width: 360px; height: 360px;
  background: rgba(59, 130, 246, 0.10);
  bottom: -100px; left: -80px;
  animation-delay: -5s;
}
.auth-bg__blob--3 {
  width: 260px; height: 260px;
  background: rgba(168, 85, 247, 0.07);
  top: 40%; left: 50%;
  transform: translate(-50%, -50%);
  animation-delay: -10s;
}
@keyframes blobFloat {
  0%, 100% { transform: translateY(0) scale(1); }
  50%       { transform: translateY(-24px) scale(1.04); }
}

/* ─── Conteneur de la carte ──────────────────────────────── */
.auth-container {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 420px;
}

/* ─── Carte principale ───────────────────────────────────── */
.auth-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  animation: cardIn 0.3s ease both;
}
@keyframes cardIn {
  from { opacity: 0; transform: translateY(16px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0)     scale(1);    }
}

/* ─── Hero violet (zone logo) ────────────────────────────── */
.auth-card__hero {
  background: linear-gradient(135deg, #5A52E8 0%, #6C63FF 50%, #7C73FF 100%);
  padding: 32px 24px 28px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.auth-logo {
  height: 38px;
  width: auto;
  max-width: min(180px, 80%);
  display: block;
}
.auth-card__tagline {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.75);
  font-weight: 400;
}

/* ─── Corps de la carte ──────────────────────────────────── */
.auth-card__body {
  padding: 28px 28px 20px;
}

/* ─── Écran de choix ─────────────────────────────────────── */
.auth-choice__title {
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  text-align: center;
  margin-bottom: 8px;
}
.auth-choice__sub {
  font-size: 13px;
  color: var(--muted);
  text-align: center;
  line-height: 1.5;
  margin-bottom: 28px;
}
.auth-choice__actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 20px;
}

/* ─── Boutons auth ───────────────────────────────────────── */
.btn-auth {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 20px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s, transform 0.12s, box-shadow 0.15s;
  border: none;
  width: 100%;
}
.btn-auth--primary {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 4px 16px rgba(108, 99, 255, 0.30);
}
.btn-auth--primary:hover:not(:disabled) {
  background: var(--accent-hover);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(108, 99, 255, 0.40);
}
.btn-auth--outline {
  background: transparent;
  color: var(--accent);
  border: 1.5px solid var(--accent-border);
}
.btn-auth--outline:hover:not(:disabled) {
  background: var(--accent-light);
  transform: translateY(-1px);
}
.btn-auth:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none !important;
}
.btn-auth--full { width: 100%; margin-top: 4px; }

/* ─── Mention trial ──────────────────────────────────────── */
.auth-trial-mention {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 12px;
  color: var(--subtle);
  background: var(--accent-light);
  border: 1px solid var(--accent-border);
  border-radius: 8px;
  padding: 8px 12px;
  line-height: 1.4;
}
.auth-trial-mention i { color: var(--accent); }
.auth-trial-mention strong { color: var(--accent); }

/* ─── Bouton retour ──────────────────────────────────────── */
.auth-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  font-size: 12px;
  font-weight: 500;
  color: var(--subtle);
  cursor: pointer;
  padding: 0;
  margin-bottom: 16px;
  font-family: inherit;
  transition: color 0.15s;
}
.auth-back:hover { color: var(--accent); }

/* ─── Titre du formulaire ────────────────────────────────── */
.auth-form__title {
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 4px;
}
.auth-form__sub {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 20px;
}

/* ─── Alerte erreur/succès ───────────────────────────────── */
.auth-alert {
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 13px;
  margin-bottom: 16px;
  line-height: 1.4;
  background: rgba(225, 29, 72, 0.07);
  border: 1px solid rgba(225, 29, 72, 0.20);
  color: #C0203E;
}
.auth-alert--success {
  background: rgba(22, 163, 74, 0.07);
  border-color: rgba(22, 163, 74, 0.20);
  color: #15803D;
}

/* ─── Formulaire ─────────────────────────────────────────── */
.auth-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.auth-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.auth-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0.01em;
}
.auth-label__hint {
  font-weight: 400;
  color: var(--subtle);
  font-size: 11px;
}
.auth-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.auth-input-icon {
  position: absolute;
  left: 12px;
  color: var(--placeholder);
  font-size: 14px;
  pointer-events: none;
  transition: color 0.15s;
}
.auth-input {
  width: 100%;
  padding: 11px 40px 11px 38px;
  background: #F7F8FE;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  font-size: 14px;
  font-family: inherit;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
  outline: none;
}
.auth-input::placeholder { color: var(--placeholder); }
.auth-input:focus {
  border-color: var(--accent);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(108, 99, 255, 0.10);
}
.auth-input:focus + .auth-input-icon,
.auth-input-wrap:focus-within .auth-input-icon {
  color: var(--accent);
}
.auth-eye {
  position: absolute;
  right: 10px;
  background: none;
  border: none;
  color: var(--placeholder);
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  font-size: 14px;
  transition: color 0.15s;
}
.auth-eye:hover { color: var(--accent); }

/* ─── Lien switch vue ────────────────────────────────────── */
.auth-switch {
  font-size: 13px;
  color: var(--muted);
  text-align: center;
  margin-top: 16px;
}
.auth-switch__link {
  background: none;
  border: none;
  color: var(--accent);
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  padding: 0;
  transition: opacity 0.15s;
}
.auth-switch__link:hover { opacity: 0.75; }

/* ─── Pied de carte ──────────────────────────────────────── */
.auth-foot {
  text-align: center;
  font-size: 10px;
  color: #C0C4D8;
  padding: 12px 0 16px;
  letter-spacing: 0.05em;
}

/* ─── Responsive ─────────────────────────────────────────── */
@media (max-width: 480px) {
  .auth-card__hero     { padding: 24px 20px 22px; }
  .auth-card__body     { padding: 22px 20px 16px; }
  .auth-choice__title  { font-size: 20px; }
}