/* =========================================================================
   /methode — mise en page uniquement (composants partagés pour le reste).
   ========================================================================= */
.met-hero { padding-top: clamp(32px, 6vw, 88px); padding-bottom: clamp(48px, 6vw, 96px); }
.met-hero__text > .label { display: block; }
.met-hero__text { max-width: 980px; }
.met-hero__frame { margin-top: clamp(32px, 5vw, 64px); max-height: 640px; }

.met-head > .label { display: block; }
.met-head > .h2 { margin-top: 16px; max-width: 13em; }
.met-text { margin-top: 22px; max-width: 34em; font-size: var(--fs-body); line-height: 1.5; color: var(--graphite); }
.on-encre .met-text { color: var(--cendre); }

/* Les 4 temps : chapitres illustrés, impulsions collées à gauche (desktop) */
.met-step {
  display: grid; grid-template-columns: 200px minmax(0, 1fr) minmax(0, 420px);
  gap: var(--g); align-items: start; padding: 48px 0; border-top: 1px solid var(--trait);
}
.met-temps .section-head + .met-step { margin-top: 24px; }
.met-step__aside { position: sticky; top: calc(var(--header-h) + 32px); padding-top: 6px; }
.met-step__aside .pulses { gap: 6px; }
.met-step__aside .pulse { --w: 24px; width: 24px; }
.met-step__aside .pulse.is-current { width: 64px; }
.met-step__title { margin-top: 20px; font-weight: 800; font-size: clamp(2rem, 4vw, 3.5rem); line-height: .95; letter-spacing: -0.035em; }
.met-step__body { margin-top: 20px; max-width: 30em; font-size: var(--fs-lead); line-height: var(--lh-lead); color: var(--graphite); }
.met-step__media { max-width: 420px; justify-self: end; }
.met-step__media--small { max-width: 320px; }
@media (max-width: 1100px) {
  .met-step { grid-template-columns: minmax(0, 1fr) minmax(0, 360px); }
  .met-step__aside { display: none; }
}
@media (max-width: 700px) {
  .met-step { grid-template-columns: minmax(0, 1fr); padding: 32px 0; gap: 20px; }
  .met-step__media { justify-self: start; width: 100%; max-width: 420px; }
  .met-step__media--small { max-width: 320px; }
  .met-step__title { margin-top: 14px; }
  .met-step__body { margin-top: 12px; }
}

.met-features { grid-template-columns: minmax(0, 1fr); }
.met-demande .grid-12, .met-delais .grid-12, .met-suivi .grid-12 { align-items: center; row-gap: 32px; }

.met-suivi__link { margin-top: 28px; }
.met-suivi__picto { display: flex; justify-content: flex-end; }
.met-suivi__picto img { width: 96px; height: 96px; }
@media (max-width: 899px) { .met-suivi__picto { display: none; } }

.met-delais__list > li { font-size: 1.125rem; line-height: 1.4; }