/* Styles des pages du fournisseur d'identité : connexion, mot de passe oublié, nouveau mot de passe, déconnexion.
   Aucune couleur, taille ni espacement n'est écrit ici : chaque valeur est une variable du kit, définie par tokens.css,
   la feuille générée depuis design-tokens.json et servie à côté de celle-ci (docs/design/design-system.md).
   WebStyleTests refuse une valeur littérale dans cette feuille ; pour changer une valeur, changer le jeton. */

body {
  margin: var(--cj-space-0);
  padding: var(--cj-gutter);
  background: var(--cj-canvas);
  color: var(--cj-text);
  font-family: var(--cj-font-body);
  font-size: var(--cj-font-size-md);
}

.account {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--cj-form-max);
  margin: var(--cj-space-16) auto;
  padding: var(--cj-space-8);
  background: var(--cj-surface);
  border: var(--cj-line-width) solid var(--cj-line-soft);
  border-radius: var(--cj-radius-lg);
}

.account h1 {
  margin: var(--cj-space-0) var(--cj-space-0) var(--cj-space-4);
  color: var(--cj-ink);
  font-size: var(--cj-font-size-xl);
}

.account .brand {
  display: inline-block;
  margin-bottom: var(--cj-space-4);
  color: inherit;
  font-weight: 700;
  text-decoration: none;
}

.account label {
  display: block;
  margin: var(--cj-space-4) var(--cj-space-0) var(--cj-space-1);
  font-weight: 600;
}

.account input[type=email],
.account input[type=password] {
  box-sizing: border-box;
  width: 100%;
  min-height: var(--cj-touch-target-min);
  padding: var(--cj-space-3) var(--cj-space-4);
  border: var(--cj-line-width) solid var(--cj-line);
  border-radius: var(--cj-radius-md);
  background: var(--cj-surface);
  color: var(--cj-text);
  font: inherit;
}

.account input[type=email]:focus,
.account input[type=password]:focus {
  border-color: var(--cj-blue);
  outline: 0;
  box-shadow: var(--cj-shadow-focus);
}

.account button {
  width: 100%;
  min-height: var(--cj-touch-target-min);
  margin-top: var(--cj-space-6);
  padding: var(--cj-space-3) var(--cj-space-4);
  border: var(--cj-line-width) solid var(--cj-ink);
  border-radius: var(--cj-radius-md);
  background: var(--cj-ink);
  color: var(--cj-surface);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: filter var(--cj-transition);
}

.account button:hover {
  filter: brightness(.94);
}

.account button:focus-visible {
  outline: 0;
  box-shadow: var(--cj-shadow-focus);
}

/* Le refus et le message de confirmation portent les couleurs de retour d'état du kit, jamais une couleur de la palette
   choisie à la main : c'est le sens du message qui décide, pas la teinte. Le rouge d'erreur est celui qui se lit en texte,
   feedback.dangerStrong ; le rouge de la palette ne tient pas le contraste exigé d'un texte. */
.account .error,
.account .validation-message {
  color: var(--cj-feedback-danger-strong);
  font-size: var(--cj-font-size-sm);
}

.account ul.error {
  padding-left: var(--cj-space-5);
}

.account .notice {
  color: var(--cj-feedback-success);
}

.account .aside {
  margin-top: var(--cj-space-5);
  font-size: var(--cj-font-size-sm);
}

.account .aside a {
  color: inherit;
}