/* =========================================================
   HOME — CONTACT CTA
========================================================= */

.home-contact-cta {
  position: relative;
  z-index: 25;
  isolation: isolate;

  overflow: hidden;

  padding:
    clamp(64px, 7vw, 120px)
    0;

  background: #080b0f;
  color: var(--studio-white);
}

.home-contact-cta__container {
  position: relative;
  z-index: 2;

  width: min(calc(100% - 96px), 1480px);
  margin-inline: auto;
}

/* =========================================================
   TEXTE D’ARRIÈRE-PLAN
========================================================= */

.home-contact-cta__background {
  position: absolute;
  left: 50%;
  bottom: -0.16em;
  z-index: 0;

  color: rgba(255, 255, 255, 0.025);

  font-size: clamp(180px, 27vw, 500px);
  font-weight: 800;
  line-height: 0.7;
  letter-spacing: -0.1em;
  text-transform: uppercase;
  white-space: nowrap;

  transform: translateX(-50%);

  pointer-events: none;
  user-select: none;
}

/* =========================================================
   EYEBROW
========================================================= */

.home-contact-cta__eyebrow {
  margin-bottom: clamp(28px, 4vw, 56px);

  display: flex;
  align-items: center;
  gap: 18px;

  color: rgba(255, 255, 255, 0.58);

  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.home-contact-cta__eyebrow-line {
  width: 42px;
  height: 1px;

  background: var(--studio-red);
}

/* =========================================================
   LAYOUT
========================================================= */

.home-contact-cta__layout {
  display: grid;
  grid-template-columns:
    minmax(0, 1.35fr)
    minmax(300px, 0.65fr);

  align-items: end;
  gap: clamp(40px, 6vw, 96px);
}

.home-contact-cta__heading,
.home-contact-cta__content {
  min-width: 0;
}

.home-contact-cta__title {
  max-width: 1050px;
  margin: 0;

  color: var(--studio-white);

  font-size: clamp(44px, 5.8vw, 88px);
  font-weight: 500;
  line-height: 0.91;
  letter-spacing: -0.07em;
}

.home-contact-cta__title span {
  display: block;

  color: rgba(255, 255, 255, 0.38);
}

.home-contact-cta__content {
  padding-bottom: 8px;
}

.home-contact-cta__content p {
  max-width: 510px;
  margin:
    0
    0
    clamp(22px, 2.8vw, 34px);

  color: rgba(255, 255, 255, 0.64);

  font-size: clamp(15px, 1.15vw, 18px);
  line-height: 1.75;
}

/* =========================================================
   LIEN PRINCIPAL
========================================================= */

.home-contact-cta__link {
  width: fit-content;

  display: inline-flex;
  align-items: center;
  gap: 26px;

  color: var(--studio-white);
}

.home-contact-cta__link-label {
  position: relative;

  padding-bottom: 8px;

  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.home-contact-cta__link-label::after {
  content: "";

  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;

  height: 1px;

  background: rgba(255, 255, 255, 0.52);

  transform-origin: right;
  transform: scaleX(1);

  transition:
    background-color 300ms ease,
    transform 450ms cubic-bezier(0.22, 1, 0.36, 1);
}

.home-contact-cta__link-icon {
  width: 64px;
  height: 64px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  flex-shrink: 0;

  border: 1px solid rgba(255, 255, 255, 0.26);
  border-radius: 50%;

  color: var(--studio-red);

  font-size: 24px;
  line-height: 1;

  transition:
    background-color 350ms ease,
    border-color 350ms ease,
    color 350ms ease,
    transform 450ms cubic-bezier(0.22, 1, 0.36, 1);
}

.home-contact-cta__link:hover .home-contact-cta__link-label,
.home-contact-cta__link:focus-visible .home-contact-cta__link-label {
  color: var(--studio-red);
}

.home-contact-cta__link:hover .home-contact-cta__link-label::after,
.home-contact-cta__link:focus-visible .home-contact-cta__link-label::after {
  background: var(--studio-red);

  transform-origin: left;
  transform: scaleX(0.35);
}

.home-contact-cta__link:hover .home-contact-cta__link-icon,
.home-contact-cta__link:focus-visible .home-contact-cta__link-icon {
  border-color: var(--studio-red);
  background: var(--studio-red);

  color: #fff;

  transform: rotate(45deg);
}

.home-contact-cta__link:focus-visible {
  outline: 2px solid var(--studio-red);
  outline-offset: 10px;
}

/* =========================================================
   TABLETTE
========================================================= */

@media (max-width: 1050px) {
  .home-contact-cta__container {
    width: min(calc(100% - 64px), 1480px);
  }

  .home-contact-cta__layout {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .home-contact-cta__title {
    max-width: 1000px;

    font-size: clamp(46px, 8vw, 76px);
  }

  .home-contact-cta__content {
    max-width: 700px;
  }
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {
  .home-contact-cta {
    min-height: 0;

    padding:
      72px
      0;
  }

  .home-contact-cta__container {
    width: min(calc(100% - 40px), 1480px);
  }

  .home-contact-cta__eyebrow {
    margin-bottom: 36px;
  }

  .home-contact-cta__layout {
    gap: 28px;
  }

  .home-contact-cta__title {
    font-size: clamp(40px, 11vw, 58px);
    line-height: 0.95;
  }

  .home-contact-cta__content p {
    margin-bottom: 26px;

    font-size: 15px;
    line-height: 1.68;
  }

  .home-contact-cta__link {
    width: 100%;

    justify-content: space-between;
  }

  .home-contact-cta__link-icon {
    width: 58px;
    height: 58px;
  }

  .home-contact-cta__background {
    bottom: -0.08em;

    font-size: clamp(140px, 46vw, 280px);
  }
}

/* =========================================================
   TRÈS PETITS ÉCRANS
========================================================= */

@media (max-width: 420px) {
  .home-contact-cta__container {
    width: min(calc(100% - 28px), 1480px);
  }

  .home-contact-cta__title {
    font-size: clamp(40px, 13vw, 56px);
  }

  .home-contact-cta__link-label {
    font-size: 10px;
  }

  .home-contact-cta__link-icon {
    width: 52px;
    height: 52px;

    font-size: 21px;
  }
}

/* =========================================================
   RÉDUCTION DES ANIMATIONS
========================================================= */

@media (prefers-reduced-motion: reduce) {
  .home-contact-cta *,
  .home-contact-cta *::before,
  .home-contact-cta *::after {
    scroll-behavior: auto !important;

    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}