/* ==========================================================================
   Socle : remise à zéro, typographie, accessibilité
   ========================================================================== */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: var(--c-bg); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--c-bg);
  color: var(--c-ink);
  font-family: var(--f-ui);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg, video { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }

h1, h2 {
  font-family: var(--f-display);
  font-weight: 400;
  font-variation-settings: var(--vf-title);
  line-height: var(--lh-title);
  letter-spacing: var(--ls-title);
  text-wrap: balance;
}
h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); }
h3 { font-family: var(--f-ui); font-size: var(--t-h3); font-weight: 600; letter-spacing: 0; }

a { color: inherit; text-decoration-color: color-mix(in oklab, currentColor 38%, transparent); text-underline-offset: 3px; }
a:hover { text-decoration-color: currentColor; }

:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--c-focus);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}

::selection { background: color-mix(in oklab, var(--c-accent) 30%, transparent); color: var(--c-ink); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--c-line-strong);
  border-radius: var(--r-pill);
  border: 3px solid var(--c-bg);
}

/* --- Utilitaires ---------------------------------------------------------- */

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

.skip-link {
  position: fixed; top: var(--s-3); left: var(--s-3); z-index: 999;
  transform: translateY(-200%);
  background: var(--c-accent); color: var(--c-accent-ink);
  padding: var(--s-3) var(--s-4); border-radius: var(--r-sm);
  font-weight: 600; text-decoration: none;
  transition: transform var(--d-fast) var(--e-ui);
}
.skip-link:focus-visible { transform: none; }

.stack { display: flex; flex-direction: column; }
.row   { display: flex; align-items: center; }
.wrap  { flex-wrap: wrap; }
.grow  { flex: 1 1 auto; min-width: 0; }
.gap-1 { gap: var(--s-1); } .gap-2 { gap: var(--s-2); } .gap-3 { gap: var(--s-3); }
.gap-4 { gap: var(--s-4); } .gap-5 { gap: var(--s-5); } .gap-6 { gap: var(--s-6); }
.gap-7 { gap: var(--s-7); }

.shell      { width: var(--w-content); margin-inline: auto; }
.shell-wide { width: var(--w-wide); margin-inline: auto; }
.measure    { max-width: 40rem; }

.from-sm { display: none; }
@media (min-width: 640px) { .from-sm { display: inline; } }
.to-md { display: initial; }
@media (min-width: 1000px) { .to-md { display: none; } }

.muted  { color: var(--c-ink-soft); }
.faint  { color: var(--c-ink-faint); }
.small  { font-size: var(--t-small); }
.tiny   { font-size: var(--t-tiny); }
.serif  { font-family: var(--f-display); font-variation-settings: var(--vf-title); }
.center { text-align: center; }
.accent { color: var(--c-accent); }

.display {
  font-family: var(--f-display);
  font-variation-settings: var(--vf-display);
  font-weight: 400;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-mega);
  text-wrap: balance;
}

.eyebrow {
  font-size: var(--t-tiny);
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  font-weight: 600;
  color: var(--c-accent);
}
.eyebrow--quiet { color: var(--c-ink-faint); }

/* Prose des moments : la seule zone en serif de lecture. */
.prose {
  font-family: var(--f-read);
  font-size: var(--t-read);
  line-height: var(--lh-read);
  color: color-mix(in oklab, var(--c-ink) 92%, transparent);
  max-width: 36rem;
  hyphens: auto;
}
.prose p + p { margin-top: 1.15em; }
.prose em { font-style: italic; }

.rule { height: 1px; background: var(--c-line); border: 0; margin: 0; }

/* --- Apparition au défilement ---------------------------------------------- */
.reveal { opacity: 0; transform: translateY(22px); }
.reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity var(--d-slow) var(--e-scene), transform var(--d-slow) var(--e-scene);
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
}

/* --- Grain ------------------------------------------------------------------- */
/* Sur des aplats très sombres, les écrans 8 bits produisent des bandes. Un bruit
   très faible en `screen` les casse et donne de la matière. */
body::after {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 3;
  opacity: 0.045;
  mix-blend-mode: screen;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
[data-theme="jour"] body::after { mix-blend-mode: multiply; opacity: 0.03; }