* {
margin:0;
padding:0

}


body {

  font-size:16px;
  color:#ffffff;
background: #FFFFFF;
overflow: hidden;
}

.centrer {
  margin-left:auto;
  margin-right:auto
}

ul {
	margin-top: 20px;
	text-align: center;
}

ul li {
	color: #000;
	list-style: none;
	text-align: center;
	display: inline-block;
	margin-left: 10px;
	margin-right: 10px;
	font-size: 14px;
	
}

ul li a {
	margin-left: auto;
	margin-right: auto;
	    display: block;
	width: 45px;
	height: 45px;
	background: #000;
	color: white;
	text-align: center;
	line-height: 45px;
	-moz-border-radius: 50px;
	-webkit-border-radius: 50px;
	border-radius: 50px;
	font-size: 26px;
	margin-bottom: 5px;
}

ul li .fab {
	line-height: 45px;
}


h1 {
color:#4e6e2a;
font-size:26px;
margin-top:30px;
margin-bottom: 15px;
text-align: center;
line-height: 35px;
}

p {
  font-size:20px;
  color:#4e6e2a;
margin-top: 40px;
  line-height:26px;
  text-align: center;
  margin-bottom: 40px;
  
}

.en-avant {
	padding: 0 50px;
}

p strong {
	font-weight: bold;
}

#container {
	display: flex;
	align-items: center;
	    height: calc(100vh - 20px);
    width: calc(100% - 20px);
    display: flex;
    align-items: center;
    border: solid 10px white;
    border-radius: 30px;
	background: #FFFFFF;
background: linear-gradient(180deg, rgba(255, 255, 255, 0) 34%, rgba(246, 223, 0, 0.46) 100%);
  font-family: "Nunito", sans-serif;
  overflow: hidden;
}

#bloc_centre {
  width: 400px;
  height: 400px;
  border-radius: 50%;
  margin-left: auto;
  margin-right: auto;
      max-width: 100%;
      
      box-sizing: border-box;
	  display: flex;
	  flex-direction: column;
	  justify-content: center;
	  align-items: center;
}

#bloc_centre img {
	max-width: 250px;
	height: auto;
	margin-left: auto;
	margin-right: auto;
	display: block;
}

#footer {
  position:relative;
  margin-left:auto;
  margin-right:auto;
  width:700px;

  bottom:0;
  clear:both;
  margin-top:50px
}


#footer img,#footer a {
  vertical-align:middle
}

.icons {
	display: flex;
	gap: 20px;
}

.icons a {
	background: #81b33e;
	color: #f6df04;
	font-size: 18px;
	display: block;
	padding: 4px;
	width: 30px;
	height: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 100%;
	text-decoration: none;
	transition: all ease .5s;
	cursor: pointer;
}

.icons a:hover {
	background: #4e6e2a;
}

@media only screen and (max-width: 500px) {
	#container {
		align-items: flex-start;
	}
	#bloc_centre {
		width: 300px;
		height: 300px;
		margin-top: 200px;
	}
	#bloc_centre .logo {
			width: 180px;
	}
	p {
		font-size: 18px;
		margin-top: 20px;
		line-height: 24px;
	}
	.en-avant {
		padding: 0 20px;
	}
}