/*------------------ les typos -------------------*/
@font-face{
    font-family: "times-italic";
    src: url("fonts/times-italic.ttf")
}

@font-face{
    font-family: "PingFangT-Regular";
    src: url("fonts/PingFangTC-Regular.ttf")
}

@font-face{
    font-family: "PingFangT-Medium";
    src: url("fonts/PingFangTC-Medium.ttf")
}

@font-face {
  font-family: "ClashDisplay-Regular";
  src: url("fonts/ClashDisplay-Regular.woff2")
}

@font-face {
	font-family: "ClashDisplay-Light";
	src: url("fonts/ClashDisplay-Light.woff2")
}

@font-face {
	font-family: "ClashDisplay-Medium";
	src: url("fonts/ClashDisplay-Medium.woff2")
}


:root {
    --ecriture: #0000ff;
}

/* ---------------début du code--------------------- */

body{
	background-color: #dcdcdc;
	font-family: ClashDisplay-Regular;
	font-size: 1em;
	color: var(--ecriture);
}

html{
	scroll-behavior: smooth;
}

::-webkit-scrollbar{
	width: 0px;
}

/* ----------------------accueil-------------------- */

#base_video{
	width: 100vw;
	height: 100vh;
	overflow: hidden;
}

.video_bg{
	position: absolute;
	right: 0;
	top: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 7;
}

#click{
	font-family: times-italic;
	font-size: 1.3em;
	color: #DDD48A;
	width: 100%;
	text-align: center;
	position: absolute;
	top: 90vh;
	z-index: 8;
	text-transform: uppercase;
}

#deco_clic{
	text-decoration: none;
}

/* ------------ barre fixe index ---------------- */

#cache_nav-barre{
	position: fixed;
	top: 0vh;
	width: 100%;
	height: 100px;
	background-color: #dcdcdc; 
	z-index: 6;
}


/* ------------------nav barre---------------- */

#header{
	width: 95vw;
	display: flex;
	font-family: PingFangTC-Regular;
	font-size: 0.8em;
	text-decoration: none;
	text-transform: uppercase;
}

#boite_logo{
	width: 55vw;
}

#logo2{
	height: auto;
	width: 15vw;
	margin: 2vh 30px;
	position: fixed;
	top: 1vh;
	right: 80vw;
	z-index: 5;
}

#cv,#portfolio,#portfolio2,#showreel,#about{
    text-align: end;
	text-decoration: none;
	color: var(--ecriture);
	margin-top: 5vh;
	width: 9vw;
	position: fixed;
	top: 1vh;
	right: 32vw;
	z-index: 5;
	transition: 0.5s;
}

#cv:hover{
	color: #464646;
	font-family: PingFangTC-Medium; 
	letter-spacing: 2px;
	transition: 0.5s;
}

#portfolio:hover{
	color: #464646;
	font-family: PingFangTC-Medium; 
	letter-spacing: 2px;
	transition: 0.5s;
}

#portfolio2:hover{
	color: #464646;
	font-family: PingFangTC-Medium; 
	letter-spacing: 2px;
	transition: 0.5s;
}

#showreel:hover{
	color: #464646;
	font-family: PingFangTC-Medium; 
	letter-spacing: 2px;
	transition: 0.5s;
}

#about:hover{
	color: #464646;
	font-family: PingFangTC-Medium; 
	letter-spacing: 2px;
	transition: 0.5s;
}

#portfolio{
	right: 23vw;
	z-index: 5;
}

#portfolio2{
	right: 23vw;
	filter: opacity(0%);
	z-index: 4;
}

#showreel{
	right: 14vw;
}

#about{
	right: 5vw;
}


/*--------------------- liste des projets -----------------*/

#miniature{
	width: 35vw;
	height: 75vh;
	margin-top: 170px;
	margin-left: 15vw;
	margin-bottom: 50px;
	filter: opacity(50%);
}

