color/*@import url('https://fonts.googleapis.com/css2?family=Courgette&display=swap');*/


caption {
  padding: 10px;
}
body {
	margin:0;
	padding:0;
	font-family: arial;
}
#site {
	display: grid;
	grid-template-columns: 1fr 4fr;
	grid-template-rows: 65px;
	grid-template-areas:
		"header header"
		"nav section"
		"nav article"
		"footer footer";
}

header {
	background-color: #86c8fc;
	grid-area: header;
	background-image: url(image/fleur.png);
	background-repeat: no-repeat;
	display: flex;
	flex-direction: row-reverse;
	border-bottom: 2px solid #000;
}
header div {
	width: 30%;
	display: flex;
	align-items: center;
	font-family: 'Courgette', cursive;
	font-size: 20px;
	color: #060;
}
section {
	/*background-color: #96d483;*/
	background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(42,213,91,0.5410539215686274) 0%, rgba(0,212,255,1) 100%);
	grid-area: section;
	text-align: center;
	font-family: 'Courgette', cursive;
	font-size: 35px;
	color: #f2f2f2;
	padding-top: 10px;
	padding-bottom: 10px;
}
nav {
	background-color: #3B659F;
	color: white;
	grid-area: nav;
	padding-top: 50px;
}
nav ul {
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
}
nav ul li {
	list-style: none;
	padding: 20px;
}
nav ul li a {
	color: #ff0;
	text-decoration: none;
	font-size: 20px;
	
}
nav ul li a:hover {
	color: #fff;
	transition: 0.2s;
}
article {
	background-color: #C1AE86
	;
	grid-area: article;
	padding: 10px;
}
article img {
	
	/*width: 100%;*/
}


#image {
	margin-bottom: 8px;
}
#content {
	display: flex;
	justify-content: space-between;
}
#texte {
	
	width: 70%;
	text-align: justify;
	font-size: 19px;
}
/* #liste {
	
	width: 100%;
	/* text-align: center; */
	/* font-size: 19px; */
}
.centrer {
	text-align: center;
}
button {
	background-image : url(../Image/fond-bouton-218.jpg);
	width: 218px;
	padding-top: 10px;
	padding-bottom: 10px;
	/*padding-left: 80px;
	padding-right: 80px; */
	text-align: center;
	font-size: 25px;
	color: #fff;
	border-radius: 10px;
	border: none;
	cursor: pointer;
	outline: none; /*sup le liseret bleu, ?????*/
}
button:hover {
	/*background-color: #f90;*/
	background-image : url(../Image/bouton-clic-218.jpg);
	color: #993a3a;
}
#photo {
	
	width: 20%;
	display: flex;
}

footer {
	background-color: #aaa;
	grid-area: footer;
	display: flex;
	justify-content: space-around;
	padding-top: 25px;
	padding1-bottom: 25px;
	color: #333;
}
footer div {
	width: 35%;
	padding: 25px;
}
footer div:nth-child(2) {
	border-left: 1px solid #666;
}
footer div a {
	text-decoration: none;
	color: #666;
}
@media screen and (max-width: 900px) {
	#site {
	
	grid-template-columns: 1fr;
	grid-template-areas:
		"header"
		"nav"
		"article"
		"footer";
}
header {
	
	background-image: none;
	
}
header div {
	width: 100%;
	justify-content: center;
}
section {
	display: none;
}
nav {
	padding-top: 0;
}
nav ul {
	flex-direction: row;
	justify-content: space-around;
}
#content {
	flex-direction: column;
}
#texte {
	width: 100%;
	margin-bottom: 5px;
}
#photo {

	width: 100%;
	display: flex;
	justify-content: space-between;
}
#photo div{

	width: 28%;
	
}
footer {
	flex-direction: column;
	
}
footer div {
	width: 100%;
	padding: 0;
	padding-top: 25px;
	padding-bottom: 25px;
	display: flex;
	justify-content: center;
}
footer div:nth-child(2) {
	border-left: 0;
	border-top: 1px solid #666;
}
}