.icon-money path {
    fill: #f7bb0d; /* Change la couleur de l'icône */
  }
  .icon-money:hover path {
    fill: gold; /* Change la couleur au survol */
  }
  

  .icon-container {
    display: inline-block;
    cursor: pointer;
  }
  
  .icon {
    transition: transform 0.4s ease, fill 0.4s ease;
    will-change: transform, fill;
    fill: white; /* Couleur initiale */
}
  
  .icon.clicked {
    transform: scale(0.7);
    fill: #f7bb0d; /* Changement de couleur */
  }
  
  
  .icon2-container {
    display: inline-block;
    cursor: pointer;
  }
  
  .icon2 {
    transition: transform 0.4s ease, fill 0.4s ease;
    will-change: transform, fill;
    fill: #f7bb0d; /* Couleur initiale */
  }
  
  .icon2.clicked {
    transform: scale(0.7);
    fill: white; /* Changement de couleur */
  }
  
  .menu-container {
    display: inline-block;
    cursor: pointer;
  }
  
  .menu {
    transition: transform 0.4s ease, fill 0.4s ease;
    will-change: transform, fill;
    fill: #ffffff; /* Couleur initiale */
  }
  
  .menu.clicked {
    transform: scale(0.7);
    fill: #f7bb0d; /* Changement de couleur */
  }

/* --- Les icones --- */
.icons-top {
  display: flex;
  position: relative;
  top: 0px;
  right: 10px;
  gap: 20px;
}

.icon-profile {
  width: 35px;
  height: 35px;
  background-color: white;
  -webkit-mask-image: url(../images/icons/profile.svg);
  mask-image: url(../images/icons/profile.svg);
  mask-size: contain;
  mask-repeat: no-repeat;
}

.icon-setting {
  width: 35px;
  height: 35px;
  background-color: #ffe598;
  -webkit-mask-image: url(../images/icons/setting.svg);
  mask-image: url(../images/icons/setting.svg);
  mask-size: contain;
  mask-repeat: no-repeat;
}

.icon-home {
  background-color: white;
  -webkit-mask-image: url('../images/icons/home.svg');
  mask-image: url('../images/icons/home.svg');
  mask-size: contain;
  mask-repeat: no-repeat;
}

.icon-studio {
  background-color: white;
  -webkit-mask-image: url('../images/icons/career.svg');
  mask-image: url('../images/icons/career.svg');
  mask-size: contain;
  mask-repeat: no-repeat;
}

.icon-social {
  background-color: white;
  -webkit-mask-image: url('../images/icons/social.svg');
  mask-image: url('../images/icons/social.svg');
  mask-size: contain;
  mask-repeat: no-repeat;
}

.icon-shop {
  background-color: white;
  -webkit-mask-image: url('../images/icons/shop.svg');
  mask-image: url('../images/icons/shop.svg');
  mask-size: contain;
  mask-repeat: no-repeat;
}

.icon-home, .icon-studio, .icon-social, .icon-shop {
  background-color: #ffffff;
  transition: transform 0.2s ease-in-out, background-color 0.2s ease-in-out;
}

/* Effet au clic */
.menu-item:active div {
  transform: scale(0.8);
  background-color: #ffe598; /* Jaune doré */
}

/* Changement de couleur lorsqu'un lien est actif */
.menu-item.active div {
  background-color: #ffe598; /* Jaune doré */
}

  /* Safari Fix */
@supports (-webkit-touch-callout: none) {
  .icon, .icon2, .menu {
      transition: -webkit-transform 0.4s ease, fill 0.4s ease;
  }
}