/* ═══════════════════════════════════════════════════════════════════
   LAYOUT.CSS — Structure générale : conteneurs, grilles, espacements
   ═══════════════════════════════════════════════════════════════════ */

/* ─── CONTENEURS ────────────────────────────────────────────────── */

.container {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 32px;
}

.container-narrow {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 32px;
}

/* ─── SECTIONS ──────────────────────────────────────────────────── */

section {
  padding: var(--section-padding) 0;
}

section.bg-white {
  background: var(--blanc);
}

section.bg-gris {
  background: var(--gris-xs);
}

/* ─── GRILLES ───────────────────────────────────────────────────── */

.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2px;
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
}

/* ─── SÉPARATEURS ───────────────────────────────────────────────── */

.divider {
  width: 40px;
  height: 1px;
  background: var(--gris-m);
  margin: 20px 0 28px;
}

.divider.white {
  background: rgba(255,255,255,.35);
}

.divider.accent {
  background: var(--accent);
}

.divider.center {
  margin-left: auto;
  margin-right: auto;
}

/* ─── ESPACEMENTS UTILITAIRES ───────────────────────────────────── */

.mt-1 { margin-top: 8px; }
.mt-2 { margin-top: 16px; }
.mt-3 { margin-top: 24px; }
.mt-4 { margin-top: 32px; }

.mb-1 { margin-bottom: 8px; }
.mb-2 { margin-bottom: 16px; }
.mb-3 { margin-bottom: 24px; }
.mb-4 { margin-bottom: 32px; }