.minia_tel{
	width: 90vw;
	height: 53vw;
	margin: 10px auto 70px;
	overflow: hidden;
	display: none;
}

#mt1{
	width: 90vw;
	height: auto;
	display: none;
}

#m18,#m19,#m20{
	width: 25vw;
	height: auto;
}


#projets{
	width: 50vw;
	height: 60vh;
	position: absolute;
	top: 130vh;
	right: 5vw;
	display: grid;
	grid-template-columns: 25vw 20vw 5vw; 
}

.date_projet{
	text-align: end;
}


.ligne{
	border-bottom: 1px var(--ecriture) solid;
	height: 3.3vh;
	margin-bottom: 2px;
}

h2{

	text-transform: uppercase;
	padding-top: 8px;
	font-size: 0.7em;
}

h1{
	font-family: PingFangTC-Regular;
	text-transform: uppercase;
	font-size: 0.8em;
	padding-top: 6px;
}

h4{
	padding-top: 8px;
	text-align: end;
	font-size: 0.8em;
}


.fuir,.memoire,.chambre-noire,.cotage,.lettrage,.cabinet,.affiches,.echo,.portrait,
.ravage,.madfest,.illusion,.paysages,.modelisation,.daily,.ravel,.croquis{
	text-decoration: none;
	color: var(--ecriture);
}



/* --------------------- pages projets --------------------- */

.video2{
	width: 75vw;
	height: 85vh;
	margin: 80px auto 10px;
	display: flex;
}

#zone_vide2{
	height: 160px;
}

#zone_vide3{
	height: 80px;
}

#photos,#photos3,#photos9,#photo10{
	display: flex;
}

#photos2{
	margin: 80px 3vw 0vh;
}

#photos4{
	float: right;
	display: flex;
	margin: 20px 5vw 0vh;
}

#photos5,.photos7{
	margin-left: 20vw;
	display: flex;
}

#photos6,.photos8{
	margin-left: 5vw;
	display: flex;
}

#photos7{
	margin-top: 40px;
	margin-bottom: 80px;
	margin-left: 35vw;
}

#photos8{
	margin-top: 40px;
	margin-bottom: 200px;
	margin-left: 25vw;
}

#photos10{
	width: 95vw;
	margin-top: 80px;
	margin-left: 5vw;
	display: flex;
	justify-content: space-around;
}



#p1{
	padding-top: 15vh;
	margin: auto;
	width: 30vw;
	height: auto;
	margin-bottom: 60px;
}


.p2{
	margin: 40px auto 0px;
	width: 40vw;
	height: auto;
	display: flex;
}

.p3{
	width: 30vw;
	height: auto;
	display: flex;
}

.p4{
	margin: 10px auto 0px;
	width: 40vw;
	height: auto;
	display: flex;
}

.p5{
	margin: 10px 0px 0px 80px;
	width: 40vw;
	height: auto;
	display: flex;
	position: absolute;
	opacity: 0%;
	transition: 0.5s;
}

.p5:hover{
	opacity: 100%;
	transition: 0.5s;
}


#p5{
	margin: 80px auto;
	width: 40vw;
	height: auto;
	display: flex;
}

#p6,#p7{
	margin: 80px;
	width: 30vw;
	height: auto;
}

#p8{
	margin: 80px auto;
	width: 40vw;
	height: auto;
	display: flex;
}

#p9{
	width: 45vw;
	height: auto;
	margin-top: 20px;
	margin-bottom: 10vh;
	float: right; 
	display: flex;
}

#p10{
	width: 70vw;
	height: auto;
	margin: 80px 5vw;
}

#p11{
	width: 70vw;
	height: auto;
	display: flex;
	margin: 80px auto;
}

#p12{
	width: 70vw;
	height: auto;
	display: flex;
	margin-top: 80px;
	margin-bottom: 80px;
	float: right;
}

#p13{
	width: 40vw;
	height: auto;
	margin: 100px 0px;
}


