body, .login-bg {
  min-height: 100vh;
  background: linear-gradient(120deg, #f6faff 60%, #e9f2fa 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Segoe UI", "Roboto", Arial, sans-serif;
  color: #173157;
}

.login-bg {
  width: 100vw;
  min-height: 100vh;
}

/* Box institutionnelle */
.login-box {
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 4px 32px 0 #2464db18, 0 1.5px 10px #154bad14;
  border: 1.3px solid #d3dff2;
  max-width: 420px;
  width: 97%;
  margin: 2.8em auto;
  padding: 2.7em 2.2em 2em 2.2em;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

/* Titre */
.login-box h2 {
  color: #14346c;
  font-size: 1.54em;
  font-weight: 700;
  margin-bottom: 1.3em;
  letter-spacing: .01em;
}

/* Messages */
.login-error, .login-success, .login-box p[style*='color:red'], .login-box p[style*='color:green'] {
  display: block;
  margin-bottom: 1.2em;
  padding: 0.9em 1.1em;
  font-size: 1.06em;
  border-radius: 8px;
  border-left: 5px solid;
  background: #fff;
  box-shadow: 0 1px 10px #bbb9e812;
}
.login-error, .login-box p[style*='color:red'] {
  color: #cb2026;
  border-color: #e56c7a;
  background: #fff6f7;
}
.login-success, .login-box p[style*='color:green'] {
  color: #107d36;
  border-color: #3ec989;
  background: #effcf4;
}

/* Formulaire institutionnel */
.login-box form {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 1.1em;
}

.login-box input,
.login-box select {
  width: 100%;
  font-size: 1.12em;
  padding: 0.95em 1.1em;
  background: #f6faff;
  border: 1.6px solid #d3dff2;
  border-radius: 8px;
  margin-bottom: 0.04em;
  color: #14346c;
  box-shadow: 0 0.7px 3px #154bad0a;
  transition: border-color .18s, background .16s, box-shadow .18s;
}

.login-box input:focus,
.login-box select:focus {
  border-color: #2464db;
  background: #fff;
  box-shadow: 0 0 0 2px #2464db25, 0 3px 12px #2464db07;
  outline: none;
}

/* Pour les div contenant les inputs mdp (visibilité bouton) */
.login-box form > div {
  position: relative;
  margin-bottom: 0.4em;
}

/* Bouton institutionnel */
.login-box .btn {
  --btn-radius: 9px;
  --btn-font-size: 1.08em;
  --btn-padding-y: 0.95em;
  --btn-padding-x: 1.2em;
  --btn-shadow: 0 10px 22px rgba(36, 100, 219, 0.22);
  --btn-shadow-hover: 0 16px 32px rgba(20, 52, 108, 0.28);
  --btn-width-mobile: 100%;
  width: 100%;
  margin-top: 1.1em;
}

/* Pour le select "ville" (custom arrow SVG) */
.login-box select {
  background-image: url("data:image/svg+xml,%3Csvg width='14' height='8' viewBox='0 0 14 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L7 7L13 1' stroke='%2314346c' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1em center;
  background-size: 1.15em;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 2.2em;
}

/* Lien retour / création de compte */
.login-box p, .login-box > p, .login-box .login-retour {
  margin-top: 2em;
  text-align: center;
  font-size: 1.04em;
  color: #154bad;
  width: 100%;
}
.login-box p a, .login-box .login-retour a {
  color: #2464db;
  font-weight: 600;
  text-decoration: underline;
  transition: color .16s;
}
.login-box p a:hover, .login-box .login-retour a:hover {
  color: #14346c;
  text-decoration-thickness: 2px;
}

/* Responsive mobile */
@media (max-width: 600px) {
  .login-box {
    padding: 1.15em .7em 1.1em .7em;
    max-width: 99vw;
  }
  .login-box h2 {
    font-size: 1.14em;
  }
}
/* Corrige les champs qui débordent du cadre */
.login-box,
.login-box * {
  box-sizing: border-box;
}

/* Empêche le débordement sur tous les champs et boutons du form */
.login-box input,
.login-box select,
.login-box button,
.login-box form > * {
  max-width: 100%;
}

/* Si tu veux plus d’air autour des champs dans la box */
.login-box {
  padding-left: 2.2em;
  padding-right: 2.2em;
}

@media (max-width: 600px) {
  .login-box {
    padding-left: 0.7em;
    padding-right: 0.7em;
  }
}