/* ==========================================================================
   layout.css — Container, sections, grid utilities
   ========================================================================== */

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

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

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

/* ----- Sections (rythme vertical sobre, beaucoup d'espace) ----- */
.section {
  padding-block: var(--space-7);
}

@media (min-width: 768px) {
  .section {
    padding-block: var(--space-8);
  }
}

@media (min-width: 1024px) {
  .section {
    padding-block: var(--space-9);
  }
}

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

.section--dark {
  background-color: var(--color-bg-dark);
  color: var(--color-text-on-dark);
}

.section--dark h1,
.section--dark h2,
.section--dark h3,
.section--dark h4 {
  color: var(--color-text-on-dark);
}

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

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

/* En-tête de section */
.section__header {
  margin-bottom: var(--space-6);
  max-width: 720px;
}

.section__header--center {
  margin-inline: auto;
  text-align: center;
}

.section__lede {
  font-size: var(--fs-md);
  color: var(--color-text-muted);
  line-height: var(--lh-loose);
}

/* ----- Grid utilities ----- */
.grid {
  display: grid;
  gap: var(--space-5);
}

.grid--2 { grid-template-columns: 1fr; }
.grid--3 { grid-template-columns: 1fr; }
.grid--4 { grid-template-columns: 1fr; }

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

@media (min-width: 1024px) {
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
}

.grid--gap-lg { gap: var(--space-6); }
.grid--gap-xl { gap: var(--space-7); }

/* ----- Stack (espacement vertical entre enfants) ----- */
.stack > * + * {
  margin-top: var(--space-4);
}

.stack--sm > * + * { margin-top: var(--space-2); }
.stack--lg > * + * { margin-top: var(--space-5); }

/* ----- Cluster (alignement horizontal avec wrap) ----- */
.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}

.cluster--between {
  justify-content: space-between;
}

/* ----- Flex utilities ----- */
.flex { display: flex; }
.flex--center { align-items: center; justify-content: center; }
.flex--between { justify-content: space-between; align-items: center; }
.flex--col { flex-direction: column; }
.flex--wrap { flex-wrap: wrap; }
.flex--gap-2 { gap: var(--space-2); }
.flex--gap-3 { gap: var(--space-3); }
.flex--gap-4 { gap: var(--space-4); }

/* ----- Text alignment ----- */
.text-center { text-align: center; }
.text-left { text-align: left; }

/* ----- Spacing utilities (limitées et utiles) ----- */
.mt-0 { margin-top: 0; }
.mt-2 { margin-top: var(--space-2); }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mb-0 { margin-bottom: 0; }
.mb-2 { margin-bottom: var(--space-2); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }

/* ----- Aspect ratios ----- */
.ratio-16-9 { aspect-ratio: 16 / 9; }
.ratio-4-3 { aspect-ratio: 4 / 3; }
.ratio-1-1 { aspect-ratio: 1 / 1; }

/* ----- Hide on breakpoints ----- */
.hide-mobile { display: none; }
@media (min-width: 768px) {
  .hide-mobile { display: initial; }
  .hide-desktop { display: none; }
}