@font-face
{
	font-family: "Heading";
	src: url('polices/Montserrat/Montserrat-ExtraBold.ttf');
	font-weight: 800;
}

@font-face
{
	font-family: "Heading";
	src: url('polices/Montserrat/Montserrat-Bold.ttf');
	font-weight: 700;
}

@font-face
{
	font-family: "Heading";
	src: url('polices/Montserrat/Montserrat-Medium.ttf');
	font-weight: 600;
}

@font-face
{
	font-family: "Body";
	src: url('polices/Poppins/Poppins-Black.ttf');
	font-weight: 900;
}

@font-face
{
	font-family: "Body";
	src: url('polices/Poppins/Poppins-ExtraBold.ttf');
	font-weight: 800;
}

@font-face
{
	font-family: "Body";
	src: url('polices/Poppins/Poppins-SemiBold.ttf');
	font-weight: 600;
}

@font-face
{
	font-family: "Body";
	src: url('polices/Poppins/Poppins-Bold.ttf');
	font-weight: bold;
}

@font-face
{
	font-family: "Body";
	src: url('polices/Poppins/Poppins-Light.ttf');
	font-weight: normal;
}

:root
{
	--clr-prim: #fb7712;
	--clr-sec: #1699FB;
	--clr-black: #161A1D;
	--clr-white: #F9F1EC;

	--clr-bg-dark: radial-gradient(at bottom left, var(--clr-grey-900), var(--clr-grey-950));
	--clr-bg-clear:  rgba(150, 150, 150, 0.1);
	--clr-bg-clearer:  rgba(150, 150, 150, 0.2);
	--clr-grad-btn-orange: linear-gradient(45deg, var(--clr-prim-700), var(--clr-prim), var(--clr-prim-700));
	--clr-grad-btn-black: linear-gradient(45deg, var(--clr-black), var(--clr-grey-800), var(--clr-black));

	--clr-prim-100: #fee2cd;
	--clr-prim-200: #fdc59b;
	--clr-prim-300: #fca969;
	--clr-prim-400: #fc8c36;
	--clr-prim-500: #fb6f04;
	--clr-prim-600: #c95903;
	--clr-prim-700: #964303;
	--clr-prim-800: #642c02;
	--clr-prim-900: #321601;

	--clr-grey-50: #F1F3F4;
	--clr-grey-100: #E3E6E8;
	--clr-grey-200: #C7CDD1;
	--clr-grey-300: #ABB4BA;
	--clr-grey-400: #8F9BA3;
	--clr-grey-500: #73828C;
	--clr-grey-600: #5C6870;
	--clr-grey-700: #454E54;
	--clr-grey-800: #2E3438;
	--clr-grey-850: #22272A;
	--clr-grey-900: #171A1C;
	--clr-grey-950: #0B0D0E;

	--shd-2: 0rem 0.2rem 5rem rgba(150, 150, 150, 0.2);
	--shd-1: 0rem 0.1rem 2rem rgba(150, 150, 150, 0.2);
	--lght-o-1: 0 0 2rem var(--clr-prim);
	--lght-o-2: 0 0 1rem var(--clr-prim);
	--lght-w-2: 0 0 1rem var(--clr-grey-700);

	--cr-rad-XS: 8px;
	--cr-rad-S: 16px;
	--cr-rad-M: 32px;
	--cr-rad-L: 48px;

	--content-max-width : 1000px;
	--header-max-width: 1200px;

	--spc-12: 10rem;
	--spc-11: 5rem;
	--spc-10: 4rem;
	--spc-9: 3rem;
	--spc-8: 2.5rem;
	--spc-7: 2rem;
	--spc-6: 1.5rem;
	--spc-5: 1.25rem;
	--spc-4: 1rem;
	--spc-3: 0.75rem;
	--spc-2: 0.5rem;
	--spc-1: 0.25rem;

	--hgt-btn: 3rem;

	--brd-default: 0.5px solid var(--clr-grey-600);

	--ln-hgt-body: 150%;
	--ln-hgt-head: 130%;

	--ft-sz-h1: 34px;
	--ft-sz-h3: 26px;
	--ft-sz-h4: 22px;
	--ft-sz-h5: 14px;
	--ft-sz-bxl: 19px;
	--ft-sz-bl: 17px;
	--ft-sz-bm: 15px; /* root em*/
	--ft-sz-bs: 13px;
	--ft-sz-btn: 14px;
}

html, body
/* IMPORTANT : sans overflow-x : hidden appliqué sur html ET body, ça ne fonctionne pas sur mobile*/
{
	overflow-x: hidden;
}

html
{
	font-size: var(--ft-sz-bm);
}

