.site-footer {
  @apply bg-gray;
  .site-footer-grid-container {
    @apply grid grid-cols-4 px-8 gap-8  mx-auto;
    /* max-width: 2000px; */
    max-width: 1440px;
  }
  &__informative-message {
    @apply bg-primary text-white p-8 col-span-4 rounded-3xl flex justify-center;
    img {
      @apply mr-2;
    }
  }

  &__partenaires,
  &__metiers-patrimoine,
  &__infos-contact,
  &__navigation-menu {
    @apply p-8 bg-white rounded-3xl;
  }
  .content-intertitle {
    @apply font-bold text-lg;
  }

  &__infos-contact {
    @apply col-span-4 lg:col-span-1 grid gap-6;
    .external-link {
      @apply pt-2 mt-1;
    }
  }
  &__navigation-menu {
    @apply col-span-4 lg:col-span-3;
    .footer-menu-renovateur {
      @apply flex gap-4 bg-secondary w-full justify-center items-end;
      .sub-menu {
        @apply hidden;
      }
    }

    .extra_details {
      @apply flex flex-wrap items-center justify-between gap-4;

      .sitemap-btn,
      .metiers-patrimoine-btn {
        @apply !py-3 !px-5;
      }

      .metiers-patrimoine-btn {
        @apply flex items-center justify-center;

        &::before {
          @apply w-6 h-6 mr-2 block bg-contain bg-center  bg-no-repeat content-[''];
          background-image: url('../resources/img/pictogrammes/Homegrade_artisans-patrimoine.svg');
        }
      }

      .social-networks {
        @apply flex gap-4 ml-auto;
      }
    }
  }
  &__partenaires {
    @apply flex flex-wrap col-span-4 justify-center items-center gap-x-12;
    .content-intertitle {
      @apply w-full text-center;
    }
    a img {
      @apply inline-block;
    }
  }

  &__metiers-patrimoine {
    @apply col-span-4 md:col-span-2;
  }

  .footer-credits {
    @apply justify-between items-end container mx-auto px-8 lg:px-16
    py-8
    gap-y-12
    md:gap-y-8
    flex
    flex-col
    lg:flex-row
    items-center
    lg:items-end;
    max-width: 2000px;
  }
  .website-credits {
    @apply col-span-4 xl:col-span-2 text-left w-fit 
    font-semibold
    flex  
    gap-3 text-sm xl:mx-0;
    .homegrade-sigle-icon {
      @apply h-12 w-auto;
    }
    .made-by {
      @apply w-fit flex justify-center items-center text-neutral-600 font-semibold text-xs pt-1;
      svg {
        transition: all 0.5s;
        @apply w-3 h-3 mx-1 fill-secondary;
        animation: fade-in-out 2.5s linear 2;
      }
      a {
        @apply underline pl-1;
      }
      @keyframes fade-in-out {
        50% {
          opacity: 0;
        }
      }
    }
    &:hover {
      .made-by svg {
        @apply animate-pulse;
        transform: scale(1.2);
      }
    }
  }

  .legal-credits {
    @apply text-center col-span-4 xl:col-span-2 flex flex-col md:flex-row justify-end items-center md:items-end gap-4 !text-sm;

    &__legal-page-link {
      @apply font-semibold relative block px-2 rounded-md;
      &:hover {
        @apply bg-neutral-200;
      }
    }
  }
  @screen md {
    .legal-credits__legal-page-link + .legal-credits__legal-page-link {
      &:before {
        @apply mr-3 h-4 bg-neutral-900 absolute;
        transform: translateY(3px);
        display: inline-block;
        content: '';
        width: 1px;
        left: -0.5rem;
        content: '';
      }
    }
  }
}
