/* ==========================================================================
   Sotumec — Layout, containers, grilles, animations reveal
   ========================================================================== */

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

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

.site-main {
  overflow-x: hidden;
}

section.sotumec-section {
  padding-top: clamp(4rem, 8vw, 7rem);
  padding-bottom: clamp(4rem, 8vw, 7rem);
}

section.sotumec-section--tight {
  padding-top: clamp(3rem, 6vw, 5rem);
  padding-bottom: clamp(3rem, 6vw, 5rem);
}

.sotumec-section-head {
  max-width: 640px;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.sotumec-section-head h2 {
  margin-top: 0;
  margin-bottom: var(--sp-3);
}

.sotumec-section-head .sotumec-eyebrow {
  display: inline-block;
  margin-bottom: var(--sp-3);
}

.sotumec-section-head + * {
  margin-top: 0;
}

.sotumec-section-head--center {
  margin-inline: auto;
  text-align: center;
}

/* --------------------------------------------------------------------------
   Reveal au scroll (IntersectionObserver + classes .is-visible)
   -------------------------------------------------------------------------- */

.sotumec-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
  will-change: opacity, transform;
}

.sotumec-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.sotumec-reveal-stagger > * {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
}

.sotumec-reveal-stagger.is-visible > * {
  opacity: 1;
  transform: translateY(0);
}

.sotumec-reveal-stagger.is-visible > *:nth-child(1) { transition-delay: 0ms; }
.sotumec-reveal-stagger.is-visible > *:nth-child(2) { transition-delay: 100ms; }
.sotumec-reveal-stagger.is-visible > *:nth-child(3) { transition-delay: 200ms; }
.sotumec-reveal-stagger.is-visible > *:nth-child(4) { transition-delay: 300ms; }
.sotumec-reveal-stagger.is-visible > *:nth-child(5) { transition-delay: 400ms; }
.sotumec-reveal-stagger.is-visible > *:nth-child(6) { transition-delay: 500ms; }

@media (prefers-reduced-motion: reduce) {
  .sotumec-reveal,
  .sotumec-reveal-stagger > * {
    opacity: 1;
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   Grilles génériques
   -------------------------------------------------------------------------- */

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

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

/* Audit responsive 02/10/2026 : à 992-1199px, 5 colonnes = cartes de ~176px
   (« Savoir-faire » coupé, un mot par ligne) -> 3 colonnes. */
@media (min-width: 992px) and (max-width: 1199px) {
  .sotumec-grid--5 { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 991px) {
  .sotumec-grid--3 { grid-template-columns: repeat(2, 1fr); }
  .sotumec-grid--4 { grid-template-columns: repeat(2, 1fr); }
  .sotumec-grid--5 { grid-template-columns: repeat(2, 1fr); }
  .sotumec-grid--2 { grid-template-columns: 1fr; }
}

@media (max-width: 575px) {
  .sotumec-grid--3,
  .sotumec-grid--4,
  .sotumec-grid--5 {
    grid-template-columns: 1fr;
  }
}

.sotumec-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-16);
  align-items: center;
}

@media (max-width: 991px) {
  .sotumec-two-col {
    grid-template-columns: 1fr;
    gap: var(--sp-8);
  }
}

.sotumec-two-col--reverse .sotumec-two-col__media {
  order: 2;
}

@media (max-width: 991px) {
  .sotumec-two-col--reverse .sotumec-two-col__media {
    order: -1;
  }
}

/* Ancres : compense la hauteur du header collant. */
section[id] {
  scroll-margin-top: calc(var(--header-height) + var(--sp-4));
}