/* Section 7 — De la problématique scientifique à la mise en production */

.sci-method-flow {
  --method-bg: #101728;
  --method-ink: #f3f5fa;
  --method-muted: #b6c4d3;
  --method-line: rgba(179, 200, 220, 0.16);
  --method-indigo: #484f8a;
  --method-orange: #f1894e;
  position: relative;
  isolation: isolate;
  background: var(--method-bg);
  color: var(--method-ink);
  /* padding-block = --sci-section-y via .sci-page :is(.sci-method-flow, ...) */
  border: 0;
  overflow-x: clip;
}

.sci-method-flow__inner {
  width: 100%;
}

.sci-page .sci-method-flow__title {
  margin: 0 0 clamp(2rem, 4vw, 3rem);
  max-width: 22ch;
  font-family: var(--font-title);
  font-size: var(--fs-title);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.025em;
  color: #f7f9fc;
  text-wrap: balance;
}

.sci-method-flow__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid var(--method-line);
}

.sci-method-flow__step {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: clamp(1.75rem, 3.2vw, 2.5rem) clamp(1.25rem, 2.4vw, 2rem);
  border: 0;
  background: transparent;
}

.sci-method-flow__step:nth-child(odd) {
  border-right: 1px solid var(--method-line);
  padding-left: 0;
  padding-right: clamp(1.5rem, 2.8vw, 2.35rem);
}

.sci-method-flow__step:nth-child(even) {
  padding-right: 0;
  padding-left: clamp(1.5rem, 2.8vw, 2.35rem);
}

.sci-method-flow__step:nth-child(-n + 2) {
  border-bottom: 1px solid var(--method-line);
}

.sci-method-flow__num {
  display: inline-block;
  margin: 0 0 0.85rem;
  font-family: var(--font-title);
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--method-orange);
  line-height: 1;
}

.sci-page .sci-method-flow__heading {
  margin: 0;
  max-width: none;
  font-family: var(--font-subtitle);
  font-size: var(--fs-subtitle);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: #f4f7fb;
  text-wrap: unset;
}

.sci-page .sci-method-flow__text {
  margin: 0.95rem 0 0;
  max-width: none;
  font-size: clamp(1.02rem, 1.15vw, 1.125rem);
  font-weight: 500;
  line-height: 1.72;
  color: var(--method-muted);
}

.sci-method-flow__figure {
  margin: 1.5rem 0 0;
  padding-top: 0;
  width: 100%;
  border: 0;
  background: transparent;
}

.sci-method-flow__figure img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 1;
  object-fit: contain;
  object-position: center;
  border: 1px solid rgba(179, 200, 220, 0.18);
  border-radius: 0.65rem;
  background: #0b111d;
}

.sci-page .sci-method-flow__note {
  margin: clamp(1.35rem, 2.5vw, 1.85rem) 0 0;
  font-size: 0.84rem;
  line-height: 1.5;
  font-weight: 500;
  color: #8fa0b4;
}

/* Animation : images visibles sans JS ; masquage uniquement si enhancement actif */
.sci-method-flow.is-enhanced [data-sci-method-figure],
.sci-method-flow.is-enhanced [data-sci-method-num] {
  opacity: 0;
  transform: translateY(14px);
  will-change: opacity, transform;
}

.sci-method-flow.is-enhanced [data-sci-method-figure].is-revealed,
.sci-method-flow.is-enhanced [data-sci-method-num].is-revealed {
  opacity: 1;
  transform: none;
  will-change: auto;
}

@media (max-width: 900px) {
  .sci-method-flow__grid {
    grid-template-columns: 1fr;
  }

  .sci-method-flow__step,
  .sci-method-flow__step:nth-child(odd),
  .sci-method-flow__step:nth-child(even) {
    border-right: 0;
    padding-left: 0;
    padding-right: 0;
  }

  .sci-method-flow__step:nth-child(-n + 2),
  .sci-method-flow__step:not(:last-child) {
    border-bottom: 1px solid var(--method-line);
  }

}

@media (min-width: 1100px) {
  .sci-page .sci-method-flow__heading {
    white-space: nowrap;
  }
}

@media (min-width: 1600px) {
  .sci-page .sci-method-flow__title {
    font-size: var(--fs-title);
  }

  .sci-page .sci-method-flow__heading {
    font-size: clamp(1.35rem, 1.2vw, 1.65rem);
  }

  .sci-page .sci-method-flow__text {
    font-size: clamp(1.08rem, 1vw, 1.22rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .sci-method-flow.is-enhanced [data-sci-method-figure],
  .sci-method-flow.is-enhanced [data-sci-method-num] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}