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

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--sans);
  line-height: 1.5;
  color: var(--text);
  background: var(--bg-0);
}

a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

main { max-width: var(--content-width); margin: 0 auto; padding: var(--space-3) var(--space-2); }

.form-card {
  max-width: 26rem;
  margin: var(--space-4) auto;
  padding: var(--space-3);
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.form-card h1 { margin: 0 0 var(--space-2); font-size: 1.4rem; color: var(--text-h); }
.field { margin: var(--space-2) 0; }
.field label { display: block; font-size: .8rem; font-weight: 600; color: var(--text-dim); }
/* .field enveloppe libellé et saisie ; .field__input habille une saisie seule, hors enveloppe */
.field input, .field__input {
  --_bar: var(--accent);
  box-sizing: border-box; width: 100%; min-height: var(--field-height); padding: .7em var(--field-pad);
  font: inherit; color: var(--text-h); border: 0; border-radius: 0; outline: 0;
  background-color: color-mix(in srgb, var(--glass-tint) var(--field-shift), transparent);
  background-image: linear-gradient(var(--_bar), var(--_bar)); background-repeat: no-repeat; background-size: 0 100%;
  -webkit-backdrop-filter: blur(var(--panel-blur)); backdrop-filter: blur(var(--panel-blur));
  transition: background-color var(--transition), background-size var(--transition);
}
.field input::placeholder, .field__input::placeholder { color: var(--text-dim); }
.field input:focus, .field__input:focus {
  background-color: color-mix(in srgb, var(--glass-tint) var(--field-focus-shift), transparent); background-size: var(--field-bar) 100%;
}
.field input[aria-invalid="true"], .field__input[aria-invalid="true"] { --_bar: var(--warning); background-size: var(--field-bar) 100%; }
.hint { font-size: .85rem; color: var(--text-dim); }
.hint a { color: var(--accent); }
.error { margin: 0 0 var(--space-2); font-size: .9rem; color: var(--warning); }