/* ============================================================
   MÜLLER-BROCKMANN GRID — source de vérité unique
   Tous les paramètres sont ici. grid-toggle.js et optical.js
   lisent ces mêmes variables. Ne pas dupliquer.
   ============================================================ */
:root {
  --cols: 12;
  --bl: 8px;       /* baseline unit */
  --lh: 24px;      /* leading = 3 × baseline */
  --gutter: 24px;
  --margin: 48px;
  --pad: 96px;     /* spread top/bottom padding (multiple de --lh) */
  --maxw: 1296px;

  --paper: #ffffff;
  --ink: #111315;
  --ink-soft: #5b6066;
  --accent: #00b4d8;

}

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

img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ---- scaffold ---- */
.spread { position: relative; width: 100%; }

.wrap {
  position: relative;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: var(--pad) var(--margin);
}

.grid {
  display: grid;
  grid-template-columns: repeat(var(--cols), 1fr);
  column-gap: var(--gutter);
  row-gap: var(--lh);
}

.band {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
  column-gap: var(--gutter);
  row-gap: var(--lh);
  align-items: start;
}
@supports not (grid-template-columns: subgrid) {
  .band { grid-template-columns: repeat(var(--cols), 1fr); }
}