body{
  background: thistle;
  width: auto;
  height: auto;
}


header{
	width: 100%;
	height: 130px;
}

h1{
		text-align: center;
  		color: fuchsia;
	}

.logo{
		width: 40px;
		height: 40px;
	}

.div_logo{
		margin-left: 10px;
		margin-top: -25px;
	}

.slogan{
		color: red;
        margin-top: -5px;
	}

nav{
	background-image:linear-gradient(lightyellow, violet);
	width: auto;
	height: auto;
	text-align: center;
    color: orange;
	font-size: 120%;
    padding-top: 10px;
}

.sous_nav{
    padding: 5px;

}

.img1{
 /* width: 450px;
  height: 220px; */
  width: 75%;
  height: 30%;
}

  p{
    font-family:calibri;
}

h2{
  font-family: calibri;
  padding-top: 80px;
}

section{
  text-align: center;
  color: purple;
  background-image:url("./image/bande_lum2.jpg");
  width: auto;
  height: 200px;
 
}

.date1{
  color: red;
    }

nav div{
	margin-top: 10px;
}

.navdiv{ /* NAV DU HEADER */
	display: flex;
	flex-wrap: wrap;
    justify-content: space-between;
	background: olive;
    padding-left: 8px;
    padding-right: 8px;

   }

 nav a{
 	text-decoration: none;
 	color: yellow;
   font-size: 120%;
   font-weight: bold;
}

a:hover{
  color: red;
  transform: scale(1.1);
}

  a{
    text-decoration: none;
    color: navy;
	}
    
  main{
  margin-left: 15px;
  margin-right: 10px;
}

article{
	text-align:justify;
    margin-bottom: 10px;
    margin-top: 5px;
    border: 1px solid black;
    box-shadow: 4px 4px 4px gray;
    }

.article_un{
	background: silver;
    padding: 10px;
}
.article_deux{
	background: Lavender;
    padding: 10px;
}

.article_un:hover{
	background:Gainsboro;
  	transform: scale(1.05);
}

.article_deux:hover{
	background: seashell;
  	transform: scale(1.05);
}
    
  footer{
	background: gray ; 
	height: 150px ;
	color: white;
	margin-top: 20%;
	text-align: center;
}

  
 footer div p a{
 	color: yellow; 
   margin-left: 5px;
  
    }
    
 footer div p{
    
     }
  
  /*---------------grand ecran-----------------------------*/
  
     @media screen and (min-width: 750px) and (max-width: 2000px){
     
     .div_contact{
	display: flex;
 
    justify-content: center;
    }
    
    nav{
      max-height: 530px ;
       
       }
       
    .img1{
  max-width: 500px;
  }
  
    
    }
    
/*--------Petits Ecrans---------------------*/

@media screen and (max-width: 749px){
	body{
		width: 100%;
		height: auto;
	}
	
	header{
		width: 100%;
		height: 100px;
	}

	h1{
		text-align: center;
	}

	p{
		font-family: calibri;
	}
  
	.logo{
		width: 50px;
		height: 50px;
	}

	.div_logo{
		/*display: flex;*/
		margin-top: -30px;
		margin-left: 5px; 
	}

	.slogan{
		margin-top: -5px;
        font-size:80%;
	}
    
	.div_contact{
	display: flex;
    justify-content: center;

	}

 }