.p14{
	width: 30vw;
	height: auto;
	margin-top: 5vh;
	margin-left: 10px;
}

#p14{
	width: 30vw;
	height: auto;
	margin: 10px 5vw 80px;
	display: flex;
	float: right;
}

#p15{
	margin: 800px auto 80px;
	width: 35vw;
	height: auto;
	display: flex;
}

.p16{
	width: 25vw;
	height: auto;
	display: flex;
	margin: 150px 5px 80px;
}

#p17{
	padding-top: 15vh;
	margin: auto;
	width: 30vw;
	height: auto;
	margin-bottom: 80px;
}

#p18{
	padding-top: 20vh;
	margin: auto;
	width: 50vw;
	height: auto;
	margin-bottom: 80px;
}

#p19{
	width: 60vw;
	height: auto;
	margin: 130px 0px;
}

.p20{
	width: 30vw;
	height: auto;
	margin-left: 60vw;
	margin-bottom: 80px;
}

.p21{
	width: 25vw;
	height: auto;
	margin-right: 5px;
	margin-bottom: 10px;
}

#p22{
	width: 60vw;
	height: auto;
	display: flex;
	margin-top: 80px;
	margin-bottom: 130px;
	margin-left: 38vw;
}

.p22{
	width: 30vw;
	height: auto;
}

.p23{
	width: 35vw;
	height: auto;
	margin-left: 20px;
}

#p23{
	padding-top: 20vh;
	margin-left: 10vw;
	width: 50vw;
	height: auto;
	margin-bottom: 80px;
}

#p24{
	margin-bottom: 10vh;
}

#p25{
	width: 45vw;
	height: auto;
	margin: 200px 5vw 80px;
	display: flex;
	float: right;
}

#p26{
	margin: 80px;
	width: 20vw;
	height: auto;
}

#p27{
	width: 40vw;
	height: auto;
	margin: 80px 5vw 80px;
	display: flex;
}

#p28{
	width: 35vw;
	height: auto;
	margin: 80px auto 80px;
	display: flex;
}

#p29{
	width: 45vw;
	height: auto;
	margin: 80px 5vw 80px;
	display: flex;
	margin-left: 50vw;
}

#p30{
	width: 30vw;
	height: auto;
	margin: 80px 10vw 80px;
}

#p31{
	width: 35vw;
	height: 35vw;
	margin: 80px 5vw 80px;
}

#p32{
	width: 40vw;
	height: auto;
	margin-left: 50vw;
	margin-bottom: 80px;
}
#p33{
	padding-top: 20vh;
	margin: auto;
	width: 35vw;
	height: auto;
	margin-bottom: 80px;
}

#p34{
	width: 60vw;
	height: auto;
	margin-top: 130px;
	margin-left: 40vw;
}

#p35{
	padding-top: 17vh;
	margin: auto;
	width: 25vw;
	height: auto;
	margin-bottom: 60px;
}

#p36{
	width: 30%;
    height: auto;
}

#p37{
	width: 30%;
    height: auto;
}

#p38{
	margin: 80px auto;
	width: 30vw;
	height: auto;
	display: flex;
}

#p39{
	width: 30vw;
	height: auto;
	margin: 200px auto;
}

#p40{
	margin: 50px auto 200px;
	width: 50vw;
	height: auto;
	display: flex;
}

#p41{
	width: 70vw;
	height: auto;
	display: flex;
	margin: 120px auto;
}




/* -----------------page à propos------------------ */

#photo9{
	display: flex;
	width: 98vw;
	margin-bottom: 200px;
}

#photo_moi{
	width: 25vw;
	height: auto;
	margin-top: 180px;
	margin-left: 20vw;
	display: flex;
}

/* #photo_moi:hover{
	transform: scale(101%);
	box-shadow: 0px 0px 20px 10px #ffffff;
	border-radius: 20px;
	transition: 0.5s;
} */

