*{
font-family: arial;
}

.conteneur{
	display: grid;
	grid-template-columns: repeat(10, 1fr);
	grid-template-rows: 1fr;
	grid-template-areas: "logo logo logo menu menu menu menu menu menu menu" 
	                     "Accueil Accueil Accueil Accueil Accueil Accueil Accueil Accueil Accueil Accueil"
	                     "Apropos Apropos Apropos Apropos Apropos Apropos Apropos Apropos Apropos Apropos"
	                     "Actualites Actualites Actualites Actualites Actualites Actualites Actualites Actualites Actualites Actualites"
	                     "Galerie Galerie Galerie Galerie Galerie Galerie Galerie Galerie Galerie Galerie"
	                     "Contact Contact Contact Contact Contact Contact Contact Contact Contact Contact"
	                     "pied pied pied pied pied pied pied pied pied pied";
}



.logo{
	grid-area: logo;
	padding-left: 40px;
	padding-top: 15px;
	background-color: #008080;
}

.menu{
	grid-area: menu;
	padding: 20px;
    background-color: #008080;
}

nav ul{
	list-style: none;
	display: flex;
	justify-content: space-around;
}

a{
	text-decoration: none;
	color: white;
	font-weight: bold;
}


.Accueil{
	grid-area:Accueil;
	display: grid;
	grid-template-columns:repeat(5, 1fr) ;
	grid-template-rows: 1fr;
	grid-template-areas: "enfomasyon enfomasyon foto foto foto";
	padding: 20px;
	background-color: #EFEFEF;
}

.enfomasyon{
	grid-area: enfomasyon;
	padding-top: 150px;
	padding-left: 40px;
	padding-right: 30px;
	font-size: 35px;
	line-height: 1.5;
	color: #303030;
}

.foto{
	grid-area: foto;
	padding: 20px;
}

.Apropos{
	grid-area:Apropos;
	display: grid;
	grid-template-columns:1fr 1fr 1fr 1fr 1fr;
	grid-template-rows:1fr;
	grid-template-areas: "foto1 foto1 kouyo kouyo kouyo" ;
	background-color: white;
}

.foto1{
	grid-area: foto1;
	padding: 30px;
}

.kouyo {
	grid-area: kouyo;
	padding-top: 50px;
	padding-left: 50px;
	padding-right: 30px;
	font-size: 25px;
	line-height: 1.5;
	color: #303030;
}

.Actualites{
	grid-area:Actualites;
	display: grid;
	grid-template-columns:1fr 1fr 1fr 1fr 1fr 1fr;
	grid-template-rows: 1fr;
	grid-template-areas: "anseyanyo anseyanyo aprantisaj aprantisaj spokreya spokreya";
	gap: 10px;
}

.anseyanyo{
	grid-area: anseyanyo;
	background-color: #FAA401;
	padding: 25px;
	font-size: 20px;
	color: white;
}
.aprantisaj{
	grid-area: aprantisaj;
	background-color: #791CF8;
	padding: 25px;
	font-size: 20px;
	color: white;
}
.spokreya{
	grid-area: spokreya;
	background-color: #008080;
	padding: 25px;
	font-size: 20px;
	color: white;
}


.Galerie{
	grid-area: Galerie;
	display: grid;
	grid-template-columns:1fr 1fr 1fr 1fr 1fr 1fr;
	grid-template-rows:1fr;
	grid-template-areas:"fofo2 fofo2  fofo3  fofo3 fofo4  fofo4";
	background-color: #EFEFEF;
	
	padding: 15px;
}

.fofo2{
	grid-area: fofo2;
	width: 100%;
	
}

.fofo3{
	grid-area: fofo3;
	width: 100%;
	
}

.fofo4{
	grid-area: fofo4;
	width: 100%;
	
}


.Contact{
	grid-area: Contact;
	text-align: center;
	font-size: 20px;
}

.button{
	text-align: center;
	padding-bottom: 8px;
}

#bouton{
	background-color: #791CF8;
	font-size: 20px;
}

.pied{
	grid-area: pied;
	background-color: #21177D;
	color: #318CE7;
	text-align: center;
	padding: 3px;
	font-size: 20px;
}


