/******************/
/* Header Styling */
/******************/

.header {
  width: 1110px;
  height: 96px;
  margin: 0 auto;
}

.header__container,
.footer__container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  text-align: center;
  height: inherit;
}

.header-left > :first-child,
.footer_lower__left {
  align-self: flex-start; /* Aligne uniquement le premier enfant en haut */
}

.header-left > :last-child,
.footer_lower__left {
  align-self: flex-end; /* Aligne uniquement le premier enfant en haut */
}

.header-left,
.footer_lower__left {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1440px - 180px;
  gap: 58px;
}

.h1__scoot {
  display: flex;
  background-image: url("/ressources/Scoot.svg");
  background-repeat: no-repeat;
  align-items: center;
  width: 107.82px;
  height: 28.56px;
}

.h1__scoot:hover {
  cursor: pointer;
}

/*Menu du header*/

.header__nav ul {
  display: flex;
  list-style: none;
  justify-content: end;
  padding-bottom: 5px;
  color: #939caa;
  font-family: "Space Mono";
  font-size: 15px;
  font-weight: bold;
  text-decoration: none;
  gap: 15px; /* Adjust spacing as needed */

  .header__nav__item {
    margin: 0 15px;
  }

  .header__nav__item:hover {
    cursor: pointer;
  }

  .header__nav__item__link {
    text-decoration: none;
    color: #939caa;
    transition: color 0.3s ease;
  }

  .header__nav__item__link:hover {
    color: #fcb72b;
  }
}

/******************/
/* Footer Styling */
/******************/

footer {
  background-color: #495567;
  color: white;
  font-family: "Space Mono", monospace;
}

/* Upper Section */
.footer-upper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 300px;
  padding: 40px 165px;
  position: relative;
  overflow: hidden;
}

.footer-left h2 {
  font-size: 48px;
  line-height: 1.2;
  font-weight: 700;
}

.footer-right {
  display: flex;
  gap: 18px;
}

.app-link img {
  width: 159px;
  height: 56px;
}

.app-link img {
  width: 182px;
  height: 56px;
}

/* Lower Section */
.footer-lower {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 96px;
  padding: 0px 165px;
  background-color: #333a44;
}

.footer-links {
  display: flex;
  gap: 32px;
  align-items: center;
}

.footer-links a {
  text-decoration: none;
  color: #939caa;
  font-size: 15px;
  font-weight: 700;
  align-items: center;
}

.footer-links a:first-child {
  color: white;
  font-size: 34px;
  margin-right: 26px;
}

.footer-links-a:hover {
  color: #fcb72b;
  transition: color 0.3s ease;
}

.social-links {
  display: flex;
  gap: 18px;
}

.social-links a img {
  width: 24px;
  height: 24px;
}

.social-links a :hover {
  fill: #e5ecf4;
}

.social-links-facebook {
  background-image: url("/ressources/Facebook.svg");
  width: 24px;
  height: 24px;
  background-size: cover;
  transition: background-image 0.3s ease;
}

.social-links-facebook:hover {
  background-image: url("/ressources/Facebook2.svg");
  cursor: pointer;
}

.social-links-twitter {
  background-image: url("/ressources/Twitter.svg");
  width: 24px;
  height: 24px;
  background-size: cover;
  transition: background-image 0.3s ease;
}

.social-links-twitter:hover {
  background-image: url("/ressources/Twitter2.svg");
  cursor: pointer;
}

.social-links-instagram {
  background-image: url("/ressources/Instagram.svg");
  width: 24px;
  height: 24px;
  background-size: cover;
  transition: background-image 0.3s ease;
}

.social-links-instagram:hover {
  background-image: url("/ressources/Instagram2.svg");
  cursor: pointer;
}

/* Circle background */

.footer-upper .circles {
  display: flex;
  position: absolute;
  bottom: 0px;
  right: 0px;
  height: 160px;
}