@charset "UTF-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css2?family=Antic+Didone&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Cormorant:wght@300&display=swap');

@import url('https://fonts.googleapis.com/css2?family=League+Gothic&display=swap');

.contenu{
	position: relative;
    width: 100vw;
    height: 100vh;
	background-color: #F0F0F0;
}


.projet{
	padding-top: 65px;
	text-decoration: none;
	padding-bottom: 100px;
}

.projet .ul {
	display: block;
	margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}

.article{
	transition: 2s ease-in-out;
}

.projet .ul .li{
	list-style: none;
	width: 98%;
	margin-left: 2%;
}

.projet .ul .li .a{
	display: block;
	text-align: left;
	font-size: 7.5vw;
	text-decoration: none;
	cursor: pointer;
	transition: 1s;
	font-family: "Gloock", serif;
  font-weight: 400;
  font-style: normal;
	margin-bottom: 1%;
	margin-top: 25px;
}

.texte{
	font-size: 32px;
    position: relative;
    display: block;
    text-decoration: none;
    height: auto;
}

.soustitre{
	font-size: 32px;
	margin-left: 2%;
    position: relative;
    display: block;
    text-decoration: none;
    height: auto;
    font-family: 'Milliard Hairline';
	-webkit-font-family: 'Milliard Hairline';
	padding-top: 0px;
}

.explication{
	font-size: 32px;
	margin-bottom: 5vw;
	margin-top: 5vw;
    position: relative;
    display: block;
    text-decoration: none;
    height: auto;
    font-family: 'Milliard Hairline';
	-webkit-font-family: 'Milliard Hairline';
	padding-top: 0px;
    width: 930px;
}

.galerie{
	width: 80vw;
	margin-left: 10vw;
	padding-bottom: 50px;
}

.lien_texte{
	color: black;
	text-decoration-color: none;
	text-decoration-line: underline;
	text-decoration-thickness: from-font;
	
}


.image1{
	margin-top: 10vh;
	height: auto;
	animation: appear 1.5s ease-in-out;
	animation-delay: 1600;
	padding-top: 0px;
}

@keyframes appear {
	from {opacity: 0; padding-top: 50px;}
	to {opacity: 1; padding-top: 0px;}
}

.image1 img{
	width: 100%;
	height: 100%;
}

.image img{
	width: 100%;
	height: 100%;
}
video{
	width: 100%;
}


#images{
	position: relative;
}

#titre{
	position: relative;
}

#next{
	position: fixed;
}

.next{
	margin-left: 1.5%;
	transition: 0.9s ease-in-out;
	margin-bottom: -11%;
	bottom: 0;
	opacity: 0;
	display: block;
	text-align: right;
	font-size: 3.5vw;
  	font-family: 'League Gothic', sans-serif;
	-webkit-font-family: 'League Gothic', sans-serif;
}
.next.scroll{
	margin-bottom: 10px;
	bottom: 0;
	opacity: 1;
	display: block;
	text-align: right;
	font-size: 3.5vw;
  	font-family: 'League Gothic', sans-serif;
	-webkit-font-family: 'League Gothic', sans-serif;
}
.next a{
	text-decoration: none;
	transition: 0.6s ease-in-out;
}

.next a:hover{
	transition-duration: 1s;
	letter-spacing: 1px;
	transition-delay: 0.6s ease-in-out;
}