.LaLuneBleue {
	color: #FFF;
	/*font-family: 'LaLuneBleue', sans-serif;*/
}
.LaLuneBleueBack {
	background-color: #2c2a4f;
}
.Améthyste {
	color: #FFF;
	font-family: 'Amethyste', sans-serif;
    text-shadow: #C68EFD 1px 1px;
}

.Antidottattoo {
	color: #FFF;
	font-family: 'Antidottatoo', sans-serif;
    text-shadow: #00D7FF 1px 1px;
    font-size: xx-large;
}
.Rectus {
	color: #fff;
	font-family: 'Rectus', sans-serif;
    text-shadow: rgb(231, 98, 50) 1px 1px;
    font-size: xx-large;
}
@font-face {
    font-family: "Amethyste";
    src: url("webfonts/Amethyste.ttf");
}
@font-face {
	font-family: "Rectus";
    src: url("webfonts/Rectus.otf");
}
@font-face {
	font-family: "Antidottatoo";
    src: url("webfonts/Antidottatoo.otf");
}
@font-face {
	font-family: "LaLuneBleue";
    src: url("webfonts/LaLuneBleue.ttf");
}


 /* Menu */
    .menu-container {
        display: flex;
        flex-direction: column;
        flex-wrap: wrap; /* Permet d'aller à la ligne si nécessaire */
        justify-content: space-around;
        gap: 20px; /* Espacement entre les images */
    }

    .menu-image-container {
      position: relative;
      width: 150px;
      height: 85%;
      overflow: hidden;
    }

    .menu-image-wrapper {
      position: relative;
      width: 100%;
      height: 100%;
    }

    /* Effet au survol */
    .menu-image-container:hover .menu-image-overlay {
      filter: grayscale(0); /* Retire le noir et blanc */
    }

    .menu-image-overlay {
      position: absolute;
      top: 0;
      left: 0;
      object-fit: cover;
      filter: grayscale(100%);
      transition: filter 0.3s ease;
      z-index: 1;
    }

    .menu-image-main {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      z-index: 2;
    }

    .menu-image-container:hover .menu-image-overlay {
      filter: grayscale(0);
    }
    .menu-image-main:hover {
        content: url('assets/images/baroque_gold-blue.png');
    }

    /* Responsive Design */
    @media (max-width: 768px) {
      .info-container {
        min-height: 150px;
        padding: 15px;
      }

      .menu-image-container {
        height: 200px;
      }
    }

    @media (max-width: 480px) {
      .info-container {
        min-height: 120px;
      }

      .menu-image-container {
        height: 200px;
      }
    }