/* Reset and elements: no class needed for plain text, links, forms. */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* What the keyboard focuses is scrolled clear of the sticky header (top) and of the save bar of
     the Paramètres screen (bottom), never left behind them (WCAG 2.2, 2.4.11 Focus Not Obscured) */
  scroll-padding-top: calc(var(--header) + var(--space-4));
  scroll-padding-bottom: 150px;
}

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

h1,
h2,
h3,
p,
ul,
ol,
dl,
dd,
figure {
  margin: 0;
}

h1 {
  font-size: var(--text-xl);
  line-height: 1.25;
}

h2 {
  font-size: var(--text-lg);
  line-height: 1.3;
}

h3 {
  font-size: var(--text-md);
  line-height: 1.3;
}

ul[role="list"],
ol[role="list"] {
  list-style: none;
  padding: 0;
}

a {
  color: var(--accent-text);
  text-underline-offset: 2px;
}

a:hover {
  text-decoration-thickness: 2px;
}

code,
pre {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
}

button:disabled,
input:disabled {
  cursor: not-allowed;
}

svg {
  flex: none;
}

/* Keyboard focus is always visible; a mouse click does not draw a ring */
:focus {
  outline: none;
}

:focus-visible {
  outline: 2px solid var(--accent-text);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

[hidden] {
  display: none !important;
}

/* Counters and durations must not jitter as digits change */
.tabular,
.counter-value,
time,
input[type="number"] {
  font-variant-numeric: tabular-nums;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: var(--space-3);
  top: -100px;
  z-index: 100;
  padding: var(--space-2) var(--space-4);
  background: var(--accent-strong);
  color: var(--text-on-accent);
  border-radius: var(--radius-sm);
}

.skip-link:focus {
  top: var(--space-3);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}