@font-face {
  font-family: "title";
  src: url('ui/fonts/title/title.woff') format('woff');
}

@font-face {
  font-family: "body";
  src: url('ui/fonts/body/body.woff') format('woff');
}

@font-face {
  font-family: "body-bold";
  src: url('ui/fonts/body/body-bold.woff') format('woff');
}

.preload {
	display: block;
	position: fixed;
	width: 0;
	height: 0;
	background-image: none;
}

body {
	font-family: "body", -apple-system, BlinkMacSystemFont, "Roboto", arial, sans-serif;
	color: black;
	background-color: #F7F2ED;
	background-image: url("ui/dots.png");
	background-size: 72px;
	box-sizing: border-box;
	margin: 0;
	width: calc(100%);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: antialiased;
	font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	text-align: center;
	padding: 0;
	font-size: 0;
	padding-top: 0;
}

a {
	text-decoration: none;
	color: black;
}

strong {
	font-weight: 100;
	font-family: "body-bold";
}

h1 {
	font-family: "title";
	font-size: 27px;
	line-height: 30px;
	font-weight: 400;
	margin-bottom: -20px;
}

h2 {
	font-family: "body";
	font-size: 13px;
	line-height: 16px;
	font-weight: 400;
	margin-top: 45px;
	margin-bottom: 45px;
}

h3 {
	font-size: 16px;
	line-height: auto;
	font-weight: 400;
	margin-top: 0;
	margin-bottom: 25px;
}

h4 {
	font-family: "body";
	font-size: 19px;
	line-height: auto;
	font-weight: 100;
	margin-top: 40px;
	margin-bottom: 14px;
}

h5 {
	font-family: "body-bold";
	font-size: 19px;
	line-height: 0;
	font-weight: 100;
	margin-top: 10px;
	margin-bottom: 20px;
}

ul li {
	margin-bottom: 10px;
	margin-left: -5px;
}

.header {
	display: inline-block;
	margin-top: 0;
	width: 148px;
	height: 148px;
	background-image: url("media/pp.jpg");
	background-size: cover;
	margin-bottom: 30px;
	border-radius: 100px;
	box-shadow: inset 0 0 0 1px rgba(0,0,0,.1);
}

.logo {
	display: inline-block;
	width: 80px;
	height: 20px;
	background-image: url("media/logo-tlg-design.png");
	background-size: 80px 20px;
}

.awards {
	display: inline-block;
	width: 210px;
	height: 72px;
	background-image: url("media/awards.png");
	background-size: 210px 72px;
	margin-bottom: 15px;
}

.partenaires {
	display: inline-block;
	width: 270px;
	height: 92px;
	background-image: url("media/partenaires.png");
	background-size: 270px 92px;
	margin-bottom: 20px;
	margin-top: -15px;
}

.link {
	display: inline-block;
	height: 42px;
	background-color: #F7F2ED;
	background-size: 22px;
	background-repeat: no-repeat;
	background-position: 14px 10px;
	outline: solid 1px rgba(0,0,0,.25);
	outline-offset: -1px;
	border-radius: 22px;
	margin: 5px;
	transition: all .075s ease-in-out;
	padding: 11px 16px 0 42px;
	box-sizing: border-box;
	font-size: 16px;
}

		.link:hover {
			display: inline-block;
			height: 42px;
			background-color: #FFFBF6;
			outline: solid 1px rgba(0,0,0,.25);
			outline-offset: 0px;
			border-radius: 100px;
			margin: 5px;
		}

	#link-insta {
		background-image: url("ui/button-insta.png");
	}

	#link-website {
		background-image: url("ui/button-site.png");
	}

	#link-in {
		background-image: url("ui/button-in.png");
	}

	#link-threads {
		background-image: url("ui/button-threads.png");
	}

	#link-bluesky {
		background-image: url("ui/button-bluesky.png");
	}

	#link-x {
		background-image: url("ui/button-x.png");
	}

	#link-fb {
		background-image: url("ui/button-fb.png");
	}

	#link-email {
		background-image: url("ui/button-mail.png");
	}
	
	#link-cases {
		background-image: url("ui/button-case.png");
	}

.details {
	margin: 0 50px 75px 75px;
}

.left-list-container {
	margin-top: 75px;
}

	.left-list-left {
		font-size: 16px;
		width: 50%;
		display: inline-block;
		vertical-align: top;
	}

			.left-list-left .h3-container {
				display: inline-block;
			}

		.left-list-left .link {
			margin-left: 0;
		}

	.left-list-right {
		font-size: 16px;
		width: 50%;
		display: inline-block;
		vertical-align: top;
		max-width: 400px;
	}

		.left-list-right .linebreak {
			display: none;
		}

.grid {
	width: 100%;
	height: 100%;
 	background-color: black;
 	background-size: cover;
 	margin-left: 1px;
}

	.thumbnail {
		display: inline-block;
		position: relative;
		width: calc(0.3333333333 * (100vw - 400px));
		height: calc(0.3333333333 * (100vw - 400px));
		font-size: 100px;
		margin: 0;
		padding: 0;
		box-sizing: border-box;
		background-size: cover;
	}

