/*
* ===========================================
* Typographies
* ===========================================
*/

/* @import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Instrument+Sans:ital,wght@0,400..700;1,400..700&display=swap'); */
/* ----
les typos sont importées directement dans le html */

/* variables */
:root {
	--instru-serif: 'Instrument Serif', serif;
	--instru-sans: 'Instrument Sans', sans-serif;
}

/*
* ===========================================
* Général
* ===========================================
*/

body {
	background-color: white;
	color: black;

	font-family: var(--instru-sans);
	font-size: 2.1vh;

	cursor: crosshair;

	padding-top: 8vh;
	padding-bottom: 8vh;
	overflow-y: auto;
	margin: 0;

	opacity: 1;
	transition: opacity 0.15s ease-in-out;

}

div {
	box-sizing: border-box;
}

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


body.preload {
	opacity: 0;
}

body.fade-in {
	opacity: 1;
	transition: opacity 0.15s ease-in-out;
	cursor: crosshair;
}

body.fade-out {
	opacity: 0;
	transition: opacity 0.15s ease-in-out;
	cursor: crosshair;
}

/*
* ===========================================
* Mise en page
* ===========================================
*/

header {
	top: 0;
	height: 4vh;
	width: 100%;
	padding: 1rem;

	position: fixed;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	background-color: white;

	z-index: 1000;
}

.box {
	z-index: 1000;
	position: fixed;
	padding: 2vh 2vw;
	background-color: white;

	font-size: clamp(1rem, 2vmin, 3rem);
	font-weight: 500;
	line-height: 180%;
}

.top-left {
	top: 0;
	left: 0;
	width: 40vw;
}

.top-right {
	top: 0;
	right: 0;
}

.bottom-left {
	bottom: 0;
	left: 0;
	width: 40vw;
}

.box a {
	color: inherit;
	transition: color 0.3s ease;
}

.box a:hover {
	color: rgb(110, 110, 110);
}

footer {
	z-index: 1000;

	position: fixed;
	bottom: 0;
	left: 0;
	width: 20%;
	padding: 1rem;
	background-color: white;
}

/*
* ===========================================
* Contenu
* ===========================================
*/

main {
	padding-left: 2vw;
	width: 30vw;
}

.container {
	display: flex;
	overflow-y: auto;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.container::-webkit-scrollbar {
	display: none;
}

.projets {
	z-index: 100;
	width: 45vw;
	overflow-y: auto;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.projets p {
	margin-bottom: 0.6em;
	line-height: 1;
}

.projets::-webkit-scrollbar {
	display: none;
}


.projets .titre {
	font-family: var(--instru-serif);
	font-size: clamp(1rem, 2.3vmin, 2rem);
}

.projets .description {
	text-transform: uppercase;
	font-family: var(--instru-sans);
	font-size: clamp(0.8rem, 1.6vmin, 2rem);

	color: rgb(120, 120, 120);
	transition: color 0.3s ease;
}


#projets {
	overflow: hidden;
	right: 50vw;
}

#photos-clic {
	scroll-behavior: smooth;
	position: fixed;
	top: 8vh;
	right: 0;
	padding: 0 2vw 0 40vw;
	height: calc(100dvh - 11dvh);
	overflow-y: auto;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

#photos-clic::-webkit-scrollbar {
	display: none;
}

#photos-clic img {
	width: 58vw;
	height: auto;
	margin-top: 0.6em;
}

.video-container {
	position: relative;
	display: inline-block;
	width: 100%;
	max-width: 100%;
	margin-top: 0.6em;
}

.video-container video {
	width: 100%;
	height: auto;
	display: block;
}

.sound-toggle {
	position: absolute;
	bottom: 0.5rem;
	right: 0.5rem;
	border: none;
	background: none;
	border-radius: 50%;
	padding: 0.6rem;
	cursor: pointer;
	font-size: 0.6rem;
}


