/* ==========================================================================
   BASE — reset et structure de document
   ========================================================================== */

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

html, body {
  margin: 0;
  padding: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-text);
  font-weight: var(--fw-light);
  font-size: var(--fs-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ⚠️ PAS d'`overflow-x: hidden` sur body : il crée un conteneur de
   défilement et casse tout `position: sticky` descendant — notamment la
   galerie épinglée de la fiche projet (CADRAGE §4.3).
   `clip` contraint sans créer ce conteneur.                               */
body { overflow-x: clip; }

/* Barres de défilement masquées partout — le scroll reste fonctionnel,
   seul l'indicateur disparaît. Le site pilote son propre rythme.          */
html {
  scrollbar-width: none;        /* Firefox */
  -ms-overflow-style: none;     /* Edge ancien */
}
html::-webkit-scrollbar,
body::-webkit-scrollbar,
*::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;                /* Chrome, Safari */
}

h1, h2, h3, h4, p, figure, blockquote {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
}

ul, ol { margin: 0; padding: 0; list-style: none; }

a {
  color: inherit;
  text-decoration: none;
}

img, video {
  display: block;
  max-width: 100%;
  height: auto;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

/* Navigation clavier — non négociable (CADRAGE §7.2).
   Pas d'outline au clic souris, outline franc au clavier.                  */
:focus { outline: none; }

/* ⚠️ EN `--ink`, PAS EN `--accent`. Le contour a longtemps porté l'accent —
   juste tant qu'il était rouge (5,5:1 sur blanc). Depuis le passage au vert
   lemon il tomberait à **1,23:1**, sous le minimum de 3:1 exigé pour un
   élément non textuel : le focus deviendrait invisible.

   L'accent est un APLAT (tokens.css), et un contour n'en est pas un.     */
:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

/* Accessible mais hors écran — pour les libellés de lecteur d'écran.       */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}