:root{
	--light-main: #140F23;
	--light-grey: #828088;
	--light-invert: #fff;
}
html {
  scroll-behavior: smooth;
}
@media (min-width: 1200px) {
	.container, .container-lg, .container-md, .container-sm, .container-xl {
		max-width: 1440px;
	}
}
a:hover{
	text-decoration: none;
}
h1, h2, h3, h4{
	font-family: Poppins, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !important;
	font-weight: 600;
	line-height: 1.1em;
	letter-spacing: -3px;
	text-wrap: balance;
}
h1{
	font-size: 4.5em;
	text-align: center;
}
h2{
	font-size: 4em;
	text-align: center;
}
h3{
	font-size: 3.25em;
	line-height: normal;
	letter-spacing: -2px;
	margin-bottom: 0;
}
h4{
	font-size: 1.5em;
	line-height: normal;
	letter-spacing: 0;
	margin-bottom: .25em;
}
body{
	background: #F0F0F1;
	color: var(--light-main);
	padding: 1em;
	font-family: Inter, Arial, sans-serif;
}
header{
	background: #ffffff;
	border: 1px solid #EBEBEE;
	border-radius: 2em;
	padding: .75em;
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 1em;
}
header .header-nom{
	font-size: 1.75em;
	font-family: Poppins, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !important;
	font-weight: 600;
}
header img.header-portrait{
	height: 64px;
	border-radius: 50%;
	margin-right: .5em;
}
header ul{
	list-style: none;
	padding-left: 0;
	margin-bottom: 0;
	display: flex;
	gap: .5em;
}
header ul a{
	color: var(--light-main);
	padding: 0.75em 1.5em;
	border-radius: 2em;
	transition: .2s;
}
header ul a:hover{
	text-decoration: none;
	background: #F0F0F1;
	color: var(--light-main);
}
header ul a.active{
	background: var(--light-main);
	color: var(--light-invert);
}
header ul img.flag{
	height: 16px;
}
#hero{
	background: #ffffff;
	border: 1px solid #EBEBEE;
	border-radius: 2em;
	padding: 6.25em 2em 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2em;
}
#hero p{
	margin: 0 auto;
	max-width: 550px;
	text-wrap: balance;
	text-align: center;
	color: var(--light-grey);
	font-size: 1.2em;
}
#hero img{
	width: 100%;
}
#hero a.primary {
	padding: 0.75em 1.5em;
	border-radius: 2em;
	background: var(--light-main);
	color: var(--light-invert);
}
#hero a.secondary {
	padding: 0.75em 1.5em;
	border-radius: 2em;
	border: 1px solid var(--light-main);
	color: var(--light-main);
}
.nowrap{
	white-space: nowrap;
}
#projets{
	padding: 6.25em 1em;
	display: flex;
	flex-direction: column;
	gap: 4.5em;
}
#projets .section-header p{
	margin: 2em auto 0;
	max-width: 625px;
	text-wrap: balance;
	text-align: center;
	color: var(--light-grey);
	font-size: 1.2em;
}
#projets .projets{
	display: flex;
	flex-direction: column;
	gap: 4.5em;
}
#projets .projet{
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: 4.5em;
}
#projets .projet .projet-infos{
	display: flex;
	flex-direction: column;
	gap: 1em;
	max-width: 625px;
}
#projets .projet .projet-infos p{
	color: var(--light-grey);
	margin-bottom: 0;
}
#projets .projet .projet-infos ul{
	list-style: none;
	padding-left: 0;
	margin-bottom: 0;
}
#projets .projet .projet-infos ul li{
	padding: .25em 0;
}
#projets .projet .projet-infos ul li:before{
	content: "\e5d6";
	font-family: "Font Awesome 6 Pro";
	font-weight: 900;
	padding-right: 1em;
}
#projets .projet .projet-infos a{
	padding: 0.75em 1.5em;
	border-radius: 2em;
	background: var(--light-main);
	color: var(--light-invert);
	width: fit-content;
}
#projets .projet .projet-infos .tag{
	padding: .25em .75em;
	border-radius: 2em;
	color: var(--light-main);
	width: fit-content;
	border: 1px solid var(--light-main);
	margin-bottom: -1em;
}
#projets .projet .projet-visuel img{
	background: var(--light-invert);
	padding: 0.75em;
	border: 1px solid #EBEBEE;
	max-width: 500px;
	border-radius: 2em;
}
#a-propos{
	background: #ffffff;
	border: 1px solid #EBEBEE;
	border-radius: 2em;
	padding: 6.25em 3em;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2em;
}
#a-propos .a-propos-content{
	display: flex;
	align-items: center;
	gap: 72px;
}
#a-propos .a-propos-content p{
	color: var(--light-grey);
	max-width: 650px;
	margin: 0 auto;
}
#a-propos .a-propos-content img{
	max-height: 300px;
	border-radius: 32px;
}
#outils{
	padding: 100px 0;
	max-width: 1200px;
	margin: 0 auto;
	display: flex;
	flex-direction: row;
	gap: 72px;
}
#outils .outils-header{
	display: flex;
	flex-direction: column;
	gap: 32px;
	justify-content: center;
	min-width: 550px;
}
#outils .outils-header h2{
	text-align: left;
	max-width: 550px;
}
#outils .outils-header p{
	color: var(--light-grey);
	margin-bottom: 0;
	max-width: 550px;
}
#outils #outils-liste{
	list-style: none;
	padding-left: 0;
	margin-bottom: 0;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	justify-content: center;
	gap: 32px;
	flex-grow: 1;
}
#outils #outils-liste li{
	background: #ffffff;
	border: 1px solid #EBEBEE;
	padding: 24px;
	border-radius: 32px;
	flex-grow: 6;
	display: flex;
	align-items: center;
	justify-content: center;
}
#outils #outils-liste li img{
	max-height: 60px;
}
#contact{
	background: #ffffff;
	border: 1px solid #EBEBEE;
	border-radius: 2em;
	padding: 6.25em 3em;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2em;
}
#contact form{
	max-width: 650px;
}
#contact form .col-lg-6{
	padding: 0 .5em;
}
#contact form .col-12{
	padding: 0 .5em;
}
#contact form input,
#contact form textarea{
	padding: .75em 1.5em;
	min-height: 58px;
	border-radius: 1em;
	border-color: #E5E5EA;
}
#contact button.btn{
	padding: 0.75em 1.5em;
	border-radius: 2em;
	background: var(--light-main);
	color: var(--light-invert);
}
footer{
	text-align: center;
	padding: 3em;
	color: var(--light-grey);
}
.tooltip.show {
	opacity: 1;
}
.tooltip-inner {
	border-radius: 16px;
	padding: 12px 24px;
	margin-top: -16px;
}
@media screen and (max-width: 991px) {
	h1 {
		font-size: 3.25rem;
	}
	h2{
		letter-spacing: -2.64px;
		font-size: 2.75rem;
	}
	h3{
		letter-spacing: -1.92px;
		font-size: 1.5rem;
	}
	#projets .projet{
		flex-direction: column;
	}
	#projets .projet .projet-visuel{
		order: 1;
	}
	#projets .projet .projet-infos{
		order: 2;
	}
	#a-propos .a-propos-content{
		flex-direction: column;
	}
	#outils{
		flex-direction: column;
	}
	#outils .outils-header{
		align-items: center;
	}
}
@media screen and (max-width: 767px) {
	h1 {
		letter-spacing: -1.52px;
		font-size: 2.5rem;
	}
	h2{
		letter-spacing: -1.36px;
		font-size: 2.25rem
	}
	h3{
		letter-spacing: -1.28px;
		font-size: 1.5rem
	}
	header{
		justify-content: center;
	}
	header .header-nom{
		font-size: 1.5em;
	}
	header ul{
		display: none;
	}
	#hero{
		padding: 3em 2em 0;
	}
	#hero h1 i{
		display: none;
	}
	#projets{
		gap: 3.5em;
	}
	#projets h2,
	#projets .section-header p{
		text-align: left;
	}
	#projets .projet{
		gap: 2.5em;
	}
	#projets .projet .projet-visuel img{
		max-width: 100%;
		padding: 0.25em;
	}
	#a-propos{
		padding: 3em 2em;
	}
	#outils .outils-header{
		min-width: 100%;
	}
	#outils #outils-liste{
		gap: 10px;
	}
	#outils #outils-liste li{
		border-radius: 16px;
	}
	#outils #outils-liste li img {
		max-width: 32px;
		max-height: 32px;
	}
	#contact{
		padding: 3em 2em;
	}
}