/* ============================================================
   Pourquoi YodLynci — Figma 8:3610 · 1920 × 1182
   Section : px 30 · pt 100 · pb 69 · conteneur 1280 · gap 80
   ============================================================ */
.why {
  padding-top: 100px;
  padding-bottom: 69px;
  overflow: hidden;
}
.why__inner { display: flex; flex-direction: column; gap: var(--sp-80); }

.why__body {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 32px;
}

/* Colonnes de 337,5 : 1280 = 337,5 + 32 + 541 + 32 + 337,5 (relevé live) */
.why .sec-head__right { width: 371.2px; }

.why__col { display: flex; flex-direction: column; gap: var(--sp-15); }
.why__col--left  { align-items: flex-end; text-align: right; padding-bottom: 60px; }
.why__col--right { align-items: flex-start; padding-top: 120px; }

.why__title { color: var(--c-navy); }
.why__text { font-size: var(--fs-lead); line-height: var(--lh-lead); }
/* Le paragraphe de gauche déborde de 10 px hors de sa colonne, comme sur le live */
.why__col--left  .why__text { width: 347.6px; flex-shrink: 0; }
.why__col--right .why__text { max-width: 324px; }
.why__stat { position: relative; left: 7px; width: 230px; min-height: 160px; margin-top: 32px; }
.why__stat .enc--haut { top: -2px; right: 53px; }

/* Photo centrale 541 × 712, à encoches */
.why__media {
  position: relative;
  width: 541px;
  flex-shrink: 0;
  margin: 0;
  border-radius: var(--r-card);
  overflow: hidden;
  --enc-color: var(--c-white);
}
.why__media img { width: 100%; height: auto; display: block; }
.why__enc-haut {
  top: 0; left: 157px;
  width: 77px; height: 51px;
  transform: scaleY(-1);
}
.why__enc-bas {
  bottom: 0; right: 51px;
  width: 77px; height: 51px;
}

@media (max-width: 1199px) {
  .why__body { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 40px; }
  .why__col--left { align-items: flex-start; text-align: left; padding-bottom: 0; }
  .why__col--right { padding-top: 0; }
  .why__col { width: 100%; max-width: 620px; }
  .why__text { max-width: none; }
  .why__media { width: 100%; max-width: 541px; }
}

@media (max-width: 991px) {
  .why { padding-top: 56px; padding-bottom: 56px; }
  .why__inner { gap: 48px; }
}