body {
  counter-reset: section;
}

li.y {
  counter-increment: section;
}

li.y:before {
    content:counter(section) ;
    display: block;
	margin-right:2px;
    border-radius: 20%;
    color: #c0c0c0;
    font-size: 11px;
    float: right;
}

@media only screen and (max-width: 865px) {
  p.p, article, .buttons, .texte {
    width:100%;
    max-width:100%;
  }
}
@media only screen and (min-width: 865px) {
  p.p {
    width:865px;
    max-width:100%;
  }
}
@media only screen and (min-width: 1400px) {
  p.p {
    width:1400px;
	max-width:100%;
  }
}

}
img.em {
	float:right;
	margin-top:-0px;
}

.fcontainer {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(469px, 1fr));
  max-width:100%:
}

li.y {
float:left;
margin: 0 2px;  
padding:0px;
spacing:0px;
zwidth:469px;
background:white;
border:1px solid #e0e0e0;  
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
transition: all 0.3s cubic-bezier(.25,.8,.25,1);
margin-bottom:8px;
}

@media only screen and (min-width : 1px) and (max-width : 600px) {			
.fcontainer {
  display: block;
  max-width:72%:
}

li.y {
	float:none;
}
}