/* un peu de déco */
html {
	background-color: #4D4D4D;
	min-height: 600px; /* This part sucks */     
}
header, footer {
   background-color:#90EE90; 
   background-image: linear-gradient(to bottom, #90EE90 , #EEEC90 , #EE9990 );
	border-radius: 1em;
	border: 1px solid black;
	height: 10%
}

#content main {
	background-color: #F8F8C8;
	padding: 1em;
	margin: 0.2em;
	border-radius: 1em;
	border: 1px solid black;
}

#content nav, #content aside {
	background-color: #F8F8C8;
    background-image: linear-gradient(to bottom, #EE9990, #EE9990, #90EE90 );
	padding: 1em;
	margin: 0.2em;
	border-radius: 1em;
	border: 1px solid black;
}

h1 {
	font-size:1.3em;	
}

#heure {
	font-size: 1.3em;
	font-weight: bold;	
}

#date {
	font-size: 1.2em;
	font-weight: bold;
	font-style: italic
}

main > p {
	text-indent:1%;
	font-style: italic;	
}

#liens_utile a {
	padding: 4px 7px; 
	background:#E1C0BA;
	color: black;	
	font-size: 0.8em;
	font-style: italic;   	
	border-radius: 7pt;
	margin-top: 5%;
	text-align: center;	
	border: 1px solid black;
}

#mail a{
	padding: 5px 10px; 
    background-color:#90EE90; 
	color: black;
	font-weight: bold;	
	font-size: 0.9em;
	font-style: italic;   	
	border-radius: 7pt;
	text-align: center;	
	border: 1px solid black;
}

/* tuto*/


#tuto {  
  margin:0;
  list-style:none;
  text-align: center;
  width: 140px;
}
#tuto ul {
  padding:0;
  margin:0;
  list-style:none;
  text-align: center;
}
#tuto li {
   background-color:#A7FFAD; 
   background-image: linear-gradient(to bottom, #A7FFAD 0%, #4A9545 100%);
   border-radius: 6px;
   margin-bottom:10%;
   box-shadow: 3px 3px 3px #999;
   border:solid 1px #4A9545
}
#tuto li li {
   max-height:0;
   overflow: hidden;
   transition: all .5s;
   border-radius:0;
   background: #444;
   box-shadow: none;
   border:none;
   margin:0
}
#tuto a {
  display:block;
  text-decoration: none;
  color: black;
  padding: 8px 0;
  font-family: verdana;
  font-size:1.2em
}
#tuto ul li a, #tuto li:hover li a {
  font-size:1em;
  color:white;
}
#tuto li:hover {
   background: #A7FFAD
}
#tuto li li:hover {
   background: #999;
}
#tuto ul li:last-child {
   border-radius: 0 0 6px 6px;
   border:none;
}
#tuto li:hover li {
  max-height: 15em;
}

/* home */

#home {
  padding:0;
  margin:0;
  list-style:none;
  text-align: center;
  width: 140px;
}
#home ul {
  padding:0;
  margin:0;
  list-style:none;
  text-align: center;
}
#home li {
   background-color:#A7FFAD; 
   background-image: linear-gradient(to bottom, #A7FFAD 0%, #4A9545 100%);
   border-radius: 6px;
   margin-bottom:10%;
   box-shadow: 3px 3px 3px #999;
   border:solid 1px #4A9545
}

#home a {
  display:block;
  text-decoration: none;
  color: black;
  padding: 8px 0;
  font-family: verdana;
  font-size:1.2em
}

#home li:hover {
   background: #A7FFAD
}

/* sommaire */


#sommaire {
  padding:0;
  margin:0;
  list-style:none;
  text-align: center;
  width: 140px;
}
#sommaire ul {
  padding:0;
  margin:0;
  list-style:none;
  text-align: center;
}
#sommaire li {
   background-color:#A7FFAD; 
   background-image: linear-gradient(to bottom, #A7FFAD 0%, #4A9545 100%);
   border-radius: 6px;
   margin-bottom:10%;
   box-shadow: 3px 3px 3px #999;
   border:solid 1px #4A9545
}
#sommaire li li {
   max-height:0;
   overflow: hidden;
   transition: all .5s;
   border-radius:0;
   background: #444;
   box-shadow: none;
   border:none;
   margin:0
}
#sommaire a {
  display:block;
  text-decoration: none;
  color: black;
  padding: 8px 0;
  font-family: verdana;
  font-size:1.2em
}
#sommaire ul li a, #sommaire li:hover li a {
  font-size:1em;
  color:white;
}
#sommaire li:hover {
   background: #A7FFAD
}
#sommaire li li:hover {
   background: #999;
}
#sommaire ul li:last-child {
   border-radius: 0 0 6px 6px;
   border:none;
}
#sommaire li:hover li {
  max-height: 15em;
}


