/* Containers, sections, grilles. */

.container {
  /* Au moins 90 % du viewport, figé à 1400 px au-delà. */
  width: 90%;
  max-width: var(--container-max);
  margin-inline: auto;
}

.section {
  padding-block: var(--space-9);
  container-type: inline-size;
  /* Décale l'ancre sous la navbar sticky (+ encoche iPhone). */
  scroll-margin-top: calc(84px + env(safe-area-inset-top, 0px));
}

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

.section-head {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-7);
}

.section-head h2 { font-size: var(--fs-title); }
.section-head .lead { color: var(--text-muted); font-size: var(--fs-subtitle); }

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

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

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

@container (max-width: 540px) {
  .grid-4, .grid-3, .grid-2 { grid-template-columns: 1fr; }
}

/* 5 colonnes — section Profils (v2). Se réduit avant les grilles plus courtes :
   5 cards deviennent illisibles bien plus tôt que 4. */
.grid-5 { grid-template-columns: repeat(5, 1fr); }

@container (max-width: 1180px) {
  .grid-5 { grid-template-columns: repeat(3, 1fr); }
}
@container (max-width: 880px) {
  .grid-5 { grid-template-columns: repeat(2, 1fr); }
}
@container (max-width: 540px) {
  .grid-5 { grid-template-columns: 1fr; }
}