/* ============================================================
   S'adaptent à votre métier — Feature Section 02 · Figma 3:6668
   Section : bg blanc · px 30 · pt 99 · pb 50 · 1905 × 1046
   Panneau : 1320 crème r40 · px 93 · pt 137 · pb 140 · gap 90
   ============================================================ */
.adapt {
  background: var(--c-white);
  padding-top: 99px;
  padding-bottom: 50px;
  overflow: hidden;
}

.adapt__panel {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-90);
  padding: 137px 93px 140px;
}

/* ------------------------------------------------------------
   Colonne gauche : 532 de large, gap 21
   ------------------------------------------------------------ */
.adapt__media {
  position: relative;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-21);
  width: 532px;
}

/* Fond de hachures : 425 × 264 en (−50 ; bas −35) */
.adapt__hatch {
  position: absolute;
  left: -50px;
  bottom: -35px;
  width: 425px;
  height: 264px;
  z-index: 0;
  pointer-events: none;
}

.adapt__cards {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  gap: var(--sp-21);
}

/* --- Carte « 85 » : 239 × 264 --- */
.adapt__stat {
  position: relative;
  flex-shrink: 0;
  width: 239px;
  height: 264px;
}
.adapt__stat-label {
  position: absolute;
  left: 25px;
  top: 18.9px;
  width: 153px;
  font-family: var(--f-ui);
  font-size: 18px;
  line-height: 19.8px;
  letter-spacing: normal;
  color: var(--c-ink-ui);
}
.adapt__stat-value {
  position: absolute;
  left: 25px;
  top: 56px;
  font-family: var(--f-ui);
  font-size: 48px;
  line-height: 62.4px;
  letter-spacing: -2px;
  color: var(--c-ink-ui);
}

/* Anneau de progression 95,36 en (24,63 ; 141,17) */
.adapt__ring {
  position: absolute;
  left: 24.63px;
  top: 141.17px;
  width: 95.36px;
  height: 95.36px;
}
.adapt__ring img { width: 100%; height: 100%; }
.adapt__ring-pct {
  position: absolute;
  left: 22.56px;
  top: 22px;
  width: 49.22px;
  text-align: center;
  font-family: var(--f-ui);
  font-size: 27.3px;
  line-height: 38.25px;
  letter-spacing: -0.57px;
  color: var(--c-ink-ui);
}
.adapt__ring-cap {
  position: absolute;
  left: 21.67px;
  bottom: 29px;
  width: 53px;
  font-family: var(--f-ui-alt);
  font-size: 8px;
  font-weight: 500;
  line-height: 9.6px;
  letter-spacing: -0.4px;
  color: var(--c-text-ui);
  opacity: 0.8;
}

/* Compteur 312 en (154 ; 166,2) */
.adapt__count {
  position: absolute;
  left: 154px;
  top: 166.2px;
}
.adapt__count-value {
  font-family: var(--f-ui);
  font-size: 38px;
  line-height: 64.6px;
  letter-spacing: normal;
  color: var(--c-ink-ui);
}
.adapt__count-cap {
  margin-top: -17.79px;
  width: 64px;
  font-family: var(--f-ui-alt);
  font-size: 8px;
  font-weight: 500;
  line-height: 10.4px;
  letter-spacing: -0.4px;
  color: var(--c-text-ui);
  opacity: 0.8;
}

/* --- Carte témoignage Sarah : 266 de large, p 22,948, gap 16 --- */
.adapt__quote {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-16);
  width: 266px;
  padding: 22.948px;
}
.adapt__quote-head p {
  font-family: var(--f-ui-alt);
  font-size: 12px;
  font-weight: 500;
  line-height: 20.4px;
  letter-spacing: -0.19px;
  color: var(--c-ink-ui);
}
.adapt__quote-tags { display: flex; gap: 7.99px; }
.adapt__quote-foot { display: flex; align-items: center; gap: var(--sp-7); }
.adapt__avatar {
  width: 36.7px;
  height: 36.7px;
  border-radius: var(--r-avatar);
  object-fit: cover;
  box-shadow: 0 0 0 2px var(--c-white);
}

/* --- Carte « Relance Client » : image 532 × 266, radius 16 --- */
.adapt__flow {
  position: relative;
  z-index: 1;
  width: 532px;
  height: 266px;
  border-radius: var(--r-card);
  object-fit: cover;
}

/* ------------------------------------------------------------
   Colonne droite : flex 1, gap 60
   ------------------------------------------------------------ */
.adapt__content {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-60);
}

.adapt__intro {
  display: flex;
  flex-direction: column;
  gap: var(--sp-16);
}
.adapt__title {
  display: flex;
  flex-direction: column;
  gap: var(--sp-10);
}

/* Lignes de bénéfice */
.adapt__list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-24);
}
.adapt__row {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-16);
}
.adapt__row-ic {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;               /* 14 + 28 + 14 */
  height: 56px;
  padding: 14px;
  border-radius: var(--r-pill);
}
.adapt__row-ic--coral { background: var(--c-coral); }
.adapt__row-ic--grey  { background: var(--c-text); }   /* #5A5857, pas encre */
.adapt__row-ic img { width: 28px; height: 28px; }

.adapt__row-text {
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
  min-width: 0;
}
.adapt__row-title {
  font-size: var(--fs-body);
  font-weight: 600;
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  color: var(--c-ink);
}
.adapt__row-body {
  width: 374px;
  max-width: 100%;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  color: var(--c-text);
}

/* ---------- Tablette / laptop étroit ---------- */
@media (max-width: 1279px) {
  .adapt__panel { padding: 80px 48px 88px; gap: 48px; }
  .adapt__media { width: 460px; }
  .adapt__flow { width: 100%; height: auto; }
  .adapt__row-body { width: auto; }
}

@media (max-width: 991px) {
  .adapt { padding-top: 60px; padding-bottom: 40px; }
  .adapt__panel { flex-direction: column; align-items: stretch; padding: 56px 32px 64px; gap: 56px; }
  .adapt__media { width: 100%; align-items: center; }
  .adapt__cards { justify-content: center; }
  .adapt__hatch { display: none; }
}

/* ---------- Mobile ---------- */
@media (max-width: 767px) {
  .adapt__panel { padding: 40px 16px 48px; gap: 40px; border-radius: 24px; }
  .adapt__cards { flex-direction: column; align-items: stretch; gap: 16px; }
  .adapt__stat, .adapt__quote { width: 100%; }
  .adapt__row-ic { width: 48px; height: 48px; padding: 10px; }
  .adapt__row-ic img { width: 28px; height: 28px; }
}