/* IPTV Abonnement page: Section 4 FAQ accordion. */
.subscription-faq {
  position: relative;
  isolation: isolate;
  padding-block: clamp(5.25rem, 7vw, 7.5rem);
  overflow: hidden;
  border-top: 1px solid rgb(43 217 215 / 14%);
  background:
    radial-gradient(circle at 50% 12%, rgb(27 203 202 / 8%), transparent 31rem),
    linear-gradient(180deg, #06111e 0%, #030a13 100%);
}

.subscription-faq::before,
.subscription-faq::after {
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  content: "";
  filter: blur(6rem);
  pointer-events: none;
}

.subscription-faq::before {
  top: 26%;
  left: -13rem;
  width: 27rem;
  height: 27rem;
  background: rgb(20 167 191 / 6%);
}

.subscription-faq::after {
  right: -14rem;
  bottom: -8rem;
  width: 29rem;
  height: 29rem;
  background: rgb(36 215 210 / 5%);
}

.subscription-faq__container {
  width: min(calc(100% - (2 * var(--container-gutter))), 56rem);
  max-width: none;
}

.subscription-faq__header {
  text-align: center;
}

.subscription-faq__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  margin: 0 0 1rem;
  color: #45e3df;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  line-height: 1.2;
}

.subscription-faq__eyebrow::before,
.subscription-faq__eyebrow::after {
  width: 1.8rem;
  height: 0.12rem;
  border-radius: 999px;
  background: rgb(65 225 220 / 72%);
  content: "";
}

.subscription-faq h2 {
  margin: 0;
  color: #fff;
  font-size: clamp(2.35rem, 2rem + 1.7vw, 3.75rem);
  font-weight: 840;
  letter-spacing: -0.045em;
  line-height: 1.05;
  text-wrap: balance;
}

.subscription-faq__list {
  display: grid;
  gap: 0.75rem;
  margin-top: clamp(2.5rem, 4vw, 3.5rem);
}

.subscription-faq__item {
  overflow: hidden;
  border: 1px solid rgb(70 211 213 / 18%);
  border-radius: 0.9rem;
  background:
    linear-gradient(105deg, rgb(17 45 64 / 96%), rgb(8 25 40 / 98%));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 3%);
  transition: border-color 180ms ease, background-color 180ms ease, box-shadow 180ms ease;
}

.subscription-faq__item.is-open {
  border-color: rgb(69 226 221 / 38%);
  background:
    radial-gradient(circle at 100% 0%, rgb(38 215 211 / 7%), transparent 18rem),
    linear-gradient(105deg, rgb(16 47 66 / 98%), rgb(7 25 40 / 100%));
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 4%),
    0 1rem 2.4rem rgb(0 0 0 / 12%);
}

.subscription-faq__question {
  margin: 0;
  font-size: inherit;
  line-height: inherit;
}

.subscription-faq__question button {
  display: grid;
  width: 100%;
  min-height: 4.7rem;
  padding: 1.15rem 1.35rem;
  border: 0;
  align-items: center;
  grid-template-columns: minmax(0, 1fr) 2rem;
  gap: 1rem;
  color: #f4f8fb;
  background: transparent;
  font-size: clamp(0.98rem, 0.95rem + 0.12vw, 1.06rem);
  font-weight: 760;
  line-height: 1.45;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.subscription-faq__question button:hover {
  color: #fff;
  background: rgb(50 224 220 / 5%);
}

.subscription-faq__question button:focus-visible {
  position: relative;
  z-index: 1;
  outline: 0.1875rem solid var(--color-focus, #7ff7f2);
  outline-offset: -0.3rem;
}

.subscription-faq__icon {
  position: relative;
  width: 2rem;
  height: 2rem;
  border: 1px solid rgb(75 229 224 / 32%);
  border-radius: 50%;
  background: rgb(38 211 207 / 7%);
  color: #51e8e3;
  transition: border-color 180ms ease, background-color 180ms ease, transform 180ms ease;
}

.subscription-faq__icon > span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.78rem;
  height: 0.11rem;
  border-radius: 999px;
  background: currentColor;
  transform: translate(-50%, -50%);
  transition: transform 180ms ease, opacity 180ms ease;
}

.subscription-faq__icon > span:last-child {
  transform: translate(-50%, -50%) rotate(90deg);
}

.subscription-faq__item.is-open .subscription-faq__icon {
  border-color: rgb(79 235 229 / 55%);
  background: rgb(38 211 207 / 13%);
  transform: rotate(180deg);
}

.subscription-faq__item.is-open .subscription-faq__icon > span:last-child {
  opacity: 0;
  transform: translate(-50%, -50%) rotate(90deg) scaleX(0);
}

.subscription-faq__answer {
  display: grid;
  overflow: hidden;
  grid-template-rows: 0fr;
  opacity: 0;
  visibility: hidden;
  transition: grid-template-rows 240ms ease, opacity 190ms ease, visibility 240ms step-end;
}

.subscription-faq__item.is-open .subscription-faq__answer {
  grid-template-rows: 1fr;
  opacity: 1;
  visibility: visible;
  transition: grid-template-rows 240ms ease, opacity 210ms ease, visibility 0s;
}

.subscription-faq__answer-inner {
  min-height: 0;
  overflow: hidden;
}

.subscription-faq__answer p {
  max-width: 47rem;
  padding: 0 4.35rem 1.4rem 1.35rem;
  margin: 0;
  color: #aab9cb;
  font-size: 0.91rem;
  line-height: 1.7;
}

@media (max-width: 47.99rem) {
  .subscription-faq {
    padding-block: 4.5rem;
  }

  .subscription-faq__container {
    width: min(calc(100% - (2 * var(--container-gutter))), 56rem);
  }

  .subscription-faq__list {
    margin-top: 2.25rem;
  }

  .subscription-faq__question button {
    min-height: 4.5rem;
    padding: 1rem;
    grid-template-columns: minmax(0, 1fr) 1.85rem;
    gap: 0.75rem;
  }

  .subscription-faq__icon {
    width: 1.85rem;
    height: 1.85rem;
  }

  .subscription-faq__answer p {
    padding: 0 1rem 1.2rem;
    font-size: 0.88rem;
  }
}

@media (max-width: 22rem) {
  .subscription-faq {
    padding-block: 4rem;
  }

  .subscription-faq h2 {
    font-size: 2.2rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .subscription-faq__item,
  .subscription-faq__icon,
  .subscription-faq__icon > span,
  .subscription-faq__answer {
    transition: none;
  }
}