/* =====================================================
   BASE — reset, typographie, utilitaires
   ===================================================== */

/* PIÈGE PROD #8: [hidden] forcé display:none */
[hidden] { display: none !important; }

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

/* PIÈGE PROD #5: reset figure */
figure { margin: 0; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-h-mobile);
  font-size: 16px;
}

@media (min-width: 768px) {
  html { scroll-padding-top: var(--header-h); }
}

/* PIÈGE PROD #11: overflow-x: clip (pas overscroll-behavior) */
body {
  font-family: var(--ff-body);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--text);
  background: var(--bg);
  overflow-x: clip;
  max-width: 100vw;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* TEX-4 — Grille fine */
body {
  background-image:
    linear-gradient(color-mix(in srgb, var(--text) 6%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--text) 6%, transparent) 1px, transparent 1px);
  background-size: 32px 32px;
}

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

a { color: inherit; text-decoration: none; }
button { cursor: pointer; border: 0; background: transparent; font-family: inherit; }
ul, ol { list-style: none; }

h1, h2, h3, h4 {
  font-family: var(--ff-display);
  line-height: 1.1;
  font-weight: 500;
  color: var(--text);
}

/* micro-détails propres */
::selection {
  background: color-mix(in srgb, var(--accent) 28%, var(--bg));
  color: var(--text);
}

::-webkit-scrollbar       { width: 8px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--accent-soft); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }

:focus-visible {
  outline: 2.5px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

::placeholder { color: var(--text-mute); opacity: 1; }

.container {
  width: var(--container);
  margin-inline: auto;
}

/* section padding */
section {
  padding: 48px 20px;
}
@media (min-width: 768px) {
  section { padding: 80px 40px; }
}