/* Ecran de connexion de Triage.
 *
 * L'identite reste Authentik DERRIERE ; ici on ne montre que le visuel de Triage. La page est
 * AUTONOME : elle redeclare ses jetons et ses polices plutot que de charger la feuille de
 * l'application, parce qu'un ecran de connexion doit etre court a servir et ne rien emprunter
 * a une zone protegee. Meme atelier que la page principale : fond presque noir CHAUD, l'ambre
 * pour ce qui appelle une action. Aucun CDN.
 */
@font-face {
  font-family: "Space Grotesk"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/fonts/space-grotesk-400.woff2") format("woff2");
}
@font-face {
  font-family: "Space Grotesk"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("/fonts/space-grotesk-500.woff2") format("woff2");
}
@font-face {
  font-family: "Space Grotesk"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("/fonts/space-grotesk-700.woff2") format("woff2");
}

:root {
  --nuit: #14110e; --atelier: #1c1815; --haut: #241f1a; --ligne: #322b24;
  --encre: #f2ede6; --sourd: #a2968a; --lampe: #f2b441; --rouge: #e06a5e;
  --sans: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  --r: 12px; --rg: 18px;
}
* { box-sizing: border-box; }
html { color-scheme: dark; }
body {
  margin: 0; background: var(--nuit); color: var(--encre);
  font: 15px/1.6 var(--sans); -webkit-font-smoothing: antialiased;
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* Une seule lampe allumee dans l'atelier : le regard va au seul endroit ou il y a a faire. */
.seuil {
  min-height: 100vh; min-height: 100dvh;
  display: grid; place-items: center; padding: 24px 16px;
  background: radial-gradient(70% 50% at 50% 0%, rgba(242, 180, 65, .07), transparent 70%);
}
.carte {
  width: 100%; max-width: 380px;
  background: var(--atelier); border: 1px solid var(--ligne); border-radius: var(--rg);
  padding: 28px 24px;
}
.marque { margin: 0 0 18px; font: 700 13px var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--sourd); }
h1 { margin: 0 0 6px; font: 700 26px/1.2 var(--sans); }
.sous { color: var(--sourd); font-size: 13px; margin: 0; }

.alerte {
  margin: 16px 0 0; padding: 11px 13px; border-radius: var(--r);
  border: 1px solid var(--rouge); background: rgba(224, 106, 94, .1);
  color: var(--encre); font-size: 14px;
}

form { margin-top: 20px; }
.champ { margin-bottom: 14px; }
/* Une etiquette VISIBLE, pas un texte d'invite : l'invite disparait des qu'on tape. */
label { display: block; margin-bottom: 6px; font: 500 13px var(--sans); color: var(--sourd); }
input {
  width: 100%; font: 15px var(--sans); color: var(--encre); background: var(--nuit);
  border: 1px solid var(--ligne); border-radius: var(--r);
  padding: 12px 13px; min-height: 48px;
}
input:focus-visible, button:focus-visible, a:focus-visible {
  outline: 2px solid var(--lampe); outline-offset: 2px;
}
input[aria-invalid="true"] { border-color: var(--rouge); }
/* L'erreur se lit SOUS le champ concerne, pas en haut de page. */
.erreur-champ { margin: 6px 0 0; color: var(--rouge); font-size: 13px; }

button.principal {
  width: 100%; font: 700 15px var(--sans); color: #1a1408; background: var(--lampe);
  border: 1px solid var(--lampe); border-radius: var(--r);
  padding: 12px 16px; min-height: 48px; cursor: pointer;
  transition: background .18s ease;
}
button.principal:hover { background: #ffc85c; }
button.principal[disabled] { opacity: .5; cursor: default; }

#attente { margin-top: 18px; }