/* Pages d'entrée : connexion, mot de passe oublié, réinitialisation.
   2026-09-01 — extrait de login.html, qui portait ces règles en ligne. Trois
   pages qui se ressemblent doivent partager leur feuille, sinon la troisième
   dérive sans que personne ne le voie. */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* LA CHARTE, ET LES DEUX MODES.
 *
 * 2026-09-07 — ces valeurs etaient deja celles de la palette SOMBRE du front
 * neuf (`frontend/src/app.css`), au chiffre pres. Ce qui manquait, c'est le mode
 * CLAIR : la page d'entree s'affichait en sombre sur un poste regle en clair,
 * donc le tout premier ecran du produit contredisait tous les suivants.
 *
 * Pas de bascule manuelle ici, a la difference de l'application : le theme s'y
 * choisit dans le profil, et il n'y a pas de profil avant d'etre entre. On suit
 * donc le reglage du systeme, qui est la seule preference connue a ce moment. */
:root {
  --bg:      #0b0d12;
  --surface: #12151f;
  --border:  #1e2535;
  --text:    #e2e8f0;
  --muted:   #64748b;
  --blue:    #3b82f6;
  --red:     #f87171;
  --green:   #4ade80;
  /* `--degrade-trait` du front neuf : celui qui souligne l'entree active. */
  --degrade: linear-gradient(90deg, #7dd3fc 0%, #a5b4fc 20%, #c4b5fd 40%,
                             #86efac 62%, #fcd34d 82%, #fca5a5 100%);
}

@media (prefers-color-scheme: light) {
  :root {
    --bg:      #fafafb;
    --surface: #ffffff;
    --border:  #d6dbe5;
    --text:    #181e2a;
    --muted:   #7a869a;
    --blue:    #1d64d6;
    --red:     #c82d2d;
    --green:   #169147;
  }
}
body {
  font-family: 'Segoe UI', system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 2.5rem 2rem;
  width: 100%;
  max-width: 380px;
  overflow: hidden;
}

/* LE RUBAN DE LA CHARTE, en haut de la carte. Le meme degrade que l'entree de
 * menu active du front neuf : c'est le seul signe visuel que le produit porte
 * partout, et la page d'entree est l'endroit ou il compte le plus — c'est la
 * premiere chose qu'on voit de Loc8Art. */
.card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--degrade);
}
.logo {
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: .12em;
  color: var(--text);
  margin-bottom: 2rem;
}
h1 { font-size: 1rem; font-weight: 600; margin-bottom: .6rem; }
.intro { color: var(--muted); font-size: .85rem; line-height: 1.5; }
label {
  display: block;
  font-size: .8rem;
  color: var(--muted);
  margin-bottom: .4rem;
  margin-top: 1.2rem;
}
input {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font-size: .9rem;
  padding: .6rem .85rem;
  outline: none;
  transition: border-color .15s;
}
input:focus { border-color: var(--blue); }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.hint { color: var(--muted); font-size: .75rem; margin-top: .4rem; }
.message {
  border-radius: 6px;
  font-size: .82rem;
  padding: .6rem .85rem;
  margin-top: 1.2rem;
  line-height: 1.45;
}
.error {
  background: rgba(248,113,113,.1);
  border: 1px solid rgba(248,113,113,.3);
  color: var(--red);
}
.ok {
  background: rgba(74,222,128,.1);
  border: 1px solid rgba(74,222,128,.3);
  color: var(--green);
}
button {
  width: 100%;
  margin-top: 1.8rem;
  background: var(--blue);
  border: none;
  border-radius: 6px;
  color: #fff;
  cursor: pointer;
  font-size: .9rem;
  font-weight: 600;
  padding: .7rem;
  transition: opacity .15s;
}
button:hover { opacity: .88; }
button:active { opacity: .75; }
button[disabled] { opacity: .5; cursor: default; }
.liens {
  margin-top: 1.4rem;
  text-align: center;
  font-size: .8rem;
}
.liens a { color: var(--muted); text-decoration: none; }
.liens a:hover { color: var(--blue); text-decoration: underline; }