/* Menu */

@font-face {
    font-family: 'Etherea';
    src: url('typo/cirkus/Cirkus.ttf') format('truetype');
}

@font-face{
    font-family: 'Roboto';
    src: url(typo/Roboto/Roboto-Regular.ttf) format('truetype');
}
@font-face{
    font-family: 'Texte';
    src: url(typo/ABeeZee/ABeeZee-Regular.ttf) format('truetype');
}

*{
    margin: 0;
    padding: 0;
}

html,body{
    cursor: none;
    scroll-behavior: smooth;
    overflow-x: hidden;
}

a{
    cursor: none;
}

p{
    font-family: 'Texte';
}

#move{
    height: 50px;
    width: 50px;
    border-radius: 10px;
    background-image: url(illu/cursor/cursor_artefact.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    position: fixed;
    z-index: 100;
}

#fond-menu{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1; 
}

.menu{
    width: 100%;
    min-height: 100vh;
    background-color: rgba(255, 180, 251, 0.205);
    backdrop-filter: blur(1px);
    display: flex;
    flex-direction: column;
    /* background-image: url(decor/décors-prairie.png); */
    z-index: 1;
    position: relative;
    justify-content: space-between;
}

.logo-menu{
    width: 65%;
    margin-top: 50px;
    margin-left: 50px;
    transition: all 1s;
    display: flex;
    justify-content:space-around;
    align-items: center;
}

.logo-menu img{
    width: 75%;
}
.point{
    font-size: 40px;
    font-family: 'Etherea';
    color: rgb(122, 64, 160);
    letter-spacing: 5px;
    margin-top: 20px;
}
#video-games{
    color: rgb(122, 64, 160);
    font-family: 'Etherea';
    font-weight: normal;
    font-size: 40px;
    letter-spacing: 5px;
    margin-top: 20px;
}

.content-menu{
    font-family: 'Etherea';
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.bouton-menu {
    animation: flotter 3s ease-in-out infinite;
    text-decoration: none;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    background-size:contain;
    background-repeat: no-repeat;
    background-position: center center;
    width: 50%;
    height: 100px;
    margin-top: 50px;
    -webkit-transition: all 0.4s ease;
    transition: all 0.4s ease;
    /* background-color: blueviolet; */
}
.bouton-menu h1{
    font-weight: lighter;
    font-size: 75px;
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    font-family: 'Etherea';
}
.bouton-menu:hover{
    margin-bottom: 25px;
}
.bouton-menu:hover h1{
    font-size: 100px;
}

@keyframes flotter {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-5px);
    }
}

#discover{ 
    animation-delay: 0s;
    background-image: url(illu/bouton-menu/play.png);
}
#faq{ 
    animation-delay: 0.2s; 
    background-image: url(illu/bouton-menu/level.png);
}
#contact{ 
    animation-delay: 0.4s; 
    background-image: url(illu/bouton-menu/settings.png);
}
#quit{ 
    animation-delay: 0.6s; 
    background-image: url(illu/bouton-menu/quit.png);
}

.footer-menu{
    margin-top: 90px;
    width: 100%;
    height: 250px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    color: white;
    background-image: url(illu/header/footer.png);
    background-size: 100% 100%;
    background-position: center center;
    background-repeat: no-repeat;
}

.project{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.project p{
    font-family: 'Texte';
    text-align: center;
    font-size: 20px;
}

.reseau{
    display: flex;
    width: 15%;
    justify-content: space-around;
    align-items: center;
}

.reseau a{
    width: 60px;
    height: 60px;
}
.reseau a img{
    width: 100%;
    height: 100%;
}

.content-mail{
    display:flex;
    align-items: center;
    width: 50%;
    height: 50px;
    text-decoration: none !important;
}
.content-mail p{
    color: white;
    font-family: 'Texte' ;
}
.content-mail img{
    width: 30px;
    margin-right: 15px;
}
#signature{
    margin-top: 10px;
}