#presentation{
	width: 39vw;
	margin-top: 60vh;
	margin-left: 5vw;
	font-size: 0.9em;
	line-height: 1.2em;
	font-family: PingFangTC-Regular;
	text-transform: uppercase;	
	
}

#typo_contacts{
	font-size: 0.9em;
	margin: 30px 100px;
	line-height: 1.5em;
	font-family: PingFangTC-Regular;
	text-transform: uppercase;	
}

#insta{
	font-size: 1em;
	text-decoration: none;
	color: var(--ecriture);
}


#typo_galerie{
	margin: 100px 80vw -250px;
}

#galerie{
	margin-top: 300px;
	width: 100vw;
	height: auto;
}


/*-------------------inspirations--------------------*/

#i1{
	position: absolute;
	left: 30px;
	top: 2500px;
	max-width: 20vw;
	z-index: 3;
}

#i2{
	position: absolute;
	left: 20vw;
	top: 2700px;
	max-width: 19vw;
	z-index: 4;
}

#t1{
	position: absolute;
	left: 25vw;
	top: 2600px;	
	font-family: "times-italic";
	text-transform: uppercase;
	color: white;
	font-size: 3em;
	margin: 0px 30px 0px;
	padding-top: 30px;
	z-index: 5;
}

#i9{
	position: absolute;
	left: 60vw;
	top: 2500px;
	max-width: 30vw;
	z-index: 3;
}

#t2{
	position: absolute;
	left: 45vw;
	top: 2800px;
	font-family: "times-italic";
	text-transform: uppercase;
	color: white;
	font-size: 3em;
	margin: 0px 30px 0px;
	padding-top: 30px;
	z-index: 5;
}

#i3{
	position: absolute;
	left: 60vw;
	top: 3100px;
	max-width: 30vw;
	z-index: 3;
}

#i4{
	position: absolute;
	left: 32vw;
	top: 3250px;
	max-width: 30vw;
	z-index: 4;
}

#t3{
	position: absolute;
	left: 25vw;
	top: 3225px;
	font-family: "times-italic";
	text-transform: uppercase;
	color: white;
	font-size: 3em;
	margin: 0px 30px 0px;
	padding-top: 30px;
	z-index: 5;
}

#i6{
	position: absolute;
	left: 50vw;
	top: 3850px;
	max-width: 40vw;
	z-index: 3;
}

#t4{
	position: absolute;
	left: 40vw;
	top: 3775px;
	font-family: "times-italic";
	text-transform: uppercase;
	color: white;
	font-size: 3em;
	margin: 0px 30px 0px;
	padding-top: 30px;
	z-index: 5;
}

#i7{
	position: absolute;
	left: 30px;
	top: 4000px;
	max-width: 40vw;
	z-index: 3;
}

#i8{
	position: absolute;
	left: 30px;
	top: 4350px;
	max-width: 40vw;
	z-index: 4;
}

#t5{
	position: absolute;
	left: 20vw;
	top: 3975px;	
	font-family: "times-italic";
	text-transform: uppercase;
	color: white;
	font-size: 3em;
	margin: 0px 30px 0px;
	padding-top: 30px;
	z-index: 5;
}

#i10{
	position: absolute;
	left: 50vw;
	top: 4800px;
	max-width: 40vw;
	z-index: 3;
}

#i11{
	position: absolute;
	left: 50vw;
	top: 5300px;
	max-width: 40vw;
	z-index: 5;
}

#i12{
	position: absolute;
	left: 50px;
	top: 5200px;
	max-width: 40vw;
	z-index: 5;
}

#t6{
	position: absolute;
	left: 45vw;
	top: 4750px;
	font-family: "times-italic";
	text-transform: uppercase;
	color: white;
	font-size: 3em;
	margin: 0px 30px 0px;
	padding-top: 30px;
	z-index: 5;
}

