/*DOULEURS - HEADER */

.douleurs-header {
  min-height: min(30rem, 30vh);
  justify-content: center !important;
  background-color: var(--clr-bg-primary-l-2);
}

/*DOULEURS - DEFINITION */

.douleurs-def__img img {
  aspect-ratio: 3/2;
  height: auto;
  width: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: var(--radius-site);
}

.douleurs-def__content {
  padding: 2rem 0;
}

/*DOULEURS - CAUSES */

.douleurs-causes {
  border-radius: var(--radius-site);
  background-color: var(--clr-bg-primary-l-2);
  border: 1px solid var(--clr-border-primary);
  padding: var(--space-xl);
  gap: var(--space-m);
}

@media (max-width: 767px) {
  .douleurs-causes {
    border-radius: 0;
  }
}

.douleurs-causes__tabs {
  width: 85%;
  border-radius: var(--radius-site);
  border: 1px dashed var(--clr-border-primary);
  padding: 1rem 1.4rem;
  background-color: var(--clr-bg-light);
}

@media (max-width: 1024px) {
  .douleurs-causes__tabs {
    width: 100%;
  }
}

.douleurs-causes__tabs:hover {
  background-color: var(--clr-primary);
  color: var(--clr-bg-light);
}

.douleurs-causes__tabs.active-btn {
  background-color: var(--clr-primary);
  color: var(--clr-bg-light);
}

.douleurs-causes__tabs__content {
  overflow: hidden;
  border-radius: var(--radius-site);
}

.douleurs-causes__tabs__textbox {
  padding: var(--space-l);
  border-radius: var(--radius-site);
  background-color: rgb(from var(--clr-bg-light) r g b / 0.75);
  margin-top: auto;
  backdrop-filter: blur(4px);
}

@media (max-width: 767px) {
  .douleurs-causes__tabs__textbox {
    text-align: center;
  }
}

