#header-bg{
	background: linear-gradient(180deg, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 1) 100%), var(--fond);
	background-position: center center;
	background-size: cover;
}

header{
	padding: 40px;
	min-height: 80vh;
	max-width: 1200px;

	margin: auto;

	background: url('../medias/header-candidats.png');
	background-position: center center;
	background-size: contain;
	background-repeat: no-repeat;

	color: white;

	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: auto 1fr auto auto;
	grid-template-areas: 
		"nav  nav  nav "
		"vide vide vide"
		"fmpm fmpm fmpm"
		"sayn vid  elec"
	;
	gap: 50px;

	nav{
		grid-area: nav;
	}
	#vide{
		grid-area: vide;
	}
	h1{
		grid-area: fmpm;
	}
	#header-sayna{
		grid-area: sayn;
	}
	#header-btn-video{
		grid-area: vid;
	}
	#header-elections{
		grid-area: elec;
		text-align: right;
	}
	/* > *{
		border: red 3px solid;
	} */
}


header nav{
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	gap: 50px;
	ul#header-nav{
		margin: 0;
		list-style: none;
		padding: 0;
		display: flex;
		flex-direction: row;
		align-items: center;
		gap: 30px;
		li a{
			color: white;
			font-variant-caps: caps;
			font-variation-settings: "slnt" 0, "wdth" 75, "wght" 500;
			text-decoration: none;
			font-size: 1.1em;
			position: relative;
		}
		li a::after{
			content: "";
			background-color: var(--rouge);
			height: 3px;
			width: 0%;
			position: absolute;
			bottom: -5px;
			left: 0%;
			transition: all 0.3s ease-in-out;
		}
		li a:hover::after{
			width: 100%;
		}
	}
}

@media screen and (max-width: 1000px){
	header nav{
		display: none;
	}

	header{
		min-height: 60vh;
		/* background-size: cover; */

		grid-template-columns: repeat(2, 1fr);
		grid-template-areas: 
			"elec sayn"
			"vide vide"
			"fmpm fmpm"
			"vid  vid"
		;
		#header-sayna{
			text-align: right;
		}
		#header-elections{
			text-align: left;
		}
	}
}

header{
	h1{
		margin: 0;
		font-variation-settings: "slnt" 9, "wdth" 100, "wght" 900;
		font-size: 4em;
		transform: rotate(-3.28deg);
		line-height: 80%;
		text-align: center;
		transition: all 0.3s ease-in-out;
	}
	h1:hover{
		font-variation-settings: "slnt" 0, "wdth" 100, "wght" 900;
		transform: rotate(0deg);
	}
	p{
		font-size: 1.8em;
		margin: 0;
	}
	p.header-bold{
		font-variation-settings: "slnt" 0, "wdth" 100, "wght" 700;
	}
	a.btn{
		margin: auto;
		width: fit-content;
		text-align: center;
		border-width: 1px;
	}
	.flex-bas{
		display: flex;
		flex-direction: column;
		justify-content: end;
	}
}



@media screen and (max-width: 810px){
	header h1{
		font-size: 3em;
	}
	header p{
		font-size: 1.3em;
	}
}

@media screen and (max-width: 450px){
	header{
		gap: 20px;
		padding: 20px;
		padding-top: 80px;
		background-position: bottom center;
	}
	header h1{
		font-size: 2em;
	}
	header p{
		font-size: 1em;
	}
}