@import url(fontawesome-all.min.css);
@import url('https://fonts.googleapis.com/css2?family=Lexend:ital,wght@0,100..900;1,100..900&display=swap');

.hide{
	display: none !important;
}

:root{
	--blanc: #FFFFFF;
	--gris:  #585858;
	--gris2:  #c9c9c9;
	--bleu:  #00265F;
	--secondaire:  #5E0B00;
	--marges: 20vw;
	font-size: 16px;
}
@media screen and (max-width: 800px){
	:root{
		--marges: 15vw;
	}
}
@media screen and (max-width: 600px){
	:root{
		--marges: 10vw;
	}
}
@media screen and (max-width: 400px){
	:root{
		--marges: 5vw;
	}
}

body{
	scroll-behavior: smooth;
}

main{
	margin: 0px var(--marges);
}

hr, section{
	margin-top: 50px;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video{
	box-sizing: border-box;
}

h1, h2, h3, h4, h5, h6, p, figcaption, label, blockquote, abbr, acronym, address, pre, a, em, ins, kbd, q, s, big, cite, code, del, dfn,  samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, details, summary, mark, input, select, textarea, button{
	font-family: "Lexend", Helvetica, sans-serif;
	margin: 0.7em 0;
	text-box: trim-both cap alphabetic;
}

/* LIENS */

	a{
		color: var(--bleu);
		font-weight: 400;
		text-decoration: underline 0.08em var(--bleu);
		transition: all 0.3s ease;
	}

	a[target="_blank"]::after{
		content: "\f1c5";
		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;
		font-size: 0.7em;
		margin-left: 0.5em;
	}

	a:hover{
		text-decoration: underline 0.08em var(--blanc);
	}

/* TEXTES */

	b, strong{
		font-weight: 700;
		color: var(--bleu);
	}

	em{
		font-style: italic;
	}

	mark{
		background-color: var(--bleu);
		color: var(--blanc);
	}

	code, kbd, pre{
		font-family: 'Courier New', Courier, monospace;
		background-color: var(--gris2);
		padding: 1px 2px;
		border-radius: 2px;
		border: 1px solid var(--gris);
		white-space: unset;
	}
	code, pre{
		padding: 5px;
		border-radius: 5px;
		display: block;
	}

	blockquote{
		font-style: italic;
		font-weight: 300;
		background-color: #EEEEEE;
		padding: 20px 20px 20px 40px;
		&::before{
			content:"\f6b0";
			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;
			font-size: 0.7em;
			margin-right: 0.5em;
			color: var(--bleu);
		}
	}

	p{
		font-size: 1em;
		font-weight: 300;
	}

	h1{
		font-size: 3em;
		color: var(--bleu);
		font-weight: 900;
		letter-spacing: -0.06em;
	}

	h2{
		font-size: 2.5em;
		color: var(--bleu);
		font-weight: 800;
		letter-spacing: -0.06em;
	}

	h3{
		font-size: 2.1em;
		color: var(--bleu);
		font-weight: 700;
		letter-spacing: -0.06em;
	}

	h4{
		font-size: 1.9em;
		color: var(--bleu);
		font-weight: 600;
		letter-spacing: -0.06em;
	}

	h5{
		font-size: 1.7em;
		color: var(--bleu);
		font-weight: 600;
		letter-spacing: -0.06em;
	}

	h6{
		font-size: 1.3em;
		color: var(--bleu);
		font-weight: 600;
		letter-spacing: -0.06em;
	}

/* ELEMENTS */

	.button{
		padding: 10px 15px;
		
		background-color: var(--bleu);
		border: var(--bleu) 1.5px solid;
		color: white;
		
		font-weight: 400;
		font-size: 1em;
		text-align: center;
		
		transition: all 0.3s ease;
		
		&.small{
			padding: 5px 10px;

			font-weight: 300;
			font-size: 0.9em;
		}

		&.primary{
			background-color: white;
			border: var(--bleu) 1.5px solid;
			color: var(--bleu);
		}

		&:hover{
			border: var(--blanc) 1.5px solid;
			background-color: white;
			color: var(--bleu);
		}
	}

	.msg{
		position: fixed;
		top: 50px;
		left: calc(var(--marges) / 2);
		margin: 0;
		padding: 15px 30px;
		z-index: 1000;

		font-size: 1.2em;

		
		background-color: #AAAAFF;
		color: #111155;
		border: #111155 1px solid;
		&.erreur{
			background-color: #FFAAAA;
			color: #551111;
			border: #551111 1px solid;
		}
		&.valide{
			background-color: #AAFFAA;
			color: #115511;
			border: #115511 1px solid;
		}
	}