/* Layout */


* {
box-sizing: border-box; /* pour maîtriser width et flex-basis */
}

html {
display: flex; flex-direction: column; /* correction bug IE de min-height non appliqué à body */
}

body {
display: flex; /* crée un contexte flex pour ses enfants */
flex-direction: column; /* affichage vertical */
min-height: 100vh; /* toute la hauteur du viewport */

/*padding: 1em;*/
}

.wrapper {
flex: 1 1 auto; /* occupe la hauteur restante */
display: flex; /* crée un contexte flex pour ses enfants */
}

nav {
width: 22em;
}

aside {
width: 22em;
}

article {

flex: 1; /* occupe la largeur restante */
}

nav {
order: -1; /* nav s'affiche en premier */
}


/* Responsive (fenêtres de moins de 640px) */

@media (max-width: 640px) {
.wrapper {
flex-direction: column; /* affichage vertical */
  }
nav,
aside {
width: auto; /* pour écraser la valeur 10em */
  }
nav,
aside,
article {
flex-basis: auto; /* pour écraser la valeur 0, due au flex: 1 */
  }
nav {
order: 0; /* nav reprend sa place */
  }
}

/* Decoration */

body {
margin: 0;
background: #999;
font-family: arial, sans-serif;
}

header
 {
margin: .1em;
padding: 1em;
border-radius: 6px;
}

nav,
aside,
article,
footer {
margin: .3em;
padding: 1em;
border-radius: 6px;
}

header {
background-image:linear-gradient(#1e0ca2, #83ddf4);	
display: inline;
color:#FFFFFF;
text-align: center;
/*font-size: 18px; 
font-weight: bold;*/
}

nav {
background-image:linear-gradient(#ffffff, #b2e7db);
/*background: #efeda9;*/
background-image:url(../nav.png);
background-repeat:no-repeat;
background-position: center center
font-size: 14px;
}

aside {
background-image:linear-gradient(#b6cfc9, #FFFFFF);	
/*background: #efeda9;*/
background-image:url(../aside.png);
font-size: 14px;
}

article {
	
color: #0f036d;	
background-color:#FFFFFF;
background-image:linear-gradient(#FFFFFF, #c5ecf6);
background-image:url(../background.jpg);	
display: block;
font-size: 14px;
}

footer {
background: #ffeebb;
background-image:linear-gradient(#83ddf4,#1e0ca2);
text-align: center;
font-style: italic;
font-size: 14px;
}