@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;
}

/* LE SECOND FACTEUR — UN SEUL GESTE DOIT DOMINER (18/09/2026).
   L'écran empilait trois boutons sombres de même poids : Face ID, le
   courriel et la saisie du code se disputaient l'œil, alors que deux
   d'entre eux sont des recours. Jérémy, en le voyant : « pas très belle
   la présentation ». Il manquait aussi le lockup que porte la page de
   connexion — l'artisan passait d'un écran signé à un écran nu.

   Rien de nouveau n'est inventé ici : le bouton clair existait déjà
   pour la démonstration, il est simplement nommé pour servir ailleurs. */
.login-recours {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid #e2e9e6;
}
.login-recours > summary {
  list-style: none;
  cursor: pointer;
  text-align: center;
  font-size: .9rem;
  font-weight: 650;
  color: #236b5e;
}
.login-recours > summary::-webkit-details-marker { display: none; }
.login-recours > summary::after { content: " ▾"; }
.login-recours[open] > summary::after { content: " ▴"; }
.login-recours form { margin-top: 20px; }

/* LE BOUTON PRINCIPAL DU SECOND FACTEUR. Il ne vit pas dans un
   formulaire — contrairement à celui de la connexion — donc il ne
   recevait ni la largeur de la grille, ni son espacement : il se
   dimensionnait à son texte, collé au paragraphe du dessus et calé à
   gauche. Jérémy l'a vu tout de suite. */
.login-principal {
  width: 100%;
  margin-top: 22px;
}

/* Le bouton clair : une action possible, pas l'action attendue. */
.login-secondaire {
  width: 100%;
  background: #fff;
  color: #1E4750;
  border: 1.5px solid #1E4750;
}