/* ==========================================================================
   Layout — container, grille 12 colonnes invisible, rythme des sections.
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--container-width);
  margin-inline: auto;
  padding-inline: var(--page-padding);
}
.container--wide  { max-width: var(--container-wide); }
.container--prose { max-width: calc(var(--measure-prose) + 2 * var(--page-padding)); }
.container--flush { padding-inline: 0; }

/* --- Grille --------------------------------------------------------------- */
.grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)); /* mobile : 4 colonnes */
  column-gap: var(--gutter);
  row-gap: var(--spacing-lg);
}
@media (min-width: 48rem) { .grid { grid-template-columns: repeat(8, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .grid { grid-template-columns: repeat(12, minmax(0, 1fr)); } }

/* Mobile : tout occupe la largeur. */
[class*="span-"] { grid-column: 1 / -1; }

@media (min-width: 48rem) {
  .span-2  { grid-column: span 4; }
  .span-3  { grid-column: span 4; }
  .span-4  { grid-column: span 4; }
  .span-5  { grid-column: span 4; }
  .span-6  { grid-column: span 4; }
  .span-7  { grid-column: span 8; }
  .span-8  { grid-column: span 8; }
  .span-9  { grid-column: span 8; }
  .span-10 { grid-column: span 8; }
  .span-12 { grid-column: span 8; }
}
@media (min-width: 64rem) {
  .span-2  { grid-column: span 2; }
  .span-3  { grid-column: span 3; }
  .span-4  { grid-column: span 4; }
  .span-5  { grid-column: span 5; }
  .span-6  { grid-column: span 6; }
  .span-7  { grid-column: span 7; }
  .span-8  { grid-column: span 8; }
  .span-9  { grid-column: span 9; }
  .span-10 { grid-column: span 10; }
  .span-12 { grid-column: span 12; }

  .start-2  { grid-column-start: 2; }
  .start-3  { grid-column-start: 3; }
  .start-4  { grid-column-start: 4; }
  .start-5  { grid-column-start: 5; }
  .start-6  { grid-column-start: 6; }
  .start-7  { grid-column-start: 7; }
  .start-9  { grid-column-start: 9; }
}

/* --- Rythme vertical ------------------------------------------------------ */
.section { padding-block: var(--space-section-md); }
.section--sm { padding-block: var(--space-section-sm); }
.section--md { padding-block: var(--space-section-md); }
.section--lg { padding-block: var(--space-section-lg); }
.section--xl { padding-block: var(--space-section-xl); }
.section--flush-top    { padding-top: 0; }
.section--flush-bottom { padding-bottom: 0; }

.section--alt  { background: var(--color-background-alt); }
.section--dark { background: var(--color-black); }

/* Dégradés : l'aplat sombre est peint dessous, donc un token laissé à `none`
   donne simplement une section sombre. Jamais de section transparente. */
.section--gradient-a,
.section--gradient-b,
.section--gradient-c { background-color: var(--color-black); }
.section--gradient-a { background-image: var(--gradient-a); }
.section--gradient-b { background-image: var(--gradient-b); }
.section--gradient-c { background-image: var(--gradient-c); }

.stack > * + * { margin-top: var(--spacing-md); }
.stack-lg > * + * { margin-top: var(--spacing-lg); }
.stack-xl > * + * { margin-top: var(--spacing-xl); }

/* Le site pousse le footer en bas même sur une page courte. */
.site { display: flex; flex-direction: column; min-height: 100vh; }
.site-main { flex: 1 0 auto; }

/* Bleed : l'image dépasse volontairement la grille (Addendum §6). */
.is-bleed {
  width: 100vw;
  max-width: 100vw;
  margin-left: 50%;
  transform: translateX(-50%);
}