header{
	padding: 100px calc(var(--marges) * 1.7) 70px var(--marges);
	min-height: 20vh;

	background: url('../../images/fond-header.png'), var(--bleu);
	background-position: center center;
	background-size: cover;
	background-attachment: fixed;
	background-blend-mode: luminosity;

	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 10px;
	p.h1{
		width: 100%;
		margin: 0;
		
		color: var(--blanc);
		
		font-size: 1.5em;
		font-weight: 300;
		text-box: trim-both ex alphabetic;
		a{
			
			color: var(--blanc);
			
			font-weight: 900;
			text-transform: uppercase;
			text-decoration: none !important;
			font-size: 1.7em;
		}
	}
	
	p.description{
		display: none;
		margin: 0;
		
		color: var(--blanc);
		
		font-size: 1.2em;
		font-weight: 200;
		strong{
			color: var(--blanc);
		}
	}
	
	nav ul{
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: stretch;
		flex-wrap: wrap;
		row-gap: 20px;
		column-gap: 30px;
		
		li {
			margin: 0;
			a {
				text-decoration: none;
				
				color: var(--blanc);
				font-size: 1.1em;
				font-weight: 400;

				margin: 0;

				&::after{
					content: "" !important;
				}
				&::before{
					content: "\F138";
					display: inline-block;
					font-family: bootstrap-icons !important;
					font-style: normal;
					font-weight: 400 !important;
					font-variant: normal;
					text-transform: none;
					line-height: 1;
					vertical-align: -.125em;
					-webkit-font-smoothing: antialiased;
					-moz-osx-font-smoothing: grayscale;
					margin-right: 0.5em;
					transition: all 0.3s ease;
				}
				&:hover{
					text-decoration: underline 1px var(--blanc);
					&::before{
						transform: rotate(-30deg);
					}
				}
			}
		}
	}
	&.index{
		min-height: 50vh;
		gap: 20px;
		p.description{
			display: block;
		}
	}
}

@media screen and (max-width: 950px){
	header{
		padding: 70px var(--marges);
	}
}