@media screen and (min-width: 1024px){
body{
	flex-direction: row-reverse;
	justify-content: left;

}
#container {
	width:520px;
}

#plan{
	width:45%;
}

#objectif{
	width:20%;
}

}


@media screen and (max-width: 1024px){
body{
	flex-direction: column-reverse;
		justify-content: center;
}

#container {
	width:100%;
}

#plan{
	width:100%;
}

#objectif{
	width:100%;
}

}

body {
	display: flex;
	align-items: flex-start;
	font-family: "raleway", sans-serif;
	font-weight: 200;
	font-style: normal;
}
h1{
	font-family: "hwt-artz", sans-serif;
	font-weight: 900;
	font-style: normal;
	color: rgb(68, 186, 195, 1.0);
}

h2{
	font-family: "hwt-artz", sans-serif;
	font-weight: 500;
	font-style: normal;
}

a{
	font-family: "hwt-artz", sans-serif;
	font-weight: 200;
	font-style: normal;	
}
div{
	margin:10px;
	padding: 10px;
	border-radius: 5px;
	/*border: solid darkred 2px;*/
}

ul{
	margin-right: 2px;
}

#container {
width:520px;
margin:0 auto;
}

#affiche{
	width:100%;
}

#plan{
	overflow: visible;
	color:ghostwhite;
	/*position:absolute;
	top: 0;
	left: 0;*/
}

#historique {
	background-color: rgb(201, 229, 234, 1.0);
	color: rgb(68, 186, 195, 1.0);
	width: 96%;
}

#constat {
	background-color: rgb(68, 186, 195, 1.0);
	width: 96%;
}

#idee {
	background-color: rgb(237, 110, 38, 1.0);
	width: 96%;
}


#action {
	background-color: rgb(61, 138, 144, 1.0);
	width: 96%;
}
#objectif{
	color: rgb(61, 138, 144, 1.0);
}

h2{
	color: rgb(61, 138, 144, 1.0);
}

footer{
	display: none;
}