@media only screen and (max-width :480px){


*{
font-family: arial;
}

.conteneur{
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 1fr;
	grid-template-areas: "logo"
						 "menu" 
	                     "Accueil"
	                     "Apropos"
	                     "Actualites "
	                     "Galerie"
	                     "Contact "
	                     "pied ";
}



.logo{
	grid-area: logo;
	padding:10px;
	background-color: #008080;
	text-align: center;
}

.menu{
	grid-area: menu;
	padding: 10px;
    background-color: #008080;
}

nav ul{
	list-style: none;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	align-items: center;
}

a{
	text-decoration: none;
	color: white;
	font-weight: bold;
}


.Accueil{
	grid-area:Accueil;
	display: grid;
	grid-template-columns:1fr ;
	grid-template-rows: 1fr;
	grid-template-areas: "enfomasyon"
						"foto";
	background-color: #EFEFEF;
}

.foto img{
	width: 100%;
}

.enfomasyon{
	grid-area: enfomasyon;
	line-height: 1.5;
	color: #303030;
	text-align: justify;
	font-size: 15px;
	padding: 10px;
}

.foto{
	grid-area: foto;

}

.Apropos{
	grid-area:Apropos;
	display: grid;
	grid-template-columns:1fr ;
	grid-template-rows:1fr;
	grid-template-areas: "foto1" 
	                     "kouyo" ;
	background-color: white;
}

.foto1{
	grid-area: foto1;
}

.kouyo {
	grid-area: kouyo;
	line-height: 1.5;
	color: #303030;
	font-size: 16px;
	padding: 10px;
}

.Actualites{
	grid-area:Actualites;
	display: grid;
	grid-template-columns:1fr;
	grid-template-rows: 1fr;
	grid-template-areas: "anseyanyo" 
	                     "aprantisaj"
	                     "spokreya";
}

.anseyanyo{
	grid-area: anseyanyo;
	background-color: #FAA401;
	font-size: 17px;
	color: white;
}
.aprantisaj{
	grid-area: aprantisaj;
	background-color: #791CF8;
	font-size: 17px;
	color: white;
}
.spokreya{
	grid-area: spokreya;
	background-color: #008080;
	font-size: 17px;
	color: white;
}


.Galerie{
	grid-area: Galerie;
	display: grid;
	grid-template-columns:1fr;
	grid-template-rows:1fr;
	grid-template-areas:"fofo2" "fofo3""fofo4";
	background-color: #EFEFEF;
}

.fofo2{
	grid-area: fofo2;
	padding: 2px;
}

.fofo2 img{
	width: 100%;
}

.fofo3 img{
	width: 100%;
}

.fofo4 img{
	width: 100%;
}

.fofo3{
	grid-area: fofo3;
}

.fofo4{
	grid-area: fofo4;
}


.Contact{
	grid-area: Contact;
	text-align: center;
	font-size: 10px;
}

.button{
	text-align: center;
	padding-bottom: 10px;
}

#bouton{
	background-color: #791CF8;
	font-size: 10px;
}

.pied{
	grid-area: pied;
	background-color: #21177D;
	color: #318CE7;
	text-align: center;
	font-size: 10px;
}


} 


@media only screen and (max-width :768px){

*{
font-family: arial;
}

.conteneur{
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 1fr;
	grid-template-areas: "logo"
						 "menu" 
	                     "Accueil"
	                     "Apropos"
	                     "Actualites "
	                     "Galerie"
	                     "Contact "
	                     "pied ";
}



.logo{
	grid-area: logo;
	padding:10px;
	background-color: #008080;
	text-align: center;
}

.menu{
	grid-area: menu;
	padding: 10px;
    background-color: #008080;
}

nav ul{
	list-style: none;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	align-items: center;
}

a{
	text-decoration: none;
	color: white;
	font-weight: bold;
}


.Accueil{
	grid-area:Accueil;
	display: grid;
	grid-template-columns:1fr ;
	grid-template-rows: 1fr;
	grid-template-areas: "enfomasyon"
						"foto";
	background-color: #EFEFEF;
}

.foto img{
	width: 100%;
}

.enfomasyon{
	grid-area: enfomasyon;
	line-height: 1.5;
	color: #303030;
	text-align: justify;
	font-size: 15px;
	padding: 10px;
}

.foto{
	grid-area: foto;

}

.Apropos{
	grid-area:Apropos;
	display: grid;
	grid-template-columns:1fr ;
	grid-template-rows:1fr;
	grid-template-areas: "foto1" 
	                     "kouyo" ;
	background-color: white;
}

.foto1{
	grid-area: foto1;
}

.kouyo {
	grid-area: kouyo;
	line-height: 1.5;
	color: #303030;
	font-size: 16px;
	padding: 10px;
}

.Actualites{
	grid-area:Actualites;
	display: grid;
	grid-template-columns:1fr;
	grid-template-rows: 1fr;
	grid-template-areas: "anseyanyo" 
	                     "aprantisaj"
	                     "spokreya";
}

.anseyanyo{
	grid-area: anseyanyo;
	background-color: #FAA401;
	font-size: 17px;
	color: white;
}
.aprantisaj{
	grid-area: aprantisaj;
	background-color: #791CF8;
	font-size: 17px;
	color: white;
}
.spokreya{
	grid-area: spokreya;
	background-color: #008080;
	font-size: 17px;
	color: white;
}


.Galerie{
	grid-area: Galerie;
	display: grid;
	grid-template-columns:1fr;
	grid-template-rows:1fr;
	grid-template-areas:"fofo2" "fofo3""fofo4";
	background-color: #EFEFEF;
}

.fofo2{
	grid-area: fofo2;
	padding: 2px;
}

.fofo2 img{
	width: 100%;
}

.fofo3 img{
	width: 100%;
}

.fofo4 img{
	width: 100%;
}

.fofo3{
	grid-area: fofo3;
}

.fofo4{
	grid-area: fofo4;
}


.Contact{
	grid-area: Contact;
	text-align: center;
	font-size: 14px;
}

.button{
	text-align: center;
	padding-bottom: 10px;
}

#bouton{
	background-color: #791CF8;
	font-size: 16px;
}

.pied{
	grid-area: pied;
	background-color: #21177D;
	color: #318CE7;
	text-align: center;
	font-size: 14px;
}
}