body
{
	visibility: hidden;

	position: relative;
	margin: 0;
	padding: 0;
	
	background: var(--clr-grey-950);
	width: 100%;
	height: fit-content;
}

/* COMPONENTS */

my-header
{
	width: 100%;
	z-index: 9999;
}

card-featured > h1
{
	color: var(--clr-black) !important;
}

my-slider > card-fold
{
	flex-shrink: 0;
}

my-slider > card-about
{
	flex: 1 0 var(--content-max-width);
}

my-slider > card-persona
{
	flex: 1 0 var(--content-max-width);
	border: var(--brd-default);
}

my-slider > img
{
	display: block;
	flex: 1 0 var(--content-max-width);
	object-fit: contain;
	overflow: hidden;
	border-radius: var(--cr-rad-S);
	border: var(--brd-default);
}


section
{
	position: relative;
	box-sizing: border-box;
	padding: var(--spc-9) 0;
}

.content
{
	width: var(--content-max-width);
	margin: auto;
}

/* TEXT FORMATTING */

h1, h2
{
	margin: 0 0 var(--spc-6) 0;

	font-family: Heading;
	font-size: var(--ft-sz-h1);
	font-weight: 800;
	line-height: var(--ln-hgt-head);
	color: var(--clr-white);
}

section > h1, section > h2, section > .content > h1, section > .content > h2
{
	text-align: center;
	margin-bottom: var(--spc-9);
}

h3
{
	margin: 0 0 var(--spc-5) 0;

	font-family: Heading;
	font-size: var(--ft-sz-h3);
	font-weight: 700;
	line-height: var(--ln-hgt-head);
	color: var(--clr-white);
}

* + .two-columns:has(h3), * + .two-columns > div:has(h3)
{
	margin-top: 1.4rem;
}

.two-columns > h3
{
	margin-bottom: 0;
}

.two-columns:has(h3)
{
	margin-bottom: 1.2rem;
}

h4
{
	margin: 0 0 var(--spc-4) 0;

	font-family: Heading;
	font-size: var(--ft-sz-h4);
	font-weight: 600;
	line-height: var(--ln-hgt-head);
	color: var(--clr-white);
}

* + h4, * + .two-columns:has(h4), * + .two-columns > div:has(h4)
{
	margin-top: var(--spc-5);
}

.two-columns > h4
{
	margin-bottom: 0;
}

.two-columns:has(h4)
{
	margin-bottom: var(--spc-4);
}

h5
{
	margin: 0 0 var(--spc-6) 0;

	font-family: Heading;
	font-size: var(--ft-sz-h5);
	font-weight: 500;
	line-height: var(--ln-hgt-body);
	color: var(--clr-grey-300);

	text-transform: uppercase;
}

p, ul, ol
{
	font-family: Body;
	font-size: var(--ft-sz-bm);
	line-height: var(--ln-hgt-body);
	margin: 0;
	color: var(--clr-white);
}

* + p, * + .two-columns:has(p), * + .two-columns:has(ul), * + .two-columns:has(ol)
{
	margin-top: var(--spc-3);
}

.two-columns > p + p
{
	margin-top: 0;
}

.two-columns
{
	display: flex;
	flex-direction: row;
	gap: var(--spc-8);
}

.two-columns > *
{
	flex: 1 1 0;
}

.two-columns img
{
	width: 100%; 
}

.emphasis-h-o
{
	background: var(--clr-grad-btn-orange);
	color: transparent;
	background-clip: text;
	background-size: 200%;
	transition: 0.3s linear;
}

.emphasis-h-o:hover
{
	background-position: 100%;
}

.emphasis-b
{
	font-weight: 600;
}

/* LISTS */

ol
{
	padding-inline-start: 1.5rem;
}

ul
{
	padding-inline-start: 1.5rem;
	position: relative;
}

ul > li
{
	clear: left;
}

li + li
{
	margin-top: 0.5rem;
}

/* SHAPES */

.triangle-topleft
{
	position: absolute;
	z-index: -1;
	left: 0;
	top: 0;

	width: 0;
	height: 0;
	border-top: 30vw solid var(--clr-black);
	border-right: 80vw solid transparent;
}

.triangle-bottomright
{
	position: absolute;
	z-index: -1;
	right: 0;
	bottom: 0;

	width: 0;
	height: 0;
	border-bottom: 30vw solid var(--clr-black);
	border-left: 80vw solid transparent;
}

.rectangle
{
	position: absolute;
	z-index: -1;
	top: 0;
	left: 0;
	background: var(--clr-black);

	width: 100vw;
	height: 400px;
}

#projects__shape-top
{
	display: block;
	position: absolute;
	z-index: -2;

	background: var(--clr-black);

	border-radius: 0 0 var(--cr-rad-L) var(--cr-rad-L);
	height: 400px;
	width: 100%;
	top: 0px;	
}