.mention{
    width: 15%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.mention a{
    width: 60px;
    height: 60px;
}

.mention a img{
    width: 100%;
    height: 100%;
}

/* FAQ */

/* Header  */

header{
    position: fixed;
    width: 100%;
    height: 80px;
    /* background-color: #62438f; */
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 100;
    margin-top: 20px;
}

.echap{
    display: block;
    margin-left: 20px;
    width: 75px;
    height: 75px;
}
.echap img{
    width: 100%;
}
.container-faq{
    width: 100%;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}
.content-faq{
    /* background-color: rgba(147, 65, 158, 0.267); */
    width: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    /* backdrop-filter: blur(2px); */
    border-radius: 25px;
    height: 100%;
}
.content-faq h1{
    font-family: 'Etherea';
    font-weight: normal;
    color:#ffffff;
    font-size: 200px;
    text-shadow: rgb(88, 22, 119)  0px 0px 5px;
    animation: flotter 3s ease-in-out infinite;
    margin-top: -100px;
}

.faq-item {
    width: 100%;
    padding: 5px;
    display: flex;
    flex-direction: column;
    margin-top: 25px;
    border-radius: 15px;
    background-color: rgba(134, 52, 182, 0.815);
    border: 2px solid #b278ff;

}

.faq-question {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.faq-question h2{
    font-family: 'Texte';
    color: white;
    font-size: 20px;
    margin-left: 5px;
}
.faq-arrow{
    width: 50px;
    height: 50px;
    background-image: url(illu/arrow/direction_right.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    transform: rotate(0deg);
    transition: all 0.5s ease;
}

.faq-answer {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transform: translateY(-10px);
    transition: all 0.5s ease-in-out;
    color: #ffffff;
    text-shadow: #f2b3ff 0px 0px 5px;
    font-family: 'Texte';
    font-size: 16px;
    margin-left: 25px;
}

.faq-item.active .faq-answer {
    max-height: 200px; 
    opacity: 1;
    transform: translateY(0);
    margin-top: 10px;
}
.faq-item.active .faq-arrow{
    transform: rotate(90deg);
}

.questions{
    color: white;
    font-family: 'Texte';
    font-size: 20px;
    margin-top: 25px;
    text-shadow:#601781 0px 0px 5px;
    color: #ffffff;
    text-decoration: none;
    margin-bottom: 50px;
}

.questions::after{
    content: "";
    display: block;
    width: 100%;
    height:10px;
    background-color:#601781;
    margin-top: -10px;
}

/* Contact */
.container-contact{
    width: 100%;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}
.content-contact{
    /* background-color: rgba(147, 65, 158, 0.267); */
    width: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    /* backdrop-filter: blur(2px); */
    border-radius: 25px;
}
.content-contact h1{
    font-family: 'Etherea';
    font-weight: normal;
    color:#ffffff;
    font-size: 200px;
    text-shadow: rgb(88, 22, 119)  0px 0px 5px;
    animation: flotter 3s ease-in-out infinite;
}

.contact-form{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 100%;
}

.contact-form input, textarea, button{
    width: 100%;
    padding: 15px;
    margin-bottom: 20px;
    font-family: 'Texte';
    font-size: 16px;
    color: #ffffff;
    background-color: rgba(134, 52, 182, 0.5);
    border: 2px solid #b278ff;
    border-radius: 10px;
    outline: none;
    transition: 0.5s ease;
}

.contact-form input:focus, textarea:focus {
    border-color: #e1b3ff;
    background-color: rgba(170, 70, 184, 0.2);
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
  color: white;
  opacity: 1; /* pour éviter qu’il soit semi-transparent sur certains navigateurs */
}

.success {
    color: rgb(255, 255, 255); 
    margin-bottom: 20px;
    font-weight: bolder;
    display: inline-block; 
    z-index: 1;
    text-shadow: rgb(88, 22, 119)  0px 0px 5px;
}

.success::after {
    content: "";
    display: block;
    width: 100%;
    height:5px;
    background-color: #38b438;
    margin-top: -5px;
}
.error {
    color: rgb(255, 255, 255); 
    margin-bottom: 20px;
    font-weight: bolder;
    display: inline-block; 
    z-index: 1;
    text-shadow: rgb(88, 22, 119)  0px 0px 5px;
}

.error::after {
    content: "";
    display: block;
    width: 100%;
    height:5px;
    background-color: #d43636;
    margin-top: -5px;
}

.contact-form button{
    cursor: none;
    width: 25% !important;
    background-color: rgb(134, 52, 182);
}

/* Terms */

.content-mention{
    width: 100%;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background-color: #601781;
}

.content-mention #mention h1{
    text-align: center;
    color: white;
    font-family: 'Texte';
    font-size: 35px;
    margin-top: 150px;
    margin-bottom: 50px;
}
.content-mention #mention h2{
    color: white;
    font-family: 'Texte';
    font-size: 25px;
    margin-bottom: 15px;
}
.content-mention #mention p,
.content-mention #mention ul,
.content-mention #mention li,
.content-mention #mention a{
    color: white;
    font-family: 'Texte';
    font-size: 14px;
    margin-bottom: 15px;
    list-style: none;
}

