/* ============================================================
   LAYOUT CSS — Structures de mise en page globales
   Container, grilles, sections.
   ============================================================ */

/* ─── Container ───────────────────────────────────────────────── */

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

.container--narrow {
  max-width: 800px;
}

.container--wide {
  max-width: 1440px;
}

/* ─── Sections ────────────────────────────────────────────────── */

.section {
  padding-block: clamp(var(--sp-12), 8vw, var(--sp-24));
}

.section--sm {
  padding-block: clamp(var(--sp-8), 5vw, var(--sp-16));
}

.section--lg {
  padding-block: clamp(var(--sp-16), 10vw, var(--sp-24));
}

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

.section--dark {
  background-color: var(--color-brand-dark);
  color: var(--color-text-inverse);
}

.section--dark h2,
.section--dark h3,
.section--dark p {
  color: var(--color-text-inverse);
}

/* ─── Grilles génériques ──────────────────────────────────────── */

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

.grid--2 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
}

.grid--3 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}

.grid--4 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
}

/* ─── Flex utilitaires ────────────────────────────────────────── */

.flex          { display: flex; }
.flex-center   { display: flex; align-items: center; justify-content: center; }
.flex-between  { display: flex; align-items: center; justify-content: space-between; }
.flex-wrap     { flex-wrap: wrap; }
.flex-col      { flex-direction: column; }
.gap-2         { gap: var(--sp-2); }
.gap-3         { gap: var(--sp-3); }
.gap-4         { gap: var(--sp-4); }
.gap-6         { gap: var(--sp-6); }
.gap-8         { gap: var(--sp-8); }

/* ─── Visibilité ──────────────────────────────────────────────── */

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

/* ─── Structure principale ────────────────────────────────────── */

#site-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
}

#site-main {
  flex: 1;
}