/* ==========================================================================
   Layout: containers, section rhythm, grids.
   Outer spacing lives here and only here. Components never set outer margin,
   which is what keeps .section and .card from cancelling each other out.
   ========================================================================== */

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

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

.page { min-height: 100vh; display: flex; flex-direction: column; }
.page__main { flex: 1; }


/* --- Section rhythm ------------------------------------------------------- */

.section { padding-block: var(--sp-8); }
.section--tight { padding-block: var(--sp-7); }
.section--loose { padding-block: var(--sp-9); }
.section--flush-top { padding-block-start: 0; }
.section--flush-bottom { padding-block-end: 0; }

@media (min-width: 60rem) {
  .section { padding-block: var(--sp-9); }
  .section--tight { padding-block: var(--sp-7); }
  .section--loose { padding-block: var(--sp-10); }
  .section--flush-top { padding-block-start: 0; }
  .section--flush-bottom { padding-block-end: 0; }
}

.section--paper { background: var(--papier); }
.section--white { background: var(--surface); }
.section--tint  { background: var(--vert-brume); }
.section--dark  {
  background: var(--vert-profond);
  color: rgba(255, 255, 255, 0.86);
}
.section--dark h1,
.section--dark h2,
.section--dark h3,
.section--dark h4 { color: var(--blanc); }

/* Inline links on a dark ground cannot keep the light-ground link colour.
   Buttons and the arrow link carry their own colour, so they are left alone. */
.section--dark a:not(.btn):not(.link-arrow) { color: var(--or-clair); }
.section--dark a:not(.btn):not(.link-arrow):hover { color: var(--blanc); }


/* --- Section heading block ------------------------------------------------ */

.section-head {
  display: grid;
  gap: var(--sp-3);
  margin-bottom: var(--sp-6);
  max-width: var(--measure);
}
.section-head__title { font-size: var(--fs-2xl); }
.section-head__intro { color: var(--ink-2); }
.section--dark .section-head__intro { color: rgba(255, 255, 255, 0.76); }

/* Heading on the left, an action on the right, wrapping cleanly on small screens. */
.section-head--split {
  max-width: none;
  grid-template-columns: 1fr auto;
  align-items: end;
  column-gap: var(--sp-6);
}
.section-head--split .eyebrow { grid-column: 1 / -1; }
@media (max-width: 47.99rem) {
  .section-head--split { grid-template-columns: 1fr; }
}


/* --- Grids ---------------------------------------------------------------- */

.grid { display: grid; gap: var(--sp-5); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Auto-fitting card grid: the default for catalogues and directories. */
.grid--cards {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
}
.grid--wide-cards {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 26rem), 1fr));
}

@media (max-width: 63.99rem) {
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 47.99rem) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: minmax(0, 1fr); }
}

/* Content beside a sticky rail: used on service and article pages. */
.split {
  display: grid;
  gap: var(--sp-7);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 60rem) {
  .split { grid-template-columns: minmax(0, 1fr) 20rem; gap: var(--sp-8); }
  .split--rail-first { grid-template-columns: 17rem minmax(0, 1fr); }
  .split__rail--sticky {
    position: sticky;
    top: 7.5rem;
    align-self: start;
  }
}

.stack { display: grid; gap: var(--sp-4); }
.stack--tight { gap: var(--sp-2); }
.stack--loose { gap: var(--sp-6); }

.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  align-items: center;
}
.cluster--tight { gap: var(--sp-2); }
.cluster--between { justify-content: space-between; }


/* --- Spacing utilities ----------------------------------------------------
   Deliberately few. If a layout needs more than these, it wants a class. */

.mt-2 { margin-top: var(--sp-2); }
.mt-3 { margin-top: var(--sp-3); }
.mt-4 { margin-top: var(--sp-4); }
.mt-5 { margin-top: var(--sp-5); }
.mt-6 { margin-top: var(--sp-6); }
.m-0  { margin: 0; }
.align-start { align-content: start; }
.text-center { text-align: center; }