*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--slate);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
}
a { color: var(--teal-strong); }
code, pre { font-family: var(--font-mono); }
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: var(--sp-5);
}
.muted { color: var(--muted); }
.btn {
  display: inline-block;
  background: var(--grad);
  color: var(--on-grad);                         /* contrat d'usage : texte blanc sur grad */
  border: none;
  border-radius: var(--radius-sm);
  padding: var(--sp-2) var(--sp-4);
  font-size: var(--fs-base);
  font-family: var(--font-body);
  cursor: pointer;
  text-decoration: none;
}
.btn:focus-visible { box-shadow: var(--focus-ring); outline: none; }
.btn-secondary {
  background: var(--surface-2);
  color: var(--ink);
  border: 1px solid var(--line);
}
table { border-collapse: collapse; width: 100%; }
th, td { text-align: left; padding: var(--sp-2); border-bottom: 1px solid var(--line); }
th { color: var(--ink); font-weight: var(--fw-semibold); }
input, dl, dt, dd, h1, h2 { margin: 0 0 var(--sp-2); }
h1, h2, h3 { color: var(--ink); font-family: var(--font-display); line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); }
input {
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  padding: var(--sp-2);
  font-size: var(--fs-base);
  background: var(--surface);
  color: var(--ink);
}
input:focus-visible { box-shadow: var(--focus-ring); outline: none; }
header nav { padding: var(--sp-4); width: min(var(--max-width), calc(100% - 2 * var(--gutter))); margin: 0 auto; }
main { width: min(var(--max-width), calc(100% - 2 * var(--gutter))); margin: 0 auto; padding: 0 var(--gutter) var(--sp-7); display: grid; gap: var(--sp-4); }
footer { width: min(var(--max-width), calc(100% - 2 * var(--gutter))); margin: 0 auto; padding: 0 var(--gutter); }