.therapeutic-support {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 120px 0;
  gap: 80px;
  background-color: var(--beige);
}

/* ── Intro principale ── */

.therapeutic-support-main__wrapper {
  display: flex;
  flex-direction: column;
  gap: 48px;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
  text-align: center;
  align-items: center;
}

.therapeutic-support-main__pill {
  width: max-content;
  text-align: center;
  padding: 6px 24px;
  border-radius: 24px;
  background-color: var(--primary-25);
  font-weight: 500;
  font-size: 16px;
  transition: transform 0.2s ease;
}

.therapeutic-support-main__pill:hover {
  transform: scale(1.03);
}

.therapeutic-support-main__title {
  position: relative;
}

.therapeutic-support-main__title::after {
  position: absolute;
  bottom: -15px;
  left: 50%;
  transform: translateX(-50%);
  content: "";
  width: 100px;
  height: 5px;
  background-color: var(--primary-75);
}

.therapeutic-support-main__intro {
  text-align: justify;
}

/* ── Cartes ── */

.therapeutic-support__cards {
  display: flex;
  flex-direction: column;
  gap: 80px;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
  width: 100%;
}

.therapeutic-support__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
  text-align: center;
}

.therapeutic-support__card-media {
  width: 100%;
  max-width: 460px;
  aspect-ratio: var(--ts-image-ratio, auto);
  overflow: hidden;
  border-radius: 3px;
  box-shadow: var(--picture-shadow);
}

.therapeutic-support__card-image {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  transition: transform 0.4s ease;
}

.therapeutic-support__card:hover .therapeutic-support__card-image {
  transform: scale(1.04);
}

.therapeutic-support__card-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.therapeutic-support__card-title {
  margin-bottom: 16px;
}

.therapeutic-support__card-intro {
  text-align: justify;
}

/* ── Tablette (768px+) : layout côte à côte, alternance gauche/droite ── */

@media screen and (min-width: 768px) {
  .therapeutic-support__card {
    flex-direction: row;
    text-align: left;
    margin: 0 auto;
  }

  .therapeutic-support__card:nth-child(even) {
    flex-direction: row-reverse;
  }

  .therapeutic-support__card-media {
    max-width: clamp(288px, 28.8vw, 468px);
    flex: 0 0 clamp(288px, 28.8vw, 468px);
  }

  .therapeutic-support__card-content {
    flex: 0 1 clamp(280px, 40vw, 560px);
    max-width: clamp(280px, 40vw, 560px);
    align-items: flex-start;
  }

  .therapeutic-support-main__intro {
    max-width: 83%;
  }
}

/* ── Desktop (1024px+) ── */

@media screen and (min-width: 1024px) {
  .therapeutic-support__card-media {
    max-width: clamp(324px, 25.2vw, 504px);
    flex-basis: clamp(324px, 25.2vw, 504px);
  }
}