body {
	background-color: #fff;
}

/*XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/
/* header*/
/*XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/

header {
	width: auto;
	background-color: #000033;
	height: 172px;
	border-bottom: solid 5px #3498db;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.header-left {
	display: flex;
	flex-direction: row;
	align-items: center;
}

.header-logo {
	margin: 20px 10px 10px 10px;
}

.header-titrage {
	display: flex;
	flex-direction: column;
}
.header-titre {
	font-size: 3rem;
	color:  #f1c40f;
	font-weight: 900;
	}

.header-soustitre {
	font-size: 1.45rem;
	color: #fff;
	text-align: center;
}

.header-titre, .header-soustitre, .header-nav {
	font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
}

.header-nav {
	display: none;
}


/*XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/
/* fin header*/
/*XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/

/*XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/
/* déclaration de la grille*/
/*XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/

/*Extra small devices (portrait phones, less than 576px)*/
#grille {
	max-width: 575.98px;
	margin: auto;
	display: grid;
	grid-template-columns: 1fr;
	grid-template-areas: 
		"nav"
		"titre"
		"chapeau"
		"conteneur";
}

/*XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/
/* 1re ligne de la grille*/
/*XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/

nav {
	grid-area: nav;
	width: 100%;
	background-color: #88d0eb;
	display: flex;
	justify-content: space-between;
	}

ul {
	margin: 0;
	padding: 0;
	display: flex;
}

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

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

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

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


/*XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/
/* 2e ligne de la grille*/
/*XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/

h2 {
	grid-area: titre;
	background-color: transparent;
	text-align: center;
	text-shadow: 2px 2px 5px #66ffff;
}

/*XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/
/* 3e ligne de la grille*/
/*XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/

#chapeau {margin-top: 10px;grid-area: chapeau;}

#chapeau p {font-family: "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";color: #000066; text-align: justify; font-size: 1.4rem; font-style: italic; background-color:  #fcf3cf;padding: 0 20px 0 20px;}

/*XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/
/* 4e ligne de la grille*/
/*XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/
	

/*XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/
/* 5e ligne de la grille*/
/*XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/

#conteneur {
	grid-area: conteneur;
	margin-top: 20px;
	background-color: #5d6d7e;
}
	
/*élément item de la grille*/
article {
	margin-top: 10px;
	background-color: transparent;
}


.article-txt {
	background-color: #f2f3f4;
	padding: 20px;
	font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
	color: #000066;
}

a:hover.lien {background-color: #000033; color:#ffffff; text-decoration: none;}

.article-txt p {font-size: 1.6rem;}

.article-photo {
background-color: transparent;
	display: none;
}

footer {display: none;}


/*XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/
/*FIN DE GRILLE*/

/*XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/
/*XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/
/*XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/
/* début @media queries*/
/*XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/
/*Small devices (landscape phones, 576px and up)*/
@media screen and (min-width: 576px) and (max-width: 767.98px) {
	header {
		height: 200px;
	}
	.header-titre {
		font-size: 5rem;
	}
	.header-soustitre {
		font-size: 2rem;
	}
	#grille {
		max-width: 767.98px;
	}
	nav {
		font-size: 1.4rem;
	}
	
	#chapeau p {
		font-size: 1.4rem;
	}

	.article-txt p {
		font-size: 1.4rem;
		width: 100%;
	}
	
	}

	
/*Medium devices (tablets, 768px and up)*/
@media screen and (min-width: 768px) and (max-width: 991.98px) {
	.header-titre {
		font-size: 5.5rem;
		text-shadow: 2px 2px 2px #d35400;
	}
	
	.header-soustitre {
		font-size: 2rem;
	}
	
	#grille {
		max-width: 991.98px;
	}
	nav {
		font-size: 1.6rem;
	}

	article {
		display: flex;
		background-color: #aab7b8;
	}
	
.article-txt {
	border-right: solid 3px #d35400;
	min-width: 450px;
}
	
a.lien { display: block;}
	
	.article-photo {
		background-color: transparent;
		display: block;
		padding: 5px;
	}
	.article-photo img {
		max-width: 100%;
		height: auto;
	}

}

/*Large devices (desktops, 992px and up)*/
@media screen AND (min-width: 992px) and (max-width: 1199.98px) {
	header {
		height: 250px;
	}
	.header-titre {
		font-size: 5.5rem;
		text-shadow: 2px 2px 2px #66ffff;
	}

	.header-soustitre {
		font-size: 2.5rem;
	}

	.header-nav {
		display: block;
		margin-right: 10px;
		}
	
	.header-nav ul {
		padding: 0;
		display: flex;
	}
	
	.header-nav ul li {
		list-style: none;
		padding: 5px;
	}
	
	.header-nav ul li:hover a {
		color: #ffffff;
	}
	
	.header-nav ul li a {
		color: #f1c40f;
		text-decoration: none;
		font-size: 1.5rem;
		font-weight: 700;
	}



	#grille {
		max-width: 1199.98px;
	}

	nav {
		font-size: 2rem;
	}


	article {
		display: flex;
		background-color: #aab7b8;
	}
	
.article-txt {
	border-right: solid 3px #3498db;
	min-width: 450px;
}
a.lien { display: block;}
	
	.article-photo {
		background-color: transparent;
		display: block;
		padding: 5px;
	}
	.article-photo img {
		max-width: 100%;
		height: auto;
	}

footer{
	display: block;
	width: auto;
	background-color: #000033;
	height: 200px;
}
.footer-conteneur {
	display: flex;
	justify-content: center;
	align-items: center;
}

}
	


/*Extra large devices (large desktops, 1200px and up)*/
@media screen AND (min-width: 1200px) {
	header {
		height: 250px;
	}
	.header-titre {
		font-size: 5.5rem;
		text-shadow: 2px 2px 2px #d35400;
	}

	.header-soustitre {
		font-size: 2.5rem;
	}


	.header-nav {
		display: block;
		margin-right: 30px;
		}
	
	.header-nav ul {
		padding: 0;
		display: flex;
	}
	
	.header-nav ul li {
		list-style: none;
		padding: 10px;
	}
	
	.header-nav ul li:hover a {
		color: #ffffff;
	}
	
	.header-nav ul li a {
		color: #f1c40f;
		text-decoration: none;
		font-size: 2rem;
		font-weight: 700;
	}

	#grille {
		min-width: 1200px;
	}

	nav {
		font-size: 2rem;
	}


	article {
		display: flex;
		background-color: #aab7b8;
	}
	
.article-txt {
	border-right: solid 3px #d35400;
	min-width: 450px;
}
	
a.lien { display: block;}
	
	.article-photo {
		background-color: transparent;
		display: block;
		padding: 5px;
	}
	.article-photo img {
		max-width: 100%;
		height: auto;
	}

footer{
	display: block;
	width: auto;
	background-color: #000033;
	border-top: solid 5px #3498db;
	height: 200px;
}
.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) {}*/