/* memo*/


#memo {
  padding:0;
  margin:0;
  list-style:none;
  text-align: center;
  width: 140px;
}
#memo ul {
  padding:0;
  margin:0;
  list-style:none;
  text-align: center;
}
#memo li {
   background-color:#A7FFAD; 
   background-image: linear-gradient(to bottom, #A7FFAD 0%, #4A9545 100%);
   border-radius: 6px;
   margin-bottom:10%;
   box-shadow: 3px 3px 3px #999;
   border:solid 1px #4A9545
}
#memo li li {
   max-height:0;
   overflow: hidden;
   transition: all .5s;
   border-radius:0;
   background: #444;
   box-shadow: none;
   border:none;
   margin:0
}
#memo a {
  display:block;
  text-decoration: none;
  color: black;
  padding: 8px 0;
  font-family: verdana;
  font-size:1.2em
}
#memo ul li a, #memo li:hover li a {
  font-size:1em;
  color:white;
}
#memo li:hover {
   background: #A7FFAD
}
#memo li li:hover {
   background: #999;
}
#memo ul li:last-child {
   border-radius: 0 0 6px 6px;
   border:none;
}
#memo li:hover li {
  max-height: 15em;
}

/* version */

#version {
  padding:0;  
  margin-top: 50%;
  list-style:none;
  text-align: center;
  width: 140px;
}
#version ul {
  padding:0;
  margin:0;
  list-style:none;
  text-align: center;
}
#version li {
   background-color:#A7FFAD; 
   background-image: linear-gradient(to bottom, #A7FFAD 0%, #4A9545 100%);
   border-radius: 6px;
   margin-bottom:10%;
   box-shadow: 3px 3px 3px #999;
   border:solid 1px #4A9545
}
#version li li {
   max-height:0;
   overflow: hidden;
   transition: all .5s;
   border-radius:0;
   background: #444;
   box-shadow: none;
   border:none;
   margin:0
}
#version a {
  display:block;
  text-decoration: none;
  color: black;
  padding: 8px 0;
  font-family: verdana;
  font-size:1.2em
}
#version ul li a, #version li:hover li a {
  font-size:1em;
  color:white;
}
#version li:hover {
   background: #A7FFAD
}
#version li li:hover {
   background: #999;
}
#version ul li:last-child {
   border-radius: 0 0 6px 6px;
   border:none;
}
#version li:hover li {
  max-height: 15em;
}

/*Ca nous intéresse à partir de là*/
header, #content, footer, #conteneur {
	display: flex;             /* déclaration flexbox suivant les navigateurs*/
}

/* On adapte les boites */
main {
	flex: 1; /* Force l'étirement */
	overflow: auto; /* scrolling de la div */
	order: 2 /* position */
}

nav {
	overflow: auto; 
	order: 1 /* position */
}

aside {
	overflow: auto;
	order: 3
}

/* On force la taille de la page... et on modèle de boite global */
html,body {
	display: flex;
	flex-direction: column;  /* disposition */
	height: 100%
}

/* et on s'arrange pour que le contenu (ligne 2) prenne toute la place */
#content {
	height: 80%
}

#conteneur {
	flex-flow: row;	
}

.element {
    margin: auto;
	text-align: center;	
}

img, object, embed, canvas, video, picture {
   max-width: 100%;
   height: auto;
   margin-left: 2%
}

.attention {
	color:red
}

.commande {
	font-size: 1.1em;
	font-weight: bold
}

.travaux {
	color:red;
	font-size: 2em;
	font-weight: bold;
}

.travaux {
    animation: travaux 1s infinite;
}
@keyframes travaux{
    0%{opacity: 1;}
    50%{opacity: 0;}
    100%{opacity: 1;}
}

#lien_utile {
	height:150px;
}

.blink {
	animation: blinker 1.5s linear infinite;
	color: red;	
	text-decoration:none;	
	font-weight:bold
}

@keyframes blinker {
	50% {
		opacity: 0;
	}
}
        
@media all and (max-width: 600px) {
	#content {
		flex-flow: column  /* disposition */
	}
	nav {
		order: 1  /* position */
	}
	
	main {
		order: 2  /* position */
	}
	
	aside {
		order: 3  /* position */
	}
}