#projects__shape-bttm
{
	display: block;
	position: absolute;
	z-index: -2;

	background: var(--clr-black);
	border-radius: var(--cr-rad-L) var(--cr-rad-L) 0 0;

	height: 500px;
	width: 100%;
	bottom: 0px;
}

#about__shape-top
{
	display: block;
	position: absolute;
	z-index: -2;

	background: var(--clr-black);

	border-radius: 0 0 var(--cr-rad-L) var(--cr-rad-L);
	height: 400px;
	width: 100%;
	top: 0px;	
}

/* PAGE HOME*/

#home__section2, #home__section4
{
	background: var(--clr-black);
	display: block;
}

#home__section2 h5, #home__section4 h5
{
	text-align: center;
}

#row-cards-method
{
	position: relative;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: 1fr;
	grid-column-gap: var(--spc-8);
}

#home__section3 card-method
{
	flex: 1 1 0;
}

#home__section4 > div
{
	overflow: scroll;
	-ms-overflow-style: none;
	scrollbar-width: none;
}

#home__section4 > div::-webkit-scrollbar
{
  display: none;
}

#li-tools
{
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: var(--spc-10);
	padding: 0 var(--spc-4);
}



/* PAGE PROJECTS */

#projects-section1 h1
{
	color: var(--clr-white);
}

.grid-2-col
{
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-auto-rows: 1fr;
	gap: var(--spc-8);
}

.grid-2-col > *:nth-child(1)
{
	z-index: 1;
}

.grid-2-col > *:nth-child(2)
{
	z-index: 2;
}

.grid-2-col > *:nth-child(3)
{
	z-index: 3;
}

.grid-2-col > *:nth-child(4)
{
	z-index: 4;
}

/*PAGE ABOUT*/

.grid-3-col
{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-auto-rows: 1fr;
	gap: var(--spc-8);
}

/* PAGE CONTACT */

#contact__section
{
	height: 100vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

#form-contact
{
	display: flex;
	flex-direction: column;
	gap: var(--spc-6);

	position: relative;

	width: 800px;

	margin: auto;
}

#form-names
{
	display: flex;
	flex-direction: row;
	gap: var(--spc-6);
}

label
{
	width: 100%;

	font-family: Body;
	font-size: var(--ft-sz-bs);
	line-height: 100%;

	color: var(--clr-white);
}

input[type="text"], input[type="email"]
{
	width: 100%;
	height: var(--hgt-btn);

	background: var(--clr-bg-clear);
	border-radius: var(--cr-rad-XS);
	border: none;

	box-sizing: border-box;
	padding: 0 var(--spc-4);

	font-family: Body;
	font-size: var(--ft-sz-bm);
	color: var(--clr-white);
}

input[type="submit"]
{
	background: var(--clr-grad-btn-orange);
	background-size: 200%;
	color: var(--clr-white);
	height: var(--hgt-btn);
	min-width: 140px;

	font-family: Body;
	font-size: var(--ft-sz-btn);
	text-transform: uppercase;
	font-weight: 800;
	line-height: 100%;

	box-sizing: border-box;
	border-radius: 100px;
	padding: 0 2rem;
	border: none;
	cursor: pointer;

	align-self: center;

	transition: 0.3s linear;
}

input[type="submit"]:hover
{
	background-position: 100%;
}

textarea
{
	height: 150px;
	width: 100%;

	background: var(--clr-bg-clear);
	border-radius: var(--cr-rad-XS);
	border: none;

	box-sizing: border-box;
	padding: var(--spc-2) var(--spc-4);

	font-family: Body;
	font-size: var(--ft-sz-bm);
	color: var(--clr-white);
}

.labeled-field
{
	position: relative;

	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--spc-2);

	flex: 1;
}

/* PAGE MAIL CONFIRMATION */

#mail-confirmation
{
	height: 100vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--spc-8);
}

.head-text
{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0;
}

.head-text > h1, .head-text > h2
{
	margin-bottom: var(--spc-2);
}


/* PAGES PROJECT*/

.page-project > section
{
	padding-top: var(--spc-8);
	padding-bottom: 0;
}

.page-project > section:last-of-type
{
	padding-bottom: var(--spc-8);
}

.content-project
{
	box-sizing: border-box;
	width: var(--content-max-width);

	background: var(--clr-white);
	border-radius: var(--cr-rad-S);

	padding: var(--spc-8) var(--spc-8) var(--spc-9) var(--spc-8);
	margin: auto;
}

.content-project p, .content-project h2,  .content-project h3, .content-project h4, .content-project ul, .content-project ol
{
	color: var(--clr-black);
}

