/*
 * Layout — containers, sections, helpers responsive.
 */

/* ---------- Container standard ---------- */

.lpc-container {
  width: 100%;
  max-width: var(--lpc-container);
  margin-inline: auto;
  padding-inline: var(--lpc-section-px-mobile);
}

@media (min-width: 1024px) {
  .lpc-container {
    padding-inline: var(--lpc-section-px-desktop);
  }
}

.lpc-container--narrow {
  max-width: var(--lpc-container-narrow);
}

.lpc-container--wide {
  max-width: var(--lpc-container-wide);
}

/* ---------- Section wrapper ---------- */

.lpc-section {
  padding-block: var(--lpc-section-py-mobile);
}

@media (min-width: 1024px) {
  .lpc-section {
    padding-block: var(--lpc-section-py-desktop);
  }
}

.lpc-section--bg { background: var(--lpc-bg); }
.lpc-section--bg-2 { background: var(--lpc-bg-2); }
.lpc-section--bg-3 { background: var(--lpc-bg-3); }
.lpc-section--ink { background: var(--lpc-ink); color: var(--lpc-bg); }
.lpc-section--terra { background: var(--lpc-terra); color: var(--lpc-bg); }
.lpc-section--sage { background: var(--lpc-sage); color: var(--lpc-bg); }

/* ---------- Grid helpers ---------- */

.lpc-grid {
  display: grid;
  gap: var(--lpc-space-6);
}

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

@media (max-width: 1023px) {
  .lpc-grid--3 { grid-template-columns: repeat(2, 1fr); }
  .lpc-grid--4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 639px) {
  .lpc-grid--2 { grid-template-columns: 1fr; }
  .lpc-grid--3 { grid-template-columns: 1fr; }
}

/* ---------- Stack helpers ---------- */

.lpc-stack { display: flex; flex-direction: column; }
.lpc-stack > * + * { margin-top: var(--lpc-space-4); }
.lpc-stack--lg > * + * { margin-top: var(--lpc-space-8); }
.lpc-stack--sm > * + * { margin-top: var(--lpc-space-2); }

.lpc-row { display: flex; align-items: center; gap: var(--lpc-space-3); }
.lpc-row--wrap { flex-wrap: wrap; }

/* ---------- Visually hidden (accessibilité) ---------- */

.lpc-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Skip link ---------- */

.lpc-skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--lpc-ink);
  color: var(--lpc-bg);
  padding: var(--lpc-space-2) var(--lpc-space-4);
  z-index: 10000;
  transition: top var(--lpc-t-fast);
}

.lpc-skip-link:focus {
  top: 0;
}