/* ==========================================================================
   BASE — police, remise à zéro du navigateur, styles par défaut des éléments.
   ========================================================================== */

@font-face {
  font-family: "Determination";
  src: url("/fonts/determination.woff2") format("woff2");
  font-display: swap;
}

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  body, h1, h2, h3, p, figure { margin: 0; }
  h1, h2, h3 { font: inherit; }
  button {
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
  }
  svg { display: block; }
  [hidden] { display: none !important; }
}

@layer base {
  html {
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-pixel);
    font-size: var(--text-1);
    line-height: var(--leading);
    /* pixel art : pas de lissage des polices ni des images */
    -webkit-font-smoothing: none;
    -moz-osx-font-smoothing: grayscale;
    font-smooth: never;
    image-rendering: pixelated;
  }

  /* Pas de fond sur body : celui de html couvre toute la page, et un fond ici passerait devant le ciel étoilé. */
  body {
    min-block-size: 100svh;
    -webkit-tap-highlight-color: transparent;
  }

  ::selection { background: var(--color-action-hot); color: var(--color-bg); }

  :focus-visible {
    outline: var(--px) solid var(--color-action-hot);
    outline-offset: var(--px);
  }

  /* Tout ce qui est dessiné en pixels : bords nets, même agrandi */
  .pixel { shape-rendering: crispEdges; }

  .sr-only {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}