/* Layout — container + sections */

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

.section {
  padding-block: var(--section-pad-y);
  position: relative;
}

/* ==================== Sticky stacking scroll ====================
   Le wrapper <main class="stack"> est le parent de référence des sticky.
   Chaque section enfant a position:sticky top:0 + z-index croissant
   → effet "cards stacked" : section 2 glisse par-dessus hero, section 3 par-dessus 2, etc. */
.stack {
  position: relative;
  isolation: isolate;
}

.stack > section,
.stack > footer {
  position: sticky;
  top: 0;
  min-height: 100vh;
  min-height: 100svh;
}

/* Background opaque sur les sections post-hero pour masquer la précédente */
.stack > section:not(.hero),
.stack > footer {
  background: var(--sg-bg);
}

/* Z-index croissant : chaque section s'empile au-dessus de la précédente */
.stack > :nth-child(1) { z-index: 1; } /* hero */
.stack > :nth-child(2) { z-index: 2; } /* expertise */
.stack > :nth-child(3) { z-index: 3; } /* innovation */
.stack > :nth-child(4) { z-index: 4; } /* insta */
.stack > :nth-child(5) { z-index: 5; } /* clients */
.stack > :nth-child(6) { z-index: 6; } /* faq */
.stack > :nth-child(7) { z-index: 7; } /* footer */

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

.section__head {
  max-width: 60rem;
  margin-bottom: clamp(3rem, 6vw, 5rem);
}

.section__head .title-h1,
.section__head .title-h2 { margin-bottom: 1.5rem; }

.section__divider {
  width: 100%;
  height: 1px;
  background: var(--sg-border);
}