/* ============================================================
   Notre méthode — Figma 8:3704 · 1920 × 1879
   Section : px 30 · pt 100 · pb 60 · conteneur 1280 · gap 112
   Accordéon : l'étape ouverte devient un panneau orange à encoches
   ============================================================ */
.met {
  padding-top: 100px;
  padding-bottom: 60px;
  overflow: hidden;
}
.met__inner { display: flex; flex-direction: column; gap: var(--sp-112); }
.met__head { display: flex; flex-direction: column; gap: var(--sp-15); max-width: 781px; }

.met__list { display: flex; flex-direction: column; }

/* Live : item fermé 280, item ouvert 545 (liste de 1385 pour 4 étapes) */
.met__item {
  position: relative;
  min-height: 280px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  transition: background-color 0.4s var(--ease-out);
}
.met__item + .met__item { border-top: 1px solid rgba(5, 26, 47, 0.12); }

/* Étape ouverte : panneau orange, sans liseré */
.met__item.is-open {
  min-height: 546px;
  justify-content: flex-start;
  border-radius: var(--r-panel);
  background: var(--c-orange);
  border-top-color: transparent;
  color: var(--c-white);
}
.met__item.is-open + .met__item { border-top-color: transparent; }

/* Quatre arches blanches mordent le panneau ouvert (relevé live) */
.met__item.is-open > .enc { width: 77px; height: 50px; }
.met__item.is-open > .enc--haut { left: 1063.2px; right: auto; top: -2px; transform: rotate(180deg); }
.met__item.is-open > .enc--bas  { left: 70px; bottom: 0; transform: none; }
.met__enc-g { left: -15px;    top: 346.3px; transform: rotate(90deg); }
.met__enc-d { left: 1236.2px; top: 352.3px; transform: rotate(130deg); }

.met__h { margin: 0; }
.met__btn {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) 396px 60px;
  align-items: center;
  column-gap: 61px;
  width: 100%;
  padding: 40px 60px;
  text-align: left;
}

/* La marge négative ramène l'écart après le numéro à 22, le reste garde 61. */
.met__num {
  margin-right: -39px;
  font-family: var(--f-display);
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  letter-spacing: var(--ls-h1);
  color: var(--c-navy);
}
.met__item.is-open .met__num { color: var(--c-white); }

.met__titre { color: var(--c-navy); }
.met__item.is-open .met__titre { color: var(--c-white); }

.met__resume {
  font-size: var(--fs-lead);
  font-weight: 400;
  line-height: var(--lh-lead);
  color: var(--c-navy);
}
.met__item.is-open .met__resume { color: var(--c-white); }

.met__chevron {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--c-navy);
  color: var(--c-white);
  transition: transform 0.35s var(--ease-out);
}
.met__chevron svg { width: 26px; height: 26px; }
.met__item.is-open .met__chevron { background: var(--c-white); color: var(--c-navy); transform: rotate(180deg); }

/* Visuel de l'étape ouverte : 916,4 × 273,3 centré, collé au bas du panneau.
   60 + rangée 153 + 60 + 273,3 = 546,3, la hauteur du live. */
.met__visuel { padding: 40px 60px 0; }
.met__visuel img {
  display: block;
  width: 916.4px;
  max-width: 100%;
  height: 273.3px;
  margin-inline: auto;
  object-fit: contain;
  object-position: top center;
}

@media (max-width: 1199px) {
  .met__enc-g, .met__enc-d { display: none; }
  .met__item.is-open > .enc--haut { left: auto; right: 40px; }
  .met__btn { grid-template-columns: 80px minmax(0, 1fr) 52px; column-gap: var(--sp-24); padding: 28px 32px; }
  .met__num { margin-right: 0; }
  .met__resume { grid-column: 2 / -1; }
  .met__num { font-size: 64px; line-height: 70px; }
  .met__chevron { width: 52px; height: 52px; }
  .met__visuel { padding: 32px 32px 0; }
}

@media (max-width: 767px) {
  .met { padding-top: 56px; padding-bottom: 40px; }
  .met__inner { gap: 48px; }
  .met__btn { grid-template-columns: 56px minmax(0, 1fr) 42px; column-gap: 14px; padding: 22px 20px; }
  .met__num { font-size: 42px; line-height: 46px; }
  .met__chevron { width: 42px; height: 42px; }
  .met__chevron svg { width: 20px; height: 20px; }
  .met__visuel { padding: 24px 20px 0; }
}