/* Page de connexion de auth.jeanfriot.fr — identité NEUTRE, provisoire.
 *
 * Les deux couleurs de base viennent de jeanfriot.fr (`src/styles/global.css` : fond
 * #f7f5ee, texte #2f2f2f) ; le reste en est dérivé. La police est celle du système : la
 * Comfortaa du site vient de Google Fonts, et une page qui reçoit des mots de passe ne charge
 * rien de tiers. Passage à la vraie charte : todo.md.
 */

:root {
  --fond: #f7f5ee;
  --texte: #2f2f2f;
  --texte-doux: #6b6860;
  --carte: #fffdf8;
  --bord: #dcd8cc;
  --accent: #2f2f2f;
  --sur-accent: #f7f5ee;
  --erreur: #9b2a1f;
  --erreur-fond: #fbebe7;
  --focus: #2f5fcf;
  --rayon: 10px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fond: #1c1b19;
    --texte: #ecebe6;
    --texte-doux: #a6a39b;
    --carte: #252421;
    --bord: #3a3934;
    --accent: #ecebe6;
    --sur-accent: #1c1b19;
    --erreur: #f2a094;
    --erreur-fond: #3a201c;
    --focus: #8fb0f5;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 16px;
  background: var(--fond);
  color: var(--texte);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.5;
}

.carte {
  width: 100%;
  max-width: 24rem;
  padding: 2rem 1.5rem;
  background: var(--carte);
  border: 1px solid var(--bord);
  border-radius: var(--rayon);
}

.marque {
  margin: 0 0 1.5rem;
  color: var(--texte-doux);
  font-size: 0.875rem;
  letter-spacing: 0.04em;
}

h1 {
  margin: 0 0 1.5rem;
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.25;
}

p {
  margin: 0 0 1rem;
}

form {
  display: grid;
  gap: 0.5rem;
}

label {
  font-weight: 500;
}

/* 1rem minimum : en dessous, iOS zoome sur le champ au focus. */
input[type="text"],
input[type="password"] {
  width: 100%;
  min-height: 3rem;
  margin-bottom: 0.75rem;
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--bord);
  border-radius: calc(var(--rayon) - 2px);
  background: var(--fond);
  color: var(--texte);
  font: inherit;
  font-size: 1rem;
}

.champ-secret {
  position: relative;
}

.champ-secret input {
  padding-right: 6rem;
}

.bouton-discret {
  position: absolute;
  top: 0;
  right: 0;
  height: 3rem;
  padding: 0 0.875rem;
  border: 0;
  background: none;
  color: var(--texte-doux);
  font: inherit;
  font-size: 0.875rem;
  cursor: pointer;
}

.case {
  display: flex;
  gap: 0.625rem;
  align-items: center;
  min-height: 2.75rem;
  margin-bottom: 0.5rem;
  font-weight: 400;
  cursor: pointer;
}

.case input {
  width: 1.25rem;
  height: 1.25rem;
  margin: 0;
  accent-color: var(--accent);
}

.bouton {
  width: 100%;
  min-height: 3rem;
  padding: 0 1rem;
  border: 0;
  border-radius: calc(var(--rayon) - 2px);
  background: var(--accent);
  color: var(--sur-accent);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.bouton:disabled {
  opacity: 0.55;
  cursor: default;
}

.erreur {
  margin: 0 0 0.5rem;
  padding: 0.625rem 0.75rem;
  border-radius: calc(var(--rayon) - 2px);
  background: var(--erreur-fond);
  color: var(--erreur);
}

.secondaire {
  margin: 1.25rem 0 0;
  color: var(--texte-doux);
  font-size: 0.9375rem;
}

#vue-connecte .secondaire {
  margin: 0 0 1rem;
}

a {
  color: inherit;
  text-underline-offset: 0.2em;
}

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}