@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  :where(body, h1, h2, h3, h4, p, ul, ol, figure, dl, dd, blockquote) { margin: 0; }
  :where(ul[role="list"], ol[role="list"]) { list-style: none; padding: 0; }
  :where(img, svg, video) { display: block; max-inline-size: 100%; block-size: auto; }
  :where(input, button, select, textarea) { font: inherit; color: inherit; }
  :where(button) { cursor: pointer; }
  html { -webkit-text-size-adjust: none; text-size-adjust: none; scroll-behavior: smooth; }
  @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
}

@layer base {
  html { scroll-padding-block: 5rem var(--hauteur-barre); }
  @media (width >= 48rem) { html { scroll-padding-block-end: 0; } }
  body {
    min-block-size: 100vh;
    padding-block-end: var(--hauteur-barre);
    background: var(--fond);
    color: var(--texte);
    font-family: var(--police-ui);
    font-size: var(--t-texte);
    line-height: var(--il-texte);
  }
  @media (width >= 48rem) { body { padding-block-end: 0; } }
  :where(h1, h2, h3, h4) {
    font-family: var(--police-titre);
    font-weight: var(--g-titre);
    color: var(--titre);
    line-height: 1.05;
    letter-spacing: var(--ie-titre);
    text-wrap: balance;
  }
  :where(h1) { font-size: clamp(2.25rem, 1.4rem + 3.6vw, 4rem); line-height: 1; }
  :where(h2) { font-size: clamp(1.875rem, 1.4rem + 2vw, 3rem); }
  :where(h3) { font-size: 1.375rem; letter-spacing: -0.015em; }
  :where(p, li, dd) { max-inline-size: 62ch; text-wrap: pretty; }
  :where(a) { color: var(--action); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
  :where(a:hover) { text-decoration-thickness: 2px; }
  :where(strong) { color: var(--titre); }
  :where(:focus-visible) { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
}

@layer utilitaires {
  /* La remise à zéro des svg ne doit pas réafficher le sprite caché */
  [hidden]:not([hidden="until-found"]) { display: none !important; }
  .visuellement-cache {
    position: absolute !important; inline-size: 1px; block-size: 1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
  }
}

@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }

@layer base {
  ::selection { background: color-mix(in oklch, var(--marron) 24%, var(--blanc-lilas)); color: var(--titre); }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.22s; }
}