#mention{
    width: 75%;
}


/* Responsive Menu */

@media screen and (max-width:1500px) {
    .menu{
        align-items: center;
    }
    
    .logo-menu{
        margin-left: 0;
        width: 75%;
        flex-direction: column;
    }
    .logo-menu img{
        width: 100%;
    }
    .point{
        display: none;
        margin-top: 0px;
    }
    #video-games{
        font-size: 40px;
        margin-top: 0px;
    }
    .bouton-menu{
        height: 90px;
        margin-top: 50px;
    }

    .bouton-menu h1{
        font-size: 75px;
    }

    .bouton-menu:hover h1{
        font-size: 85px;
    }
    .content-faq h1{
        margin-top: 0;
    }
}
@media screen and (max-width:1250px) {
    .bouton-menu{
        width: 50%;
    }
    .bouton-menu h1{
        font-size: 70px;
    }

    .bouton-menu:hover h1{
        font-size: 80px;
    }
    .content-contact{
        width: 75%;
    }
    .reseau{
        width: 15%;
    }
    .reseau a{
        width:50px;
        height: 50px;
    }
    .mention a{
        width: 50px;
        height: 50px;
    }
    .project p{
        font-size: 14px;
    }
    .content-mail img{
        width: 20px;
    }
}
@media screen and (max-width:1000px) {

    .logo-menu{
        width: 90%;
    }
    .bouton-menu{
        width: 60%;
        height: 110px;
        margin-top: 25px;
    }
    .bouton-menu h1{
        font-size: 70px;
    }

    .bouton-menu:hover h1{
        font-size: 80px;
    }
    .footer-menu{
        flex-direction: column;
        height: 350px;
        justify-content: center;
    }
    .reseau{
        width: 25%;
        margin-top: 25px;
    }
    .project{
        margin-top: 25px;
    }
    .mention{
        width: 100%;
        margin-top: 25px;
    }
    .content-faq{
        width: 90%;
    }
}
@media screen and (max-width:800px) {

    .bouton-menu{
        width: 75%;
    }
    .bouton-menu h1{
        font-size: 60px;
    }

    .bouton-menu:hover h1{
        font-size: 70px;
    }
    .reseau{
        width: 30%;
    }
    .footer-menu{
        background-image: url(illu/header/footer_tel.png);
    }
    .content-contact{
        width: 90%;
    }

}
@media screen and (max-width:620px) {

    .bouton-menu{
        height: 90px;
    }
    #video-games{
        font-size: 30px;
    }
    .reseau{
        width: 35%;
    }
    .project p{
        font-size: 14px;
    }
    .faq-question h2{
        font-size: 16px;
    }
    .faq-answer p{
        font-size: 14px;
    }
    .content-contact h1{
        font-size: 150px;
    }
    .content-faq h1{
        margin-top: 100px;
    }

}
@media screen and (max-width:500px) {

    .logo-menu{
        width: 95%;
    }
   
    .bouton-menu{
        width: 90%;
        height: 75px;
    }
    .bouton-menu h1{
        font-size: 50px;
    }

    .bouton-menu:hover h1{
        font-size: 55px;
    }
    .reseau a{
        width: 40px;
        height: 40px;
    }
    .mention a{
        width: 40px;
        height: 40px;
    }
    .project p{
        font-size: 12px;
    }
    .content-faq h1{
        font-size: 150px;
    }
    .questions{
        font-size: 16px;
    }
    .contact-form button {
        width: 50% !important;
    }
    .content-contact h1{
        margin-top: 100px;
        margin-bottom: 25px;
    }

}
@media screen and (max-width:420px) {

    .bouton-menu{
        height: 65px;
    }
    .bouton-menu h1{
        font-size: 40px;
    }

    .bouton-menu:hover h1{
        font-size: 45px;
    }
    .footer-menu p{
        font-size: 12px;
    }
    .footer-menu{
        background-image: url(illu/header/footer_tel_420.png);
        margin-top: 50px;
    }
    .reseau{
        width: 75%;
    }
    .content-mail{
        justify-content: center;
    }
    .faq-question h2{
        font-size: 14px;
    }
    .faq-answer p{
        font-size: 12px;
    }
    .questions{
        font-size: 14px;
    }
    .content-contact h1{
        font-size: 100px;
    }
    .contact-form input, textarea, button{
        font-size: 14px;
    }
    .content-mention #mention h1{
        font-size: 25px;
    }
    .content-mention h2{
        font-size: 20px;
    }
    .content-mention #mention p,
    .content-mention #mention ul,
    .content-mention #mention li,
    .content-mention #mention a{
        font-size: 12px;
    }

}
@media screen and (max-width:340px) {

    .bouton-menu{
        height: 50px;
    }
    .bouton-menu h1{
        font-size: 30px;
    }

    .bouton-menu:hover h1{
        font-size: 35px;
    }
    #video-games{
        font-size: 20px;
    }
    .content-mail{
        width: 75%;

    }
    .footer-menu{
        margin-top: 0;
    }
    .content-contact{
        width: 85%;
    }
    .content-mention #mention h1{
        font-size: 20px;
    }
    .content-mention h2{
        font-size: 16px;
    }
    .content-mention p,ul,li,a{
        font-size: 10px;
    }
}
@media screen and (max-width:240px) {

    .bouton-menu{
        height: 40px;
    }
    .bouton-menu h1{
        font-size: 25px;
    }

    .bouton-menu:hover h1{
        font-size: 30px;
    }
    #video-games{
        font-size: 14px;
    }
    .content-mail{
        width: 95%;
    }
    .reseau{
        width: 95%;
    }
    .footer-menu p{
        font-size: 10px;
    }
    .content-faq h1{
        font-size: 100px;
    
    }
    .faq-question h2{
        font-size: 12px;
    }
    .faq-answer p{
        font-size: 10px;
    }
    .questions{
        font-size: 12px;
    }
    .contact-form input, textarea, button{
        font-size: 12px;
    }
    .content-contact{
        width: 80%;
    }
    .content-contact h1{
        font-size: 80px;
    }

}
@media screen and (max-width:180px) {

    .bouton-menu{
        height: 25px;
    }
    .bouton-menu h1{
        font-size: 20px;
    }

    .bouton-menu:hover h1{
        font-size: 25px;
    }
    .content-mail img{
        width: 15px;
        margin-right: 10px;
    }
    .content-faq h1{
        font-size: 80px;
    
    }
    .faq-question h2{
        font-size: 10px;
    }
    .faq-answer p{
        font-size: 10px;
    }
    .questions{
        font-size: 10px;
    }
    .content-contact h1{
        font-size: 60px;
    }
}
@media screen and (max-width:110px) {

    .bouton-menu{
        height: 20px;
    }
    .bouton-menu h1{
        font-size: 14px;
    }

    .bouton-menu:hover h1{
        font-size: 16px;
    }
      .footer-menu{
        font-size: 9px;
    }
}
@media screen and (max-width:70px) {

    .bouton-menu{
        height: 20px;
    }
    .bouton-menu h1{
        font-size: 12px;
    }

    .bouton-menu:hover h1{
        font-size: 14px;
    }
}