.thumbnail video {
  width: 100%;
  height: 100%;
  position: absolute;
  object-fit: cover;
  z-index: 0;
}















@media (max-width: 899px) {

	body {
	  display: block;
	  justify-content: center;
	  align-items: center;
	  height: 100vh;
	  margin-top: 50px;
	}

		.left-on-desk {
	  	display: inline-block;
			width: 100vw;
			height: auto;
			position: relative;
			padding: 0;
			margin-top: 0;
		}

		.right-on-desk {
	  	display: inline-block;
			position: relative;
			width: 100vw;
			padding: 0 0 0 0;
			flex-grow: 1;
			text-align: left;
			min-height: none;
		}

			.details {
				margin: 0 50px 85px 50px;
			}

			.left-list-left, .left-list-right {
				display: inline-block;
				text-align: center;
				width: calc(100vw - 50px - 50px) !important;
				max-width: none;
			}

			.left-list-left .h3-container {
				display: block;
			}

				.left-list-left h3 {
					display: inline-block;
					padding-right: 0 !important;
				}

			.grid {
				width: 100%;
				height: 100%;
			 	/* background-image: url("media/grid.png"); */
			 	background-size: cover;
			 	margin-left: 1px;
			 	transform: scale(1.02);
			}

				.thumbnail {
					display: inline-block;
					position: relative;
					width: calc(0.3333333333 * (100vw));
					height: calc(0.3333333333 * (100vw));
					font-size: 100px;
					margin: 0;
					padding: 0;
					box-sizing: border-box;
					background-size: cover;
				}

}


@media (max-width: 1199px) {

	.left-list-left h3 {
		padding-right: 75px;
		max-width: 320px;
	}

		.left-list-left .linebreak {
			display: none;
		}

	.left-list-right .link {
		display: inline-block;
		margin-left: 0;
	}	

	.left-list-right .linebreak {
		display: block;
	}

	.left-list-left {
		width: 60%;
	}

	.left-list-right {
		width: 30%;
	}

		#link-threads, #link-fb, #link-bluesky, #link-cases {
			display: none;
		}

		.left-list-right .linebreak {
				display: none;
		}

}



@media (max-height: 874px) and (min-width: 900px) {

			.left-on-desk {
			  display: inline-block !important;
			  align-items: unset !important;       /* Centre horizontalement l'élément enfant */
			  justify-content: unset !important;   /* Centre verticalement l'élément enfant */
				width: 400px;
  			height: 100vh;  /* Prend toute la hauteur de l'écran */
				position: fixed;
				top: 0;
				left: 0;
				padding: 0;
				margin-top: 0;
				overflow: scroll;
			}

				.left-on-desk-inner {
					margin-top: 75px;
					padding-bottom: 75px !important;
				}

				/* Hide scrollbar for Chrome, Safari and Opera */
				.left-on-desk::-webkit-scrollbar {
				  display: none;
				}

				/* Hide scrollbar for IE, Edge and Firefox */
				.left-on-desk {
				  -ms-overflow-style: none;  /* IE and Edge */
				  scrollbar-width: none;  /* Firefox */
				}

}


@media (min-width:900px) {

	.mobile-message {
		display: none;
	}

	body {
	  height: 100vh;
	}

		.main-container {
		}

			.left-on-desk {
				background-color: #FAF6F1;
				border-right: 1px solid rgba(239,223,206,0.10);
			  display: flex;
			  align-items: center;       /* Centre horizontalement l'élément enfant */
			  justify-content: center;   /* Centre verticalement l'élément enfant */
				width: 400px;
  			height: 100vh;  /* Prend toute la hauteur de l'écran */
				box-shadow: 0px -300px 0 0 #FAF6F1,
										0px 300px 0 0 #FAF6F1,
										-300px 0px 0 0 #FAF6F1,
										-300px 550px 0 0 #FAF6F1,
										-300px -550px 0 0 #FAF6F1,
										-600px 0px 0 0 #FAF6F1,
										-600px 550px 0 0 #FAF6F1,
										-600px -550px 0 0 #FAF6F1,
										-900px 0px 0 0 #FAF6F1,
										-900px 550px 0 0 #FAF6F1,
										-900px -550px 0 0 #FAF6F1,
										-1200px 0px 0 0 #FAF6F1,
										-1200px 550px 0 0 #FAF6F1,
										-1200px -550px 0 0 #FAF6F1;
				position: fixed;
				top: 0;
				left: 0;
				padding: 0;
				margin-top: 0;
			}

				.left-on-desk-inner {
					display: inline-block;
					width: 260px;
					padding: 0;
				}

					.header {
						margin-top: 0;
					}

			.right-on-desk {
				padding: 0 0 0 400px;
				flex-grow: 1;
				text-align: left;
				width: calc(100vw - 400px);
			}

			#link-website,
			#link-threads,
			#link-cases,
			#link-email,
			#link-fb {
				margin-left: 0;
			}

			#link-cases {
				margin-right: 75px;
			}
	
}