/* CSS Document */
.temoin{
	background-color: red;
	color: #fff;
	font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	font-size: 1.5rem;
	width: 300px;
	border: 3px dotted #000;
	padding: 5px;
	margin: 5px 0 5px 5px;
	text-align: center;
	display: block;
	}

header{
	background-color: #f1c40f;
	height: 175px;
	padding: 20px 0 20px 0;
	margin-bottom: 3px;
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	align-items: center;
}

.header-titre{
	font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	font-size: 1.2rem;
	font-weight: 700;
	color:  #000033;
	text-shadow: 3px 3px 10px #fff;
	text-align: center;
}

nav{
	background-color:  #f9e79f;
	width: 100%;
	margin-bottom: 3px;
}

ul {
	margin: 0;
	display: flex;
	justify-content: center;
}

ul li {
	list-style: none;
	padding: 10px 5px;
	margin: 5px 0;
}

ul li:hover {
	background-color: #873600;
}

ul li:hover a {
	color: #ffffff;
}

ul li a {
	color: #000033;
	text-decoration: none;
	font-size: 1.1rem;
	font-weight: 600;
	font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, "sans-serif";
}

h2 {
	background-color: transparent;
	text-align: center;
	text-shadow: 2px 2px 5px #f1c40f;
	font-size: 2rem;
}

.clearleft{
	clear: left;
}
article{
	background-color: #d5dbdb;
	padding: 20px;
	margin-bottom: 3px;
	font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	text-align: justify;
}

article ul{
	display: block;
}
article ul li{
	list-style: disc;
	padding: 0;
	margin-left: 40px;
}

article ul li:hover {
	background-color: transparent;
}

aside{
	background-color: #e8e8a9;
	height: auto;
	padding: 5px 5px 5px 20px;
	margin-bottom: 3px;
	font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
}

footer{
	background-color: #e8e8a9;
	height: 100px;
	padding-top: 20px;
	margin-bottom: 3px;
	display: none;
}

img {
	max-width: 100%;
	height: auto;
}



@media screen AND (min-width: 576px) and (max-width: 767.98px) {
	.temoin{
	background-color: green;
	color: #fff;
	font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	font-size: 1.5rem;
	width: 300px;
	border: 3px dotted #000;
	padding: 5px;
	margin: 5px 0 5px 5px;
	text-align: center;
	display: block;
	}
	.header-titre{
	font-size: 2.8rem;
	}
	
	h2 {
		font-size: 3rem;
}
	ul li a {
	font-size: 1.5rem;
	}
}

@media screen AND (min-width: 768px) AND (max-width: 991.98px){
	.temoin{
	background-color: cornflowerblue;
	color: #fff;
	font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	font-size: 1.5rem;
	width: 300px;
	border: 3px dotted #000;
	padding: 5px;
	margin: 5px 0 5px 5px;
	text-align: center;
	display: block;
	}
	.header-titre{
	font-size: 4rem;
	}
	h2 {
		font-size: 3rem;
	}
	
	ul li a {
	font-size: 1.5rem;
	}
	p{
		font-size: 1.8rem;
		margin-top: 10px;
	}
	
	article ul li{
		font-size: 1.8rem;
	}

}

@media screen AND (min-width: 992px) AND (max-width: 1199.98px) {
	.temoin{
	background-color: orange;
	color: #fff;
	font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	font-size: 1.5rem;
	width: 300px;
	border: 3px dotted #000;
	padding: 5px;
	margin: 5px 0 5px 5px;
	text-align: center;
	display: block;
	}
	.header-titre{
	font-size: 5rem;
	}
	h2 {
		font-size: 3rem;
	}
	
	ul li a {
	font-size: 1.5rem;
	}
	p{
		font-size: 1.8rem;
		margin-top: 10px;
	}
	
	article ul li{
		font-size: 1.8rem;
	}

	
	#container-main{
		display: flex;
		flex-direction: row;
		margin: 7px 5px 0 5px;
	}
	#container-article{
		display: flex;
		flex-direction: column;
		margin-right: 5px;
		width: 70%;
	}
	#container-aside{
		display: flex;
		flex-direction: column;
		width: 30%;
	}
	aside{
		background-color: #e8e8a9;
		margin-bottom: 10px;
	}
	.box{
		border: 2px solid  #aab7b8;
	}
	
	/*coin arrondi haut gauche*/
	.cahg{
		border-top-left-radius: 10px;
	}
	/*coin arrondi haut droit*/
	.cahd{
		border-top-right-radius: 10px;
	}
	
footer{
	display: block;
	width: auto;
	background-color: #f1c40f;
	height: 150px;
	margin-top: 20px;
}
.footer-conteneur {
	display: flex;
	justify-content: center;
	align-items: center;
}
	
}

@media screen AND (min-width: 1200px) {
	.temoin{
	background-color: fuchsia;
	color: #fff;
	font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	font-size: 1.5rem;
	width: 300px;
	border: 3px dotted #000;
	padding: 5px;
	margin: 5px 0 5px 5px;
	text-align: center;
	display: block;
	}
		.header-titre{
	font-size: 5rem;
	}
	h2 {
		font-size: 3rem;
	}
	
	ul li a {
	font-size: 1.8rem;
	}
	p{
		font-size: 2rem;
		margin-top: 10px;
	}
	
	article ul li{
		font-size: 2rem;
	}
	
	#container-main{
		display: flex;
		flex-direction: row;
		margin: 7px 5px 0 5px;
	}
	#container-article{
		display: flex;
		flex-direction: column;
		margin-right: 5px;
		width: 70%;
	}
	#container-aside{
		display: flex;
		flex-direction: column;
		width: 30%;
	}
	aside{
		background-color: #e8e8a9;
		margin-bottom: 10px;
	}
	.box{
		border: 2px solid  #aab7b8;
	}
	/*coin arrondi haut gauche*/
	.cahg{
		border-top-left-radius: 10px;
	}
	/*coin arrondi haut droit*/
	.cahd{
		border-top-right-radius: 10px;
	}
	
footer{
	display: block;
	width: auto;
	background-color: #f1c40f;
	height: 150px;
	margin-top: 20px;
}
.footer-conteneur {
	display: flex;
	justify-content: center;
	align-items: center;
}

	
	
}




/* MEDIA QUERIES - POINTS DE RUPTURE BOOTSTRAP*/
	
/*Extra small devices (portrait phones, less than 576px)

Small devices (landscape phones, 576px and up)
@media screen AND (min-width: 576px) and (max-width: 767.98px) {}

Medium devices (tablets, 768px and up)
@media screen (min-width: 768px) and (max-width: 991.98px){}

Large devices (desktops, 992px and up)
@media screen AND (min-width: 992px) and (max-width: 1199.98px) {}

Extra large devices (large desktops, 1200px and up)
@media screen AND (min-width: 1200px) {}*/