/* =========================================================
   CCC — Layout
   ========================================================= */

header,
footer {
  background: var(--surface);
  border-color: var(--border-subtle);
}

main {
  display: block;
}

.container {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: var(--space-4) var(--space-2);
}

/* Sections */
.section {
  margin-bottom: var(--space-4);
}

/* Grilles simples */
.grid {
  display: grid;
  gap: var(--space-3);
}

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

/* Responsive */
@media (max-width: 1024px) {
  .grid-2 {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .container {
    padding: var(--space-3) var(--space-2);
  }
}