body {
position: relative;
min-width: 1024px;
min-height: 800px;
margin: 0;
padding-bottom: 90px;
}
* {
box-sizing: border-box;
-webkit-box-sizing: border-box;
}
img {
max-width: 100%;
width: auto;
height: auto;
-webkit-box-sizing: boder-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
header {
position: relative;
min-height: 400px;
padding-bottom: 10px;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: stretch;
overflow: hidden;
}
#logo {
width: 34%;
}
#entete {
padding: 20px;
width: 62%;
}
nav {
position: relative;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: stretch;
min-height: 30px;
}
#inter {
width: 100%;
padding: 20px;
text-align: center;
}
section, article, aside {
position: relative;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: stretch;
padding: 0;
margin: 0;
border: 0;
overflow: hidden;
}

article {width: 64%; float: left;}
aside {width: 36%; float: right;}

span {
display: inline;
}

footer {
position: absolute;
bottom: 0;
width: 100%;
min-height: 90px;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex-flow: row wrap;
justify-content: space-between;
align-items: stretch;
overflow: hidden;
}

p {
display: block;
width: 100%;
}

.entier, .moitier, .tiers, .deuxtiers, .troisquart, .quart, .un5em, .un6em, .deux6em, .trois5em, .huitieme {
position: relative;
margin: 0;
padding: 16px;
overflow: hidden;
}

.entier {width: 100%;}
.moitier {width: 46%;}
.tiers {width: 36%;}
.deuxtiers {width: 64%;}
.deux6em {width: 26%;}
.troisquart {width: 70%;}
.quart {width: 23%;}
.un5em {width: 18%;}
.un6em {width: 15%;}
.trois5em {width: 58%}

.menusmart {
display: none;
background: none;
}
.referme {
display: none;
background: none;
}
#charge
{
display: none;
width: 90%;
margin-left: auto;
margin-right: auto;
text-align: center;
background-color: #ffffff;
overflow: hidden;
}

@media only screen and (max-width: 1024px)
{
body {
min-width: 200px;
}
article {width: 100%;}
aside {width: 100%;}

#logo {width: 100%; text-align: center;}
#entete {width: 100%; padding: 2px;}

.menusmart {
display: block;
background: none;
}
.referme {
text-align: right;
background: none;
}
nav {
display: block;
position: fixed;
top: 2px;
left: 0;
z-index: 1;
width: 40px;
height: 40px;
overflow: hidden;
border-right: 2px solid blue;
border-radius: 0 10px 10px 0;
-webkit-transition: height 0.8s ease-in-out;
-moz-transition: height 0.8s ease-in-out;
-o-transition: height 0.8s ease-in-out; 
transition: height 0.8s ease-in-out; 
}
.deplace nav {
width: 200px;
height: 300px;
padding-top: 16px;
}
.deplace nav a{
display: block;
width: 96%;
margin-top: 8px;
}
.deplace .menusmart {
display: none;
}

.deuxtiers, .tiers, .moitier, .troisquart{width: 100%;}

}