@font-face {
  font-family: "Bricolage Grotesque";
  src: url("/assets/fonts/bricolage-grotesque-latin.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
}

:root {
  color-scheme: light;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #faf8f4;
  color: #24444d;
}

* { box-sizing: border-box; }

body {
  min-height: 100vh;
  margin: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  background: radial-gradient(circle at top, #e4ebea, #faf8f4 60%);
}

.login-lockup {
  display: block;
  margin: 0 auto 14px;
  max-width: 200px;
  height: auto;
}

.login-card {
  width: min(100%, 420px);
  padding: 34px;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 18px 55px rgb(30 71 80 / 14%);
}

.login-mark {
  display: grid;
  width: 54px;
  height: 54px;
  place-items: center;
  border-radius: 15px;
  background: #1E4750;
  color: #fff;
  font-weight: 800;
}

h1 { margin: 20px 0 8px; font-size: 1.55rem; }
p { color: #58706b; line-height: 1.5; }
form { display: grid; gap: 18px; margin-top: 26px; }
label { display: grid; gap: 7px; font-weight: 650; }
input {
  width: 100%;
  min-height: 50px;
  padding: 12px 14px;
  border: 1px solid #b9cac6;
  border-radius: 12px;
  font: inherit;
}
input:focus { outline: 3px solid #b8ddd3; border-color: #236b5e; }
button {
  min-height: 52px;
  border: 0;
  border-radius: 13px;
  background: #1E4750;
  color: #fff;
  font: inherit;
  font-weight: 750;
  cursor: pointer;
}
.login-error { color: #a52d2d; font-weight: 650; }

/* L'ÉCRAN DE CONNEXION EST LA PREMIÈRE PAGE QUE VOIT UN PARTENAIRE.
   Jérémy, 09/09/2026, la veille d'un rendez-vous Sellsy : « l'écran de
   connexion ne fait pas très pro, ça parle de moi, pourquoi on n'a pas
   un accès classique comme toutes les applications ». Il avait raison
   sur les deux points. Le texte disait « Contactez Jérémy par le SMS qui
   vous a ouvert l'accès » — vrai, mais c'est la phrase d'un service
   rendu entre collègues, pas d'un logiciel. Elle devient une adresse de
   contact, comme partout ailleurs.

   La mise en page suit : les deux lignes d'aide passent derrière le
   formulaire, en petit et séparées d'un filet, au lieu d'être trois
   paragraphes du même poids que l'invitation à se connecter. */
.login-card > p:first-of-type {
  margin: 0 0 4px;
  text-align: center;
  color: #24444d;
  font-weight: 600;
}
.login-aide {
  margin: 0;
  font-size: .84rem;
  line-height: 1.45;
  color: #6b8480;
}
.login-aide:first-of-type { margin-top: 26px; padding-top: 20px; border-top: 1px solid #e2e9e6; }
.login-aide + .login-aide { margin-top: 8px; }
.login-aide a { color: #236b5e; }

.login-logo { display: block; margin: 0 auto 18px; max-width: 200px; height: auto; }

/* Instance de démonstration uniquement (APP_MODE_DEMO) : le bouton qui
   remet tout à zéro entre deux démos. */
.login-demo {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid #e2e9e6;
  display: grid;
  gap: 8px;
}
.login-demo-button {
  background: #fff;
  color: #1E4750;
  border: 1.5px solid #1E4750;
}
.login-demo-hint {
  margin: 0;
  font-size: .92rem;
  text-align: center;
}