/* ===== Login Archer : format IMMERSIF (photo plein ecran + carte flottante).
   Page WEB (pas le Desk) -> web_include_css.

   Le login Frappe a 5 <section> soeurs dans un meme <div> : .for-login,
   .for-email-login, .for-signup, .for-forgot, .for-login-with-email-link.
   login.route() n en affiche qu UNE a la fois via jQuery .toggle(), qui pose
   un display:none INLINE sur les autres. login.js pose la classe
   .archer-login-wrap sur ce <div> parent. On stylise donc le wrapper (photo +
   centrage) et CHAQUE section comme la carte flottante.

   PIEGE : ne JAMAIS mettre display:...!important sur une section, sinon le
   display:none inline de Frappe est ecrase et deux ecrans se superposent
   (le champ "Adresse electronique" de #forgot flottait en bas de l ecran). ===== */

.archer-login-wrap {
  /* position:fixed inset:0 -> plein ecran, HORS FLUX : le login couvre toute la
     fenetre quelles que soient les barres/marges du web.html (le template Frappe
     recent ajoute ~60px au-dessus -> min-height:100vh en flux debordait de 60px
     et creait un scroll). overflow-y:auto = defilement interne seulement si la
     carte depasse (petits ecrans). */
  position: fixed;
  inset: 0;
  z-index: 1;
  overflow-y: auto;
  width: 100%;
  max-width: none !important;
  margin: 0 !important;
  padding: clamp(20px, 4vw, 48px) !important;
  display: grid;
  place-items: center;
  background: #0d3a5c;
}

/* --- Photo plein ecran + voile (contraste tagline + carte) --- */
.archer-login-wrap::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(180deg, rgba(9, 38, 62, 0.58) 0%, rgba(9, 38, 62, 0.32) 45%, rgba(9, 38, 62, 0.62) 100%),
    url("/assets/archer/images/login-hero.jpg") center center / cover no-repeat;
}

/* --- Tagline en haut a gauche, sur la photo --- */
.archer-hero-text {
  position: fixed;
  top: clamp(22px, 4vw, 48px);
  left: clamp(22px, 4vw, 52px);
  z-index: 1;
  color: #fff;
  max-width: 480px;
  text-shadow: 0 1px 18px rgba(0, 10, 25, 0.55);
}
.archer-hero-text h2 {
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.01em;
  margin: 0 0 8px;
  color: #ffffff;
}
.archer-hero-text p {
  font-size: 0.95rem;
  line-height: 1.55;
  opacity: 0.9;
  margin: 0;
  max-width: 40ch;
}

/* --- Chaque section = la carte flottante (une seule visible a la fois).
   Aucune regle display ici : le display:none inline de Frappe cache les autres. --- */
.archer-login-wrap > section {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 400px;
  background: rgba(255, 255, 255, 0.80);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 16px;
  box-shadow: 0 26px 72px -22px rgba(0, 18, 38, 0.6);
  padding: clamp(28px, 3.5vw, 42px);
}
.archer-login-wrap > section .page-card-head { text-align: center; margin-bottom: 16px !important; }
.archer-login-wrap > section .page-card-head .app-logo { max-height: 75px; width: auto; }
.archer-login-wrap > section .page-card-head h4 { margin-top: 12px; font-weight: 600; }
.archer-login-wrap > section .login-content.page-card {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  max-width: none !important;
  width: 100% !important;
}
/* Liens bas de carte (Mot de passe oublie deja dans le form ; "Retour", "S inscrire") */
.archer-login-wrap .sign-up-message { text-align: center; margin-top: 14px; }

/* --- Bouton d action principal (Connexion / Réinitialiser / lien email) en bleu
   Archer. On cible .btn-login / .btn-signup / .btn-forgot EN PLUS de .btn-primary :
   sur le template Frappe recent (staging), le bouton de connexion est .btn-default
   (rendu noir) et non .btn-primary. Les liens secondaires (.btn-login-option :
   "Connexion par lien email", "Connexion par mot de passe") n ont AUCUNE de ces
   classes -> restent neutres. --- */
.archer-login-wrap .btn-primary,
.archer-login-wrap .btn-login,
.archer-login-wrap .btn-signup,
.archer-login-wrap .btn-forgot {
  background-color: #1e6fa8 !important;
  border-color: #1e6fa8 !important;
  color: #ffffff !important;
}
.archer-login-wrap .btn-primary:hover,
.archer-login-wrap .btn-login:hover,
.archer-login-wrap .btn-signup:hover,
.archer-login-wrap .btn-forgot:hover {
  background-color: #175a87 !important;
  border-color: #175a87 !important;
}

/* --- Responsive : la tagline repasse au-dessus de la carte sur mobile --- */
@media (max-width: 640px) {
  .archer-hero-text {
    position: static;
    margin: 0 auto 16px;
    text-align: center;
    max-width: none;
  }
  .archer-login-wrap { padding-top: 40px !important; }
}