/* Hide all tabs by default */
.tab-content {
  visibility: hidden;
  opacity: 0;
  height: 0;
  width: 0;
  position: relative;
  z-index: -1;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
/* Show the active tab */
.active {
  visibility: visible;
  opacity: 1;
  height: 100%;
  width: 100%;
  position: relative;
  z-index: 1;
  padding: var(--space-m);
  min-height: 40rem;
}

/*DOULEURS - PRISE EN CHARGE OSTEO */

.douleurs-parcours__grid {
  display: grid !important;
  position: relative;
  grid-template-columns: repeat(4, 1fr) !important;
  grid-template-rows: 1fr !important;
  gap: 2rem;
}

@media (min-width: 768px) and (max-width: 1024px) {
  .douleurs-parcours__grid {
    grid-template-columns: repeat(2, 1fr) !important;
    grid-template-rows: 1fr !important;
  }
}

@media (max-width: 768px) {
  .douleurs-parcours__grid {
    grid-template-columns: 1fr !important;
  }
}

.douleurs-parcours__card {
  align-items: center !important;
  text-align: center;
  gap: var(--space-m);
}

.douleurs-parcours__card__img {
  position: relative;
  width: 70%;
  padding: 7px;
}

.douleurs-parcours__card__img img {
  aspect-ratio: 1;
  width: 100%;
  height: auto;
  border-radius: var(--radius-full);
  object-fit: cover;
  object-position: center center;
  outline: 2px solid var(--clr-border-primary);
  outline-offset: 5px;
}

.douleurs-parcours__grid .douleurs-parcours__card:not(:last-child) .douleurs-parcours__card__img::after {
  content: "";
  position: absolute;
  top: 50%;
  right: calc(-1 * (42.857% + 1rem));
  width: calc(42.857%);
  height: 10rem;
  background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 135 23'%3E%3Cdefs%3E%3CclipPath id='clippath'%3E%3Crect width='135' height='23'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg style='clip-path: url(%23clippath);' fill='%23657dab'%3E%3Cg%3E%3Cpath d='M1.64,11.5c1.2.88,2.4,1.75,3.72,2.52l-1.15,1.92c-1.37-.82-2.68-1.75-3.94-2.74l1.37-1.7ZM9.73,16.26c1.48.66,3.06,1.26,4.65,1.75l-.66,2.08c-1.69-.49-3.33-1.1-4.86-1.81l.87-2.03ZM19.18,19.22c1.59.33,3.28.55,4.92.77l-.22,2.19c-1.75-.22-3.44-.44-5.14-.77l.44-2.19ZM29.08,20.32h1.64c1.13,0,2.26-.02,3.39-.05l.11,2.19c-1.17.07-2.33.11-3.5.11-.58,0-1.15-.02-1.69-.05l.05-2.19ZM44.05,19.11l.38,2.14c-1.69.33-3.44.55-5.08.77l-.27-2.19c1.64-.22,3.28-.44,4.97-.71ZM53.84,16.92l.6,2.14c-1.68.44-3.33.84-4.97,1.2l-.49-2.19c1.64-.37,3.26-.75,4.86-1.15ZM63.56,14.07l.66,2.14c-1.64.51-3.26,1-4.86,1.48l-.66-2.14c1.64-.47,3.26-.97,4.86-1.48ZM73.24,11.06l.66,2.14-4.81,1.48-.66-2.08,4.81-1.53ZM83.08,8.21l.6,2.14c-1.64.44-3.26.89-4.86,1.37l-.66-2.14c1.64-.47,3.28-.93,4.92-1.37ZM89.75,6.57c1.09-.26,2.2-.49,3.33-.71l.38,2.19c-1.09.22-2.17.44-3.22.66-.55.15-1.11.27-1.69.38l-.49-2.14c.58-.15,1.15-.27,1.69-.38ZM103.3,4.6l.11,2.19c-1.64.11-3.28.27-4.97.49l-.27-2.19c1.69-.22,3.44-.38,5.14-.49ZM108.44,4.44c1.75,0,3.5.05,5.14.22l-.16,2.19c-1.64-.11-3.28-.16-4.97-.22v-2.19ZM118.71,5.31c1.75.27,3.44.71,5.08,1.15l-.6,2.14c-1.53-.44-3.17-.82-4.86-1.1l.38-2.19ZM128.71,8.16c1.64.71,3.17,1.48,4.7,2.3l-1.09,1.92c-1.42-.77-2.9-1.53-4.48-2.14l.88-2.08Z' /%3E%3Cpath d='M134.84,12.7l-4.65-12.43-2.08.77,3.83,10.24-10.49,3.01.66,2.14,12.74-3.72Z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 10;
}

@media (min-width: 768px) and (max-width: 1024px) {
  .douleurs-parcours__grid .douleurs-parcours__card:nth-child(2) .douleurs-parcours__card__img::after {
    display: none;
  }
}

@media (max-width: 768px) {
  .douleurs-parcours__grid .douleurs-parcours__card .douleurs-parcours__card__img::after {
    display: none;
  }
}

.douleurs-parcours__card__content {
  padding: var(--space-m);
  flex-grow: 1 !important;
}

.douleurs-parcours__suivi {
  align-items: center !important;
  margin-top: calc(3 * var(--space-m));
  border: 1px solid var(--clr-border-primary);
  background-color: var(--clr-bg-primary-l-2);
  padding: var(--space-xl);
  border-radius: var(--radius-site);
  gap: var(--space-s);
}

.douleurs-parcours__suivi p {
  max-width: 60ch;
}

.douleurs-parcours__suivi svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 150px;
  height: auto;
}

.douleurs-parcours__suivi > div:nth-child(4) {
  position: absolute;
  top: -15%;
  right: 2%;
  width: 150px;
  height: auto;
}

.douleurs-parcours__suivi__img {
  height: 100%;
}

.douleurs-parcours__suivi__img svg {
  position: absolute;
  bottom: 0;
  height: 130%;
  width: 100%;
  margin-top: -30%;
}

@media (max-width: 767px) {
  .douleurs-parcours__suivi__img svg {
    margin-top: 0;
  }
}

/*DOULEURS - EFFICACITE */

.douleurs-efficacité {
  gap: 0;
}

.douleurs-efficacité > div:nth-child(2) {
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  overflow: hidden;
  color: var(--clr-text-light);
}

.douleurs-efficacité > div:nth-child(2)::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--clr-bg-primary);
  opacity: 0.9;
}

.douleurs-efficacité > div:first-child {
  background-color: var(--clr-bg-primary-l-2);
}

@media (min-width: 1025px) {
  .douleurs-efficacité > div:nth-child(2) {
    clip-path: polygon(92% 0, 100% 50%, 92% 100%, 0% 100%, 8% 50%, 0% 0%);
    padding: 10% 15%;
    width: 104%;
    margin-left: -4%;
  }
  .douleurs-efficacité > div:first-child {
    clip-path: polygon(92% 0, 100% 50%, 92% 100%, 0% 100%, 8% 50%, 0% 0%);
    padding: 10% 15%;
    width: 104%;
  }
}

@media (max-width: 1024px) {
  .douleurs-efficacité > div {
    clip-path: none;
    padding: var(--space-m);
  }
}

/*DOULEURS - FAQ */

.douleurs-faq__img {
  display: flex !important;
  justify-content: start !important;
}

.douleurs-faq__img svg {
  max-height: 20rem;
}