/* ==========================================================================
   05 — MÉTHODE  (maquette : y 945 → 1070)
   Titre x 97 ; étapes à x 441 / 590 / 745 / 897, petit cercle rouge,
   ligne horizontale qui se remplit au défilement, étape active plus vive.
   ========================================================================== */
.method{min-height:calc(126 * var(--m));background:radial-gradient(calc(260 * var(--m)) calc(90 * var(--m)) at 0 100%,rgba(60,60,64,.22),transparent 70%),var(--bg)}
.method__grid{position:relative;z-index:2;display:grid;grid-template-columns:calc(344 * var(--m)) 1fr;padding:calc(25 * var(--m)) calc(40 * var(--m)) calc(20 * var(--m)) calc(97 * var(--m))}
.method__title{margin-top:max(calc(var(--mins) * 18px),calc(14 * var(--m)))}

.steps{position:relative;padding-top:calc(4 * var(--m))}
.steps__list{display:grid;grid-template-columns:repeat(4,1fr);column-gap:calc(20 * var(--m))}
.steps__track{position:absolute;left:calc(4.5 * var(--m));right:calc(-20 * var(--m));top:calc(4 * var(--m) + max(calc(var(--mins) * 11px),calc(9 * var(--m))) / 2 - .5px);height:1px;background-image:linear-gradient(90deg,rgba(255,255,255,.22) 50%,transparent 50%);background-size:4px 1px;pointer-events:none}
.steps__fill{position:absolute;left:0;top:-.5px;height:2px;width:100%;transform-origin:left center;transform:scaleX(var(--p,0));background:linear-gradient(90deg,var(--red),var(--red-hi));box-shadow:0 0 8px var(--red-glow)}
.step{position:relative;color:var(--ink-3);transition:color .5s var(--ease)}
.step__dot{position:relative;z-index:1;display:block;width:max(calc(var(--mins) * 11px),calc(9 * var(--m)));height:max(calc(var(--mins) * 11px),calc(9 * var(--m)));border-radius:50%;border:1.5px solid var(--red);background:var(--bg);opacity:.55;transition:opacity .5s var(--ease),box-shadow .5s var(--ease),background-color .5s var(--ease)}
.step__num{display:block;margin-top:max(calc(var(--mins) * 12px),calc(8 * var(--m)));font-family:var(--f-mono);font-weight:500;font-size:var(--fs-nano);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-4)}
.step__title{margin-top:max(calc(var(--mins) * 4px),calc(2 * var(--m)));font-family:var(--f-title);font-weight:700;font-size:max(calc(var(--mins) * 19px),calc(13.4 * var(--m)));line-height:1;text-transform:uppercase;color:rgba(246,43,62,.55);transition:color .5s var(--ease),text-shadow .5s var(--ease)}
.step__txt{margin-top:max(calc(var(--mins) * 10px),calc(9 * var(--m)));font-size:max(calc(var(--mins) * 13px),calc(6.4 * var(--m)));line-height:1.75;color:var(--ink-3);max-width:calc(140 * var(--m));transition:color .5s var(--ease)}
.step.is-on .step__dot{opacity:1;background:#1a0306;box-shadow:0 0 0 3px rgba(246,43,62,.12),0 0 12px var(--red-glow)}
.step.is-on .step__title{color:var(--red);text-shadow:0 0 18px rgba(246,43,62,.35)}
.step.is-on .step__txt{color:var(--ink-2)}
.step.is-on .step__num{color:var(--ink-3)}
html:not(.js) .step .step__dot{opacity:1}
html:not(.js) .step .step__title{color:var(--red)}
html:not(.js) .step .step__txt{color:var(--ink-2)}

@media (max-width:1023px){
  .method{min-height:0}
  .method__grid{grid-template-columns:1fr;padding:56px 24px 52px}
  .steps{margin-top:36px;padding-left:34px}
  .steps__list{grid-template-columns:1fr;row-gap:30px}
  .steps__track{left:5px;right:auto;top:6px;bottom:6px;width:1px;height:auto;background-image:linear-gradient(180deg,rgba(255,255,255,.22) 50%,transparent 50%);background-size:1px 4px}
  .steps__fill{top:0;left:-.5px;width:2px;height:100%;transform-origin:center top;transform:scaleY(var(--p,0))}
  .step__dot{position:absolute;left:-34px;top:2px}
  .step__num{margin-top:0}
  .step__title{font-size:24px}
  .step__txt{font-size:15px;max-width:520px}
}