/* Styles Commun */

body {
	font-size: 16px;
	line-height: 24px;
	font-family: 'Roboto', sans-serif;
}

header, footer {
	background: #3a3a3a;
	padding: 30px;
	color:  white;
}

section {
	padding: 50px;
}

h1 {
	font-size: 24px;
	margin-bottom:  20px;
	font-weight: bold;
}

h2 {
	font-size: 20px;
	margin-bottom:  10px;
	font-weight: bold;
}

p a {
	color: #4b4b4b;
}


.btn {
	padding: 10px;
	background: skyblue;
	border-radius: 5px;
	color:  white;
	text-transform: uppercase;
	display: inline-block;
	margin-top:  10px;
	text-decoration: none;
	border:  1px solid skyblue;
}

.btn:hover {
	background: white;
	color: skyblue;
}


/* Header */

header {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

header nav ul{
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap:  30px;
}

header nav ul a {
	color:  white;
	text-decoration: none;
}

header .burger span{
	background: white;
	width: 30px;
	height:  3px;
	display:  block;
}

header .burger span:not(:last-child) {
	margin-bottom:  5px;
}

header .burger {
	display: none;
}

/* Partie 1 */

.articles {
	margin-top: 30px;
}

.articles {
	display:  flex;
	gap:  30px;
}

.articles article {
	width: 50%;
	border:  1px solid black;
}

.articles article img {
	max-width: 100%;
}

.articles article .content {
	padding:  20px;
}

/* Partie 2 */

#partie2 {
	background: black;
	color:  white;
}

#partie2 a {
	color: #e4e3e3;
}

/* Partie 3 */

#partie3 iframe {
	margin:  auto;
	height: 100vh;
	width: 100%;
}

/* Footer */

footer {
	text-align: center;
}

/* Responsive */

/* VOTRE CODE ICI ! */

/*.articles { 
	display: flex;
	gap: 30px;
}*/
/*.article {
	padding: 20px;
	border: 1px solid black;
	width: 50%;
}*/
/* si je suis sur un ecran a max width 720*/

@media (max-width: 720px) { 
	.articles{
		flex-direction: column;
	}
	.articles article {
		border: 1px solid black;
		width: 100%;
	}
	
}

@media(max-width: 720px) {
	header, footer , section { 
		padding:20px;
	}
	header nav {
		display: none;
	}
	header .burger { 
		display: flex;
		flex-direction: column;
		gap: 6px;
		

	}
	
	header .burger .line {
		width: 30px;
		height: 3px;
		background-color: white;
		transform-origin: left center ;
		transition: transform 0.5s
	}
	#partie3 iframe {
		margin:  auto;
		height: 350px;
		width: 100%;
	}
}
a.btn:hover {
	background: palevioletred;
	color: black;
}

/* transition / animation du menu burger width / scale hover */
/* bouger les lignes / 3 lignes pas meme tailles*/


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

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