#i5{
	position: absolute;
	max-width: 70vw;
	top: 2500px;
	z-index: 2;
}

#footer2{
	position: absolute;
	height: 80px;
	width: 10vw;
	top: 4600px;
}


#typo_inspi{
	position: absolute;
	top: 2350px;
	right: 30px;
	z-index: 5;
}


.class1.scroll,.class2.scroll,.class3.scroll,.class6.scroll,
.class7.scroll,.class8.scroll,.class9.scroll,.class10.scroll,
#insta.scroll,.class12.scroll{
	color: #00ff00;
}

.class4.scroll{
	background-color: #010302;
}

.class4{
	transition: all 0.75s ease-in-out;
}


.class5{
	filter: opacity(0%);
	transition: all 0.75s ease-in-out;
}

.class5.scroll{
	filter: opacity(100%);
}

#logo3_vert{
	height: auto;
	width: 15vw;
	margin: 2vh 30px;
	position: fixed;
	top: 1vh;
	right: 80vw;
	z-index: 4;
}


h3{
	font-family: times-italic;
	font-size: 3em;
	color: var(--ecriture);
	text-transform: uppercase;
	margin-left: 30px;
}


/* -------- descriptions projets -------- */

#cache_projet{
	width: 100%;
	height: 100lvh;
	background-color: #dcdcdc;
	filter: opacity(95%);
	position: fixed;
	z-index: 1;
	top: 0px;

}

#tableau{
	border: 1.5px var(--ecriture) solid;
	width: 80vw;
	height: 35vh;
	position: absolute;
	top: 55vh;
	left: 50%;
    transform: translate(-50%);
}

#haut{
	width: 80vw;
	height: 25vh;
	border-bottom: 1.5px var(--ecriture) solid;
	display: flex;
}

#description{
	width: 60vw;
	height: 25vh;
	border-right: 1.5px var(--ecriture) solid;
}

#nom{
	width: 20vw;
	height: 8.3vh;
	border-bottom: 1.5px var(--ecriture) solid;
}

#nature{
	width: 20vw;
	height: 8.3vh;
	border-bottom: 1.5px var(--ecriture) solid;
}

.titre{
	padding: 5px 10px 10px;
	font-family: PingFangTC-Medium;
	text-transform: uppercase;
	font-size: 0.6em;
}

.sous_titre{
	text-align: center;
	max-width: 80vw;
	font-family: ClashDisplay-Regular;
	font-size: 1vw;
}

.description{
	padding: 10px;
	max-width:70vw;
	max-height: 18vh;
	font-family: ClashDisplay-Regular;
	font-size: 0.9vw;
	line-height: 1.2em;
	word-wrap: break-word;
}

.lien{
	text-decoration: none;
	color: var(--ecriture);
}

.lien_memoire{
	text-decoration: none;
	color: var(--ecriture);
	font-size: 0.8em;
}

#precedent{
	display: flex;
	position: fixed;
	bottom: 30px;
	right: 30px;
	font-size: 0.9em;
}

#info{
	position: fixed;
	bottom: 30px;
	left: 30px;
	font-size: 0.9em;
	cursor: pointer;
}

#-info{
	position: fixed;
	bottom: 30px;
	left: 30px;
	font-size: 0.9em;
	z-index: 10;
	cursor: pointer;
}

#info_tel{
	filter: opacity(0%);
	position: fixed;
	width: 10vw;
	right: 20px;
	bottom: 20px;
	z-index: -10;
}

#-info_tel{
	filter: opacity(0%);
	position: fixed;
	width: 10vw;
	right: 20px;
	bottom: 20px;
	z-index: 10;
}

#gauche{
	filter: opacity(0%);
	position: fixed;
	width: 20px;
	height: auto;
	left: 20px;
	top: 50vh;
}

#droite{
	filter: opacity(0%);
	position: fixed;
	width: 20px;
	height: auto;
	right: 30px;
	top: 50vh;
}