@font-face {
	 font-family: 'Roboto';
	 font-style: normal;
	 src : url('../styles/Roboto/Roboto-Regular.ttf')
	format('ttf'),
	 url('../styles/Roboto/Roboto-Regular.ttf');
	 font-display: swap;
}


header {
	background-color: #3c3c3c;
	display: flex;
    justify-content: space-between; 
    align-items: center;
    width: 100%;
}

header .burger {
	display : none;
}



body {
	margin :0px;
	font-family: Roboto;
}

h1 {
    margin: 20px;
}


main {
	
}

nav a{
    color:white ;
    text-decoration: none;
    font-family: Roboto;
    
}

#partie1 {
	font-family: Roboto;
	margin-left: 40px;
	margin-right: 40px;
}

nav ul {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
    }



nav ul li {
	
	text-align: right;
	margin-bottom: 40 px;
	display: inline-block;
	margin-right: 20px;
}





article h3 {
	margin-left: 20px;
margin-right: 20px;
}

a[href=" "]{
    color: rgb(53, 44, 33);
}

.button {
	background-color: rgb(25, 165, 241);
	margin-bottom: 10px;
	
	padding: 10px;
    text-transform: uppercase;
    display: inline-block;
    max-width: 100%; 
    margin-left: 20px;
}

article p {
	margin-left: 20px;
	margin-right: 20px;
	max-width: 100%;
	text-overflow: ellipsis;
}
article img {
    max-width: 100%;
    height: auto;
}
article a{
    color: white;
    text-decoration: none;
    border-radius: 5px;
}

article{
  border : 1px solid black;
  width: auto;


}

#partie2 {
    background-color: black;
    color: white;
    margin-bottom: 40px;
    margin-top: 40px;
     /* Ajoute de l'espace entre le haut de la section et le h2 */
}

#partie2 div {
    margin-left: 40px;
    /* Ajoute de l'espace entre le haut du h2 et le début du paragraphe */
    padding-bottom: 40px;
}

#partie2 h2 {
	padding-top: 40px;
        margin-top: 20px; /* ajustez la valeur selon vos préférences */

  }
 

#partie3 h2 {
	padding-left : 40px;
}

#partie3 iframe {
	padding-left : 40px;
	padding-bottom: 40px;
}


.container{
	display: flex;
	flex-direction: row;

	gap : 33px ;
	


}

footer{
    background-color: grey;
    color: white;
    padding: 15px;
    margin: 0px;
    text-align: center;

}


@media (max-width : 720px) {

	.container {
		
		display : flex ;
		flex-direction: column;
		 gap: 33px;
	}

	nav ul {
        list-style: none;
        margin: 0;
        padding: 0;
        display: none;
    }

    header .burger{
    	display : flex;
    	flex-direction: column;
    	gap: 5px;
    	margin-left: 20 px;
    }

    header .burger .line {
    	background-color: white;
    	width : 30px;
    	height: 3px;
    	transform-origin: left-center;
    }

    header .burger .line:nth-child(2){
    	transform: scaleX(0.66);
    }

    header .burger .line:nth-child(3){
    	transform: scaleX(0.55);
    }

	

    header .burger:hover .line {
    	trabsform: scaleX(1);
    }

    



 


}