/* La porte. Rien d'autre que le logo, un champ, un bouton — on n'explique pas
   un mot de passe, et tout ce qu'on ajouterait ici serait lu par n'importe qui
   sur l'internet, puisque c'est la seule page publique avant la connexion. */

* { box-sizing: border-box; }
body {
  margin: 0; min-height: 100vh;
  background: var(--f3dp-gris); color: var(--f3dp-blanc);
  font-family: var(--font-body); font-size: 15px; line-height: 1.5;
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
.porte { width: 100%; max-width: 380px; text-align: center; }
.marque { height: 34px; width: auto; margin-bottom: 22px; }
h1 { font-family: var(--font-title); font-size: 20px; font-weight: 600; margin: 0 0 4px; }
.sous { font-size: 13px; color: var(--f3dp-dim); margin: 0 0 30px; }

form { display: flex; flex-direction: column; gap: 10px; text-align: left; }
label {
  font-family: var(--font-title); font-size: 10.5px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--f3dp-dim);
}
input {
  padding: 13px 14px; font-size: 16px;   /* 16 px : en dessous, iOS zoome au focus */
  background: var(--f3dp-panel); color: var(--f3dp-blanc);
  border: 1px solid var(--f3dp-line); border-radius: 8px;
  font-family: var(--font-body);
}
input:focus { outline: 2px solid var(--f3dp-turquoise); outline-offset: 1px; }
button {
  margin-top: 4px; padding: 13px 16px; cursor: pointer;
  font-family: var(--font-title); font-size: 15px; font-weight: 600;
  background: var(--f3dp-turquoise); color: #10201b;
  border: 1px solid var(--f3dp-turquoise); border-radius: 8px;
}
button:hover:not(:disabled) { background: var(--f3dp-turquoise-dim); }
button:disabled { opacity: .5; cursor: default; }
.erreur { margin: 6px 0 0; font-size: 13px; color: var(--f3dp-err); }
.fine { margin: 26px 0 0; font-size: 12px; color: var(--f3dp-dim); }