/* docs/DESIGN.md #12 — conteneur, grille de 12 colonnes, rythme, sections.
   Grille et rythme complets construits à l'étape 2 (styleguide),
   docs/DESIGN.md #5.1. */
@layer layout {
  .page-container {
    max-width: var(--page-max);
    margin-inline: auto;
    padding-inline: var(--gutter);
  }

  /* docs/DESIGN.md #5.1 — grille de 12 colonnes à partir de 900 px (56.25rem). */
  .grid-12 {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: var(--space-5);
  }

  @media (width < 56.25rem) {
    .grid-12 {
      grid-template-columns: 1fr;
    }

    .grid-12 > [class*="col-"] {
      grid-column: 1 / -1;
    }
  }

  .col-5 { grid-column: span 5; }
  .col-7 { grid-column: span 7; }
  .col-8 { grid-column: span 8; }
  .col-12 { grid-column: span 12; }

  .section {
    padding-block: var(--space-8);
  }

  .section--wide {
    padding-block: var(--space-9);
  }

  .section--cream-deep {
    background: var(--cream-deep);
  }

  .section--forest {
    background: var(--forest);
    color: var(--cream);
    --focus: var(--ochre);
  }

  .section--forest-deep {
    background: var(--forest-deep);
    color: var(--cream);
    --focus: var(--ochre);
  }
}