/* Écran de connexion de l'app restylé comme chat.wesma.app (src/AuthScreen.tsx).
   Les styles de l'app sont en ligne dans index.html → !important nécessaire. Ids et logique inchangés. */
@font-face {
  font-family: 'Nebbiolo';
  src: url('fonts/Nebbiolo-ExtraBold.ttf') format('truetype');
  font-weight: 800;
  font-display: swap;
}

#auth-screen {
  background: #000 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  flex-direction: column !important;
  gap: 24px;
  font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  overflow-y: auto;
  padding: 24px 16px;
}
#auth-screen > div:first-child {
  width: 100% !important;
  max-width: 380px !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}
#auth-screen h1 {
  font-family: 'Nebbiolo', ui-sans-serif, sans-serif !important;
  font-weight: 800 !important;
  font-size: 34px !important;
  letter-spacing: .01em !important;
  margin: 0 0 28px !important;
}
#auth-screen > div:first-child > div:first-child { margin-bottom: 18px !important; }
#auth-screen .web-auth-title { margin: 0 0 8px; text-align: center; font-size: 30px; font-weight: 500; color: #ececec; }
#auth-screen > div:first-child > div:first-child p { color: #afafaf !important; font-size: 15px !important; line-height: 1.5; }

#auth-screen label { display: none !important; }
#auth-screen input {
  padding: 14px 18px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255, 255, 255, .1) !important;
  background: #000 !important;
  color: #ececec !important;
  font-size: 16px !important;
}
#auth-screen input:focus { border-color: #5aa7c2 !important; }
#auth-screen input::placeholder { color: #8f8f8f; }
#login-form > div, #forgot-form > div, #signup-form > div { margin-bottom: 12px !important; }
#signup-form > div:first-of-type { gap: 12px !important; }

#login-btn, #signup-btn, #forgot-form > button {
  padding: 14px !important;
  border-radius: 999px !important;
  background: #ececec !important;
  color: #0d0d0d !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  margin-top: 6px;
}
#login-btn:hover, #signup-btn:hover, #forgot-form > button:hover { background: #fff !important; }

/* Liens « Mot de passe oublié ? », « Créer un compte », « Se connecter » */
#auth-screen button[data-on*="click:h5"],
#auth-screen button[data-on*="click:h6"],
#auth-screen button[data-on*="click:h10"] {
  color: #8cc8dc !important;
  text-decoration: none !important;
  font-size: 15px !important;
  font-weight: 400 !important;
}
#auth-screen span { color: #afafaf !important; font-size: 15px !important; }
#signup-form > p:first-child { display: none !important; }
#forgot-form > p { color: #afafaf !important; text-align: center; font-size: 15px !important; }

#auth-error, #auth-success {
  background: none !important;
  border: 0 !important;
  padding: 0 !important;
  text-align: center;
  font-size: 14px !important;
}
#auth-error { color: #f87171 !important; }
#auth-success { color: #8cc8dc !important; }

.web-auth-foot { color: #8f8f8f; font-size: 13px; }
.web-auth-foot a { color: inherit; text-decoration: none; }
.web-auth-foot a:hover { color: #ececec; }