/*
* -------
* ACCUEIL
* -------
*/

.accueilsec_title {
    position : absolute; 
    left: 180px; bottom: 20px; 
    color: white;
    animation: ease-in 2.5s accueiltitle-anim;
}

.accueilsec_title h1 {
    font-size: 6rem; line-height: 0.9;
    margin-bottom: 0; 
    font-weight: bolder;
}

.accueilsec_title p {
    font-size: 2rem;
}

.accueilsec_mizu-div {
    position : absolute; 
    left: 20px; bottom: 50px; 
    height: 250px; width: 150px; 
    background: url(../assets/icons/mizu.png) no-repeat center center; background-size: contain;
    animation: ease-in 1s accueiltitle-anim;
}

@keyframes accueiltitle-anim {
    from { opacity: 0;  }
    to   { opacity: 1;  }
}

/*
* -------------------------
* COMMANDER ET INFORMATIONS
* -------------------------
*/

.ordersec_div {
    width: 100%; height: 100%; 
    flex: 1; display: flex;
}

.ordersec_div-buy {
    width: 50%; display: flex;
}

.ordersec_div-faqsimulate {
    width: 50%; 
    display: flex; flex-direction: column;
}

.ordersec_buttons {
    width: 100%; 
    margin: 30px; 
    background-color: rgba(0, 0, 0, 0.7); 
    display: flex; flex-direction: column; justify-content: center; align-items: center; 
    border-radius: 30px; border-color: white; border-width: 10px; border-style: solid;
    color: white; text-align: center; /* Pour la police d'écriture blanche */
    transition: 0.3s;
}

.ordersec_buttons:hover {
    transform: scale(0.98);
    cursor: pointer;
}

.ordersec_buy-button {
    width: 100%; 
    margin: 30px; 
    background: linear-gradient(0deg, rgba(0,0,0,0.5690476874343487) 0%, rgba(43,85,143,1) 64%); background-size: 100% 1100%;
    border-radius: 30px; 
    display: flex; flex-direction: column; justify-content: center; align-items: center; 
    border-color: white; border-width: 10px; border-style: solid; 
    color: white;
    transition: 1s; animation: 3s ease-in 1s infinite alternate buybutton-anim;
}

.ordersec_buy-button:hover {
    transform: scale(0.98);
    box-shadow: 0px 0px 15px 7px #FFFFFF;
    background: rgba(43,85,143,1); 
    cursor: pointer;
}

.ordersec_buy-button-disabled {
    width: 100%; 
    margin: 30px; 
    background: rgba(0, 0, 0, 0.7); 
    border-radius: 30px; 
    display: flex; flex-direction: column; justify-content: center; align-items: center; 
    border-color: white; border-width: 5px; border-style: solid; 
    color: white;
    opacity: 0.8;
}

.ordersec_round-icon {
    background-color: #2B558F; 
    background-position: center; background-size: 90px 90px;
    width: 100px; height: 100px; padding: 10px; margin-bottom: 10px;
    border-radius: 90px; border-width: 5px; border-color: white; border-style: solid;
}

@keyframes buybutton-anim {
    from { background-position: 0%;  }
    to   { background-position: 0% 100%;  }
}

/*
* --------
* A PROPOS
* --------
*/

.apropossec_div {
    width: 100%; height: 100%; flex: 1; display: flex;
}

.apropossec_div-img {
    width: 60%; display: flex;
}

.apropossec_img {
    width: 100%; 
    margin: 30px; 
    background-size: cover;
    background-image: url('../assets/nekopaintpresentation.jpg');
    background-repeat: no-repeat;
    background-position: center center;
    border-radius: 30px; 
    display: flex; flex-direction: column; justify-content: center; align-items: center; 
    box-shadow: inset 0px 0px 26px 10px rgba(0,0,0,0.75);
}

.apropossec_text {
    display: flex; flex: 1; flex-direction: column; 
    margin: 30px; 
    color: white;
}

/*
* %%%%%%%%%%
* RESPONSIVE
* %%%%%%%%%%
*/

@media only screen and (max-width: 500px) {
    .accueilsec_title h1 {
        font-size: 4.1rem; line-height: 0.9;
        margin-bottom: 0; 
    }
    
    .accueilsec_title p {
        font-size: 1.2rem;
    }

    .accueilsec_mizu-div {
        visibility: hidden;
    }

    .accueilsec_title {
        left: 10px; bottom: 10px; 
    }
}

@media only screen and (max-width: 700px) and (min-width: 500px) {
    .accueilsec_title {
        left: 140px; bottom: 20px; 
    }
    
    .accueilsec_title h1 {
        font-size: 5rem; line-height: 0.9;
        margin-bottom: 0; 
    }
    
    .accueilsec_title p {
        font-size: 1.5rem;
    }

    .accueilsec_mizu-div {
        left: 20px; bottom: 50px; 
        height: 200px; width: 120px; 
    }
}

@media only screen and (max-width: 900px)  { 
    .ordersec_div {
        flex-direction: column;
    }

    .apropossec_div {
        flex-direction: column;
    }

    .ordersec_div-faqsimulate {
        width: 100%;
        margin-bottom: 50px;
    }

    .ordersec_div-buy {
        width: 100%;
        margin-bottom: 30px;
    }

    .ordersec_buttons h1 {
        font-size: 2rem;
    }

    .ordersec_buttons {
        margin-top: 10px; margin-bottom: 10px;
    }

    .ordersec_round-icon {
        margin-top: 20px;
    }

    .apropossec_div-img {
        width: 100%;
        height: 300px;
    }

    .apropossec_img {
        width: 100%; 
        background-size: cover;
    }
}