body{
    font-family: 'Lucida Grande', sans-serif;
    margin: 0;
    padding: 0;
    }

    /**MENU**/
#headerMenu{
    height: 90px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
}

#headerMenu .headerLogo img{
    height: 90px;
}

#headerMenu .menu a{
    font-weight: bold;
    font-size: 16px;
    color: black;
    margin-right: 15px;
}

#headerMenu a:hover{
    color: #FE7763;
}

/**SECTION HAUT**/

.haut{
display: flex;
justify-content: space-between;
}

.haut img{
width: 720px;
height: 816px;
margin-top: 129px;
}

.haut .hautTexte{
display: flex;
flex-direction: column;
justify-content: center;
margin-right: 120px;
margin-top: 187px;
padding: 20px;
}

.haut h1{
color: #FE7763;
font-weight: bold;
font-size: 48px;
line-height: 38px;
text-align: right;
}

.titre{
font-size: 72px;
line-height: 62px;
}

.haut p{
width: 580px;
color: #4E5565;
font-size: 25px;
line-height: 36px;
text-align: justify;
}


/**MEZZA PAGINA**/

.milieu{
background:rgba(189, 189, 189, 0.3);
height: 385px;
display: flex;
justify-content: space-around;
align-items: center;
}

.milieu h2{
font-family: Impact, sans-serif;
font-weight: normal;
font-size: 40px;
color: #FE7763;
line-height: 40px;
}

/** EN BAS**/

.bas .basTexte{
display: flex;
justify-content: space-between;
}

.bas .basTexte p{
color: #4E5565;
font-weight: normal;
font-size: 25px;
line-height: 53px;
text-align: justify;

}

.corail{
color: #FE7763;
font-weight: bold;
}

.bas .basTexte img{
box-shadow: -400px 216px rgba(254, 119, 99, 0.3);
}

/**idea**/

.bas .idea{
width: 540px;
height: 120px;
transform: translate(120%, -350%);
}

.bas .idea h2{
color: #FFFFFF;
font-family: Impact;
font-weight: normal;
font-size: 40px;
text-align: right;
}




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

    #headerMenu img{
    display: 3%;
    margin-left: 0;
    }

    #headerMenu{
    height: auto;
    width: auto;
    display: flex;
    flex-direction: column;
    position: relative;
    margin-left: 0;
    }
    


    #headerMenu .menu a{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0 20px 0;
    margin-right: 0;

    }
  

    /*** HAUT**/

    .haut{
    display: flex;
    flex-direction: column;
    
    }
    
    .haut img{
        height: auto;
        width: 100%;
        margin: 0;
    }
    .haut .hautTexte{
    width: 90%;
    justify-content: left;
    margin: 5px;
    padding: 0;

    }
    
    .haut .titre{
    font-size: 18px;
    line-height: 15px;
    }

    .haut h1{
    width: 100%;
    font-size: 18px;
    line-height: 15px;
    margin: 5px;
    padding: 5px;
    }

    .haut .hautTexte p{
    width: 100%;
    font-size: 16px;
    line-height: 17px;
    margin: 5px;
    padding: 5px;
    }

/*** MILIEU **/
.milieu{
height: auto;
display: flex;
}

.milieu h2{
    font-size: 17px;
    line-height: 15px;
    }

/*** EN BAS **/
.bas .basTexte{
display: flex;
flex-direction: column;
}

.bas .basTexte p{
font-size: 16px;
line-height: 17px;
text-align: justify;
margin: 5px;
padding: 5px;
width: 90%;
}

.bas .idea{
width: 90%;
transform: translateY(-200px);
}

.bas .basTexte img{
width: 99%;
box-shadow: none;
    }

/*** IDEA **/
.bas .idea h2{
font-size: 20px;
line-height: 21px;
}

.bas .idea img{
display: none;
}
}