/* ============================================================
   Méthode — Feature Section 01 · Figma 3:6596 · 1905 × 737
   Section : px 30 · pt 69 · pb 50 · overflow hidden
   Bloc « Process » : 1208 × 618, positionnement absolu interne
   ============================================================ */
.methode {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: 69px;
  padding-bottom: 50px;
  overflow: hidden;
}

.methode__process {
  position: relative;
  width: 1208px;
  max-width: 100%;
  height: 618px;
}

/* ---------- Colonne de gauche : 367 × 290 en (1,5 ; 0) ---------- */
.methode__heading {
  position: absolute;
  left: 1.5px;
  top: 0;
  width: 367px;
  height: 290px;
}

.methode__eyebrow {
  position: absolute;
  left: 0;
  top: 0;
  white-space: nowrap;
}

/* H2 Manrope 800 — déborde de 222 px à droite du bloc de 367 */
.methode__h2 {
  position: absolute;
  left: 0;
  top: 32px;
  width: 589px;                 /* 367 + 222 */
  font-family: var(--f-manrope);
  font-size: var(--fs-h2-alt);
  font-weight: 800;
  line-height: var(--lh-h2-alt);
  letter-spacing: var(--ls-h2-alt);
  color: #000;
  white-space: nowrap;
}

.methode__lead {
  position: absolute;
  left: 0;
  top: 100px;
  width: 367px;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  color: var(--c-text);
}

/* Bouton : bord bas à 13,79 px sous le bloc Heading */
.methode__cta {
  position: absolute;
  left: 0;
  top: 256.79px;
}

/* ---------- Courbe en S : SVG 1024 × 402 ---------- */
/* Figma : bloc courbe à top 15,98 dans Process, SVG à (−3,5 ; 38,83) */
.methode__curve {
  position: absolute;
  left: -3.5px;
  top: 54.81px;                 /* 15,98 + 38,83 */
  width: 1024px;
  height: 402px;
  pointer-events: none;
}

/* ---------- Les 3 étapes : 280 × 221,98, en escalier montant ---------- */
.methode__step {
  position: absolute;
  width: 280px;
  height: 221.98px;
}
.methode__step--1 { left: 124.5px; top: 395.98px; }  /* 15,98 + 380 */
.methode__step--2 { left: 591.5px; top: 263.98px; }  /* 15,98 + 248 */
.methode__step--3 { left: 927.5px; top: 15.98px;  }  /* 15,98 + 0   */

/* Chiffre géant — Gilroy non servi sur le live : pile Arial Black */
.methode__num {
  position: absolute;
  left: 170px;
  top: 0;
  font-family: var(--f-num);
  font-size: var(--fs-num);
  line-height: var(--lh-num);
  letter-spacing: var(--ls-num);
  color: #000;
  opacity: var(--op-num);
  pointer-events: none;
}
.methode__step--3 .methode__num { left: 159px; }

/* Pastille : carte blanche 64 · radius 20, avec un carré 23 · radius 10 dedans */
.methode__dot {
  position: absolute;
  left: 0;
  top: 12.99px;
  width: 64px;
  height: 64px;
  border-radius: var(--r-field);
  background: var(--c-white);
}
.methode__dot::after {
  content: '';
  position: absolute;
  left: 20px;
  top: 20px;
  width: 23px;
  height: 23px;
  border-radius: var(--r-link);
  background: var(--c-dot);
}

.methode__step-text {
  position: absolute;
  left: 1px;
  top: 100.99px;
  width: 279px;
}

.methode__step-title {
  font-family: var(--f-display);
  font-size: var(--fs-lead);
  font-weight: 400;
  line-height: var(--lh-lead);
  letter-spacing: normal;
  color: var(--c-title-alt);
}

.methode__step-body {
  margin-top: 4px;              /* titre 34 → texte à 38 */
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  color: var(--c-text);
}

/* ============================================================
   Responsive : le positionnement absolu laisse place à une pile
   ============================================================ */
@media (max-width: 1279px) {
  .methode__process {
    position: static;
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 56px;
  }
  .methode__heading {
    position: static;
    width: 100%;
    max-width: 640px;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  .methode__eyebrow,
  .methode__h2,
  .methode__lead,
  .methode__cta { position: static; width: auto; }
  .methode__h2 { white-space: normal; }
  .methode__lead { max-width: 540px; }
  .methode__cta { margin-top: 8px; }

  .methode__curve { display: none; }

  .methode__step {
    position: static;
    width: 100%;
    height: auto;
    padding-left: 88px;
    min-height: 64px;
  }
  .methode__step + .methode__step { margin-top: 40px; }
  .methode__num { left: auto; right: 0; top: -40px; font-size: 120px; line-height: 120px; }
  .methode__dot { top: 0; }
  .methode__step-text { position: static; width: auto; max-width: 520px; }
}

@media (max-width: 991px) {
  .methode { padding-top: 60px; padding-bottom: 40px; }
  .methode__process { gap: 44px; }
}

@media (max-width: 767px) {
  .methode { padding-top: 48px; padding-bottom: 32px; }
  .methode__step { padding-left: 0; }
  .methode__dot { position: static; display: block; margin-bottom: 16px; }
  .methode__num { display: none; }
}