body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* Section hero contenant l'animation et le titre principal */
.hero {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  gap: 50px;
  overflow: hidden;
  min-height: 700px;
  background: radial-gradient(circle at center, var(--accent-color-secondary), var(--accent-color) 15%, transparent 70%), var(--accent-color);
  background-size: 400% 400%;
  backdrop-filter: blur(20px);
  animation: pointGradient 20s linear infinite; 
}

/* Animation du fond de la section hero */
@keyframes pointGradient {
  0% {
    background-position: 60% 60%;
  }
  25% {
    background-position: 40% 40%;
  }
  50% {
    background-position: 45% 60%;
  }
  75% {
    background-position: 60% 40%;
  }
  100% {
    background-position: 60% 60%;
  }
}

.hero-titre {
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: var(--light-neutral);
  width: 50vw;
  padding-left: 20px;
}

#hero-animation {
  width: 50vw;
  max-width: 600px;
}

#hero-animation svg {
  height: 100%;
}

/***** Section à propos *****/
.a-propos {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 30px;
}

.a-propos-contenu {
  display: flex;
  align-items: center;
  gap: 50px;
}

.a-propos img {
  width: 100%;
  max-width: 300px;
  aspect-ratio: 1 / 1;
  border-radius: 30px;
}

/* Section des projets récents */
.projets-recents {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
}

#btn-voir-plus {
  width: 200px;
}

@media screen and (max-width: 768px) {
  .hero {
    flex-direction: column;
  }

  .hero::before,
  .hero::after {
    filter: blur(80px);
    opacity: 0.45;
  }

  .hero-titre {
    width: 100%;
    padding-left: 0;
  }

  .a-propos-contenu {
    flex-direction: column;
    gap: 30px;
    width: 90%;
  }
}