body{
    margin-left :auto; 
    margin-right:auto; 
    margin-top: 10px; 
    padding-top:20px; padding-left: 20px; padding-right: 20px;
    padding-bottom: 0px;
    width:960px;height:auto;
    position:"relative";
	font-family: 'Lora', serif;
  	color: #222;

}
.graphique{
	margin-top:10px;
	margin-left:auto;margin-right:auto;
	width:50%;
}

.section {
	position:sticky;
	top: 0;
	transition:opacity 0.5s ease-out;
}

#part1 {
	background: rgba(147, 189, 211, 1);
	z-index: 1;
}

#part2 {
	background: rgba(186, 174, 158, 1);
	z-index: 2;
}

#part3 {
	background: rgba(80, 76, 158, 1);
	z-index: 3;
}

#part4 {
	background: rgba(147, 189, 211, 1);
	z-index: 4;
}


.asoft {
  color: #0066cc;
  text-decoration: none;
  position: relative;
  transition: color 0.3s ease, transform 0.2s ease;
}

.asoft::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0%;
  height: 2px;
  background: #0066cc;
  transition: width 0.3s ease;
}

.asoft:hover {
  color: #004999;
  transform: translateY(-2px);
}

.asoft:hover::after {
  width: 100%;
}

.asoft:active {
  transform: scale(0.96);
}








img {
  margin-bottom: 0;
}

h1 {
  margin-top: 0; margin-bottom: 10;
}

h2 {
  margin-top:10; margin-bottom: 0;
}

#illustration1{
	width:60%;
	padding-bottom: 10px;
}

#illustration2{
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 40%;     
    padding-bottom: 10px;
}

.illustration{
	width:940px; 
	height:auto;
}

.illustration_stats{
	width:60%; 
	height:auto;
}

.illustration_stats img{
		width:100%;
		padding:10px;
	}	

#container{
	width:940px;height:auto;
	border: 1px solid lightgrey;
	padding:20px;
}



ul {
  list-style-type: none;
  margin-bottom: 10px;margin-top: 0px;
  padding: 0;
  overflow: hidden;
  background-color: #333;
  z-index:1;  
}



li {
  float:left;
}

li a {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px 10px;
  text-decoration: none;
  width:80px;
}

.active {
    color:white;
    background-color: #3c89c9;
}


.small{
	width:30%;
	margin:auto;
}

.source{
    display:flex;
    padding-top:5px;
    justify-content: flex-end;
}

update{
    display:flex;
    padding-top:5px;
    justify-content: flex-end;
}


.flexbox{
    display:flex;
    padding: 5px;
}

.seconde{
	align:center;
	margin:auto;
	width:40%;
	
}
article{
    margin-top:10px;
}


@media(hover: hover) and (pointer: fine) {
    li a:hover {
        background: #B2A594;
    }
}

@media screen and (max-width:601px){
	body{
		margin-left :auto; 
    	margin-right:auto;
		width:95%;
		padding-top:10px; padding-left: 5px; padding-right: 5px;
    	padding-bottom: 0px;}
	
	#container{
	margin:auto;
	width:95%;height:auto;
	padding:10px;
	/* border: 1px solid lightgrey; */
}
	
	
.graphique{
	width:96%;
}	

.illustration{
	width:100%; 
}
	
.illustration_stats{
	width:100%; 
}

.illustration_stats img{
		width:100%;
		padding:10px;
	}	
	
	#illustration1{
		width:80%;
}
	li a {
  		width:auto;
}

	.small{
	width:30%;
	margin:auto;
}
	
}