/* Premières images en haut de chaque page : aucune marge haute*/
#photos-clic img:first-child {
	margin-top: 0;
}

#photos-clic img:last-child {
	margin-bottom: 5em;
}

.etoile {
	font-family: var(--instru-serif);
	font-size: clamp(0.8rem, 5vmin, 3rem);

	text-align: center;
	display: block;
	width: 100%;
	padding-top: 3vh;
	padding-bottom: 0;
}

.credits {
	font-family: var(--instru-serif);
	font-size: clamp(0.5rem, 1.7vmin, 1rem);

	line-height: 1.1;

	color: rgb(140, 140, 140);
}


/* PAGE INFOS */

#about {
	width: 40vw;
	min-width: 330px;
	padding: 2vh 2vw; 

	overflow: hidden;

	text-align: justify;
	text-transform: uppercase;
	font-family: var(--instru-sans);
	font-size: clamp(0.8rem, 2vmin, 2rem);

	color: rgb(160, 160, 160);

	line-height: 130%;
}

.email,
.tel {
	color: rgb(160, 160, 160);
	text-transform: uppercase;
}

.email:hover,
.tel:hover,
.type-design:hover {
	color: black;
	transition: color 0.3s ease;
}

.type-design {
	text-transform: uppercase;
	color: rgb(160, 160, 160);
}

.titre-infos {
	font-family: var(--instru-serif);
	font-size: clamp(0.8rem, 2.5vmin, 2rem);

	text-transform: none;
	color: black;
	margin-top: 0.6em;
}

.titre-infos:first-child {
	margin-top: 0;
}

.mobile-hidden {
	display: none;
}

p.mobile-hidden {
	margin-top: 0.3em;
}

.titre-telephone {
	font-family: 'Instrument Serif', serif;
}

.description-telephone {
	font-family: var(--instru-sans);
	font-size: clamp(0.5rem, 3vmin, 1rem);
	text-transform: uppercase;

	color: rgb(140, 140, 140);
}



/*
* ===========================================
* Responsive 
* ===========================================
*/



@media screen and (max-width: 540px) {

	body {
		padding-left: 2%;
		padding-right: 2%;
	}
/* 
	header {
		height: 4vh;
		
	} */

	footer {
		width: 100%;
		height: 2vh;
	}

	.box {
		padding-left: 4%;
		padding-right: 4%;
	}

/* 	.top-left {
		height: 4vh;
		top: 2rem;
		width: 50vw;
	}

	.top-right {
		height: 4vh;
		top: 2rem;
		
	} */

	.non-active {
		color: rgb(140, 140, 140);
	}

	.bottom-left {
		width: 100%;
	}

	.projets {
		display: none;
	}

	#photos-clic {
		padding: 0;
		margin: 0 auto;
		width: 100%;
		height: calc(100dvh - 126px);
	}

	#photos-clic img {
		width: 92vw;
		margin-left: auto;
		margin-right: auto;
		display: block;
	}

	.video-container {
		width: 92vw;
		margin-left: auto;
		margin-right: auto;
		display: block;
	}

/* 	#photos-clic img:first-child {
		margin-top: 4vh;
	}
 */
	#photos-clic img:last-child {
		margin-bottom: 20vh;
	}

	.mobile-hidden {
		display: block;
		padding: 0;
		margin: 0 auto;
		width: 92vw;
	}	

	.credits {
		display: none;

	}

	.titre-telephone { 
		font-size: 4.5vmin;
	}

	.description-telephone {
		font-size: 3.3vmin;
	}

	.credits-telephone {
		font-family: var(--instru-serif);
		font-size: 3.5vmin;
		line-height: 1.3em;
		color: rgb(140, 140, 140);

	}
	
	

	#about {
		margin-top: 6vh;
		width: 100%;

		font-size: 3.5vmin;
		text-align: justify;
	}

	.titre-infos {
		font-size: 4.5vmin;
	}
}