.content-project > * + img
{
	margin-top: 2rem;
}


.caption
{
	margin: var(--spc-2) 0 var(--spc-8) 0;
	font-style: italic;
	text-align: center;
	color: var(--clr-grey-700);
}

.row-colors
{
	margin: var(--spc-7) 0 var(--spc-8) 0;

	display: flex;
	flex-direction: row;
	justify-content: center;
	gap: var(--spc-7);
}

.row-colors > *
{
	width: 260px;
}

.insert
{
	background: var(--clr-prim-100);
	border-radius: var(--cr-rad-S);
	padding: var(--spc-7) var(--spc-6);
}

* + .insert
{
	margin-top: var(--spc-7);
}

.desktop
{
	display: block;
}

.mobile
{
	display: none;
}

@media screen and (max-width: 1000px)
{
	:root
	{
		--shd-box: 1vw 1vw 4vw rgba(0, 30, 23, 0.4);

		--ft-sz-h1: 1.8rem;
		--ft-sz-h3: 1.6rem;
		--ft-sz-h4: 1.4rem;
		--ft-sz-bxl: 1.25rem;
		--ft-sz-bl: 1.125rem;
		--ft-sz-bm: 4vw;
		--ft-sz-bs: 0.875rem;
		--ft-sz-btn: 0.95rem;

		/*--spc-12: 4.4vw;
		--spc-9: 6.6vw;
		--spc-11: 6.6vw;
		--spc-10: 6.6vw;
		--spc-9: 6.6vw;
		--spc-8: 5.5vw;
		--spc-7: 5.5vw;
		--spc-6: 5.5vw;*/

		--cr-rad-XS: 2vw;
		--cr-rad-S: 4vw;
		--cr-rad-M: 5vw:
		--cr-rad-L: 6vw;
	}

	/* SECTIONS */

	section:has(header-proj)
	{
		padding-bottom: 0;
	}

	section:has(footer-proj)
	{
		padding-top: var(--spc-4);
	}

	section
	{
		padding: var(--spc-8) var(--spc-4);
	}

	.page-project > section
	{
		padding-top: var(--spc-4);
		padding-bottom: 0;
	}

	/* TEXT FORMATTING*/

	h1, h2
	{
		margin: 0 0 var(--spc-5) 0;
	}

	section > h1, section > h2, section > .content > h1, section > .content > h2
	{
		text-align: center;
		margin-bottom: var(--spc-5);
	}

	* + h4
	{
		margin-top: 4.2vw;
	}

	h3 + p, h3 + .two-columns 
	{
		margin-top: 4vw;
	}

	/* LIST */

	li + li
	{
		padding-top: 0.3rem;
	}

	/* COMPONENTS */

	card-featured
	{
		width: auto;
	}

	my-slider > card-about, my-slider > card-persona, my-slider > img
	{
		flex: 1 0 calc(100vw - 2*var(--spc-4));
	}

	/* SHAPES */

	.rectangle
	{
		height: 40vh;
	}

	/* OTHERS */

	.content
	{
		width: auto;
	}

	#row-cards-method
	{
		display: flex;
		flex-direction: column;
		gap: var(--spc-4);
	}

	#home__section2, #home__section4
	{
		padding-left: 0;
		padding-right: 0;
	}

	#li-tools
	{
		width: fit-content;
	}

	.grid-2-col, .grid-3-col
	{
		grid-template-columns: 1fr;
		gap: var(--spc-4);
	}

	#form-contact
	{
		width: auto;
	}

	.content-project
	{
		padding: var(--spc-6) var(--spc-6) var(--spc-7) var(--spc-6);
		width: auto;
	}

	.two-columns
	{
		flex-direction: column;
		gap: 0;
	}

	.two-columns > div:nth-child(2):has(img)
	{
		margin-top: var(--spc-6);
	}

	.two-columns > *
	{
		flex: 0;
	}

	.two-columns > h4
	{
		margin-bottom: var(--spc-3);
	}

	.two-columns:has(h4) 
	{
		margin-bottom: 0;
	}

	.two-columns > * + ul, .two-columns > * + ol
	{
		margin-top: var(--spc-3);
	}

	* + .two-columns:has(p), .two-columns > p 
	{
		margin-top: 0;
	}

	.row-colors
	{
		flex-direction: column;
		justify-content: flex-start;
	}

	.row-colors > *
	{
		width: 100%;
		height: auto;
	}

	.insert
	{
		padding: 3.3vw 4.4vw;
	}

	* + .insert
	{
		margin-top: 4.4vw;
	}

	.desktop
	{
		display: none;
	}

	.mobile
	{
		display: block;
	}
}