/* MÉTHODE · titre centré, puis quatre phrases qui descendent en escalier, la dernière en violet */
.methode { padding-top: var(--gap); }
.methode > .tag, .methode > h2 { display: block; width: fit-content; margin-inline: auto; text-align: center; }
.methode h2 { margin-top: 14px; margin-bottom: 56px; }
.stairs { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 20px; row-gap: 48px; }
.stairs li:nth-child(1) { grid-column: 1 / 13; }
.stairs li:nth-child(2) { grid-column: 2 / 13; }
.stairs li:nth-child(3) { grid-column: 3 / 13; }
.stairs li:nth-child(4) { grid-column: 4 / 13; }
.stairs__line { font-size: clamp(32px, 3.8vw, 56px); line-height: 1.05; font-weight: 600; letter-spacing: -0.035em; }
.stairs__line--last { color: var(--violet); }
.stairs__say { margin-top: 10px; max-width: 36ch; color: var(--soft); }
@media (max-width: 760px) {
  .stairs { grid-template-columns: 1fr; row-gap: 36px; }
  .stairs li:nth-child(n) { grid-column: 1; }
}
@media (max-width: 760px) { .methode > .tag, .methode > h2 { margin-inline: 0; text-align: left; } .methode h2 { margin-bottom: 40px; } }
@media (max-width: 760px) {
  .stairs { counter-reset: etape; row-gap: 0; }
  .stairs li { position: relative; counter-increment: etape; padding: 0 0 36px 52px; }
  .stairs li::before { content: "0" counter(etape); position: absolute; left: 0; top: 4px; color: var(--violet); font-size: 15px; font-weight: 600; }
  .stairs li::after { content: ""; position: absolute; left: 9px; top: 32px; bottom: 6px; width: 1px; background: var(--line); }
  .stairs li:last-child { padding-bottom: 0; }
  .stairs li:last-child::after { display: none; }
  .stairs__line { font-size: 26px; line-height: 1.15; }
}