/* ------------ Section intro ------------ */

/* Bandeau pleine page */
section#home {
	background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 1)), url("../images/fond.webp") no-repeat center center/cover;
	color: white;
	height: 100vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

/* Logo intro */
.img_logo {
	width: 50vw;
	margin: 9vh 0;
	transition: transform 0.5s;
}

/* Logo intro */
.img_logo:hover {
	transform: scale(1.02);
}

/* Lien bande démo */
.lien_demo {
	font-family: Andale Mono, Arial;
	color: white;
	text-decoration: none;
	transition: transform 0.5s;
}

/* Lien intro */
.lien_demo:hover {
	text-decoration: underline;
	transform: scale(1.05);
}

/* Flèche scroll page */
.fleche {
	position: absolute;
	left: 50%;
	top: 83vh;
	transition: opacity .3s;
}

/* Logo flèche scroll */
#logo_fleche {
	position: absolute;
	width: 24px;
	height: 24px;
	margin-left: -12px;
	border-left: 1px solid #fff;
	border-bottom: 1px solid #fff;
	transform: rotate(-45deg);
	box-sizing: border-box;
	transition: 0.3s;
}

/* Logo flèche scroll - pointeur dessus */
.fleche:hover #logo_fleche {
	width: 28px;
	height: 28px;
	margin-left: -14px;
}

/* Durée animation flèche scroll */
.bounce {
  animation: bounce 2s infinite;
}

/* Animation flèche scroll */
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0) rotate(-45deg);
  }
  40% {
    transform: translateY(-10px) rotate(-45deg);
  }
  60% {
    transform: translateY(-5px) rotate(-45deg);
  }
}


/* -------------- Polaroids -------------- */

/* Polaroid */
.polaroid {
	position:absolute;
	background: white;
	padding: 0.5vw 0.5vw 2.4vw 0.5vw;
	box-shadow: 0.2vw 0.2vw 12px black;
	text-align: center;
	width: 10vw;
	height: 10vw;
	transition: transform 0.5s;
}

/* Taille des images dans les polaroids */
.img_polaroid {
	width: 100%;
	height: 100%;
	background-color: #1C1C1E;
}

/* Photo lien - Projets */
#photo1 {
	transform: rotate(-8deg);
	z-index: 300;
	top: 17vw;
	left: 9vw;
	transition: transform 0.5s;
}

#photo1:hover {
	transform: rotate(-12deg) scale(1.1);
}

/* Photo lien - Boutique */
#photo2 {
	transform: rotate(14deg);
	z-index: 250;
	top: 29vw;
	left: 10vw;
}

#photo2:hover {
	transform: rotate(8deg) scale(1.1);
}

/* Photo lien - Vidéos */
#photo3 {
	transform: rotate(11deg);
	z-index: 200;
	top: 10vw;
	left: 18vw;
}

#photo3:hover {
	transform: rotate(6deg) scale(1.1);
}

/* Photo lien - Photos */
#photo4 {
	transform: rotate(-20deg);
	z-index: 230;
	top: 39vw;
	left: 5vw;
}

#photo4:hover {
	transform: rotate(-10deg) scale(1.1);
}


/* ---------- Section À propos ----------- */

/* Image demi écran */
.img_demi {
	float: left;
	width: 45.5vw;
	height: 25.59vw;
	border-radius: 14px;
	overflow: hidden;
}

/* Image à propos */
.img_demi img {
	width: 100%;
	transition: transform 0.5s;
}

/* Image à propos - pointeur dessus */
.img_demi:hover img {
	transform: scale(1.03);
}

/* Texte à propos */
.texte_demi {
	float: left;
	font-family: Andale Mono, Arial;
	color : white;
	margin: 0vw 8vw;
	width: 35.5vw;
	line-height: 2.2vw;
	font-size: 1.2vw;
	text-align: center;
}


/* ---------- Section portfolio ---------- */

/* Lien portfolio */
section#portfolio {
	font-family: Andale Mono, Arial;
	text-align: center;
}

/* Titres projets portfolio */
section#portfolio h3 {
	color : red;
}

/* Bande Démo */
.bande-demo {
	margin: 20px auto;
	margin-bottom: 5vw;
	width: 80vw;
	height: 45vw;
	max-width: 800px;
	max-height: 450px;
	border-radius: 14px;
	overflow: hidden;
	transition: transform 0.5s;
}

/* Vidéo Bande Démo */
.miniature_demo {
	width: 100%;
}

/* Bande Démo - pointeur dessus */
.bande-demo:hover {
	transform: scale(1.03);
}

/* Flèche lecture */
.play {
	display: none;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 10%;
}

/* Image flèche lecture */
.play img {
	width: 100%;
}

/* Image flèche lecture - pointeur dessus */
.bande-demo:hover .miniature_demo {
	opacity: 0.7;
}

/* Flèche lecture - pointeur dessus */
.bande-demo:hover .play {
	display: block;

}

.projet {
	position: relative;
	float: left;
	width: 29.333vw;
	margin-left: 3vw;
	margin-bottom: 3vw;
	text-align: center;
	color: white;
}

.projet img {
	width: 100%;
	height: auto;
}

.projet video {
	width: 100%;
	height: auto;
}

.projet p {
	font-size: 0.8em;
}

/* Lien portfolio */
section#portfolio a {
	color: grey;
	text-decoration: none;
}

/* Lien intro */
section#portfolio a:hover {
	text-decoration: underline;
}


/* ------------ Frise type Bus ----------- */

/* Frise */
.frise {
	margin-top: 3vw;
	overflow: hidden;
	position: relative;
	height: 8vw;
	background-color: #1C1C1E;
}

/* Biseau */
.frise::before,
.frise::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 0.5px;
  background: rgba(255, 255, 255, 0.5);
  filter: blur(0.5px);
  pointer-events: none;
}

.frise::before {
  top: 0;
}

.frise::after {
  bottom: 0;
}

/* Noms des applications */
.scrolling-text {
	white-space: nowrap;
}

/* Logos des applications */
.scrolling-text img {
	padding: 1vw;
	vertical-align: middle;
	height: 6vw;
	width: auto;
}

/* Liens des applications */
.scrolling-text a {
	font-family: Andale Mono, Arial;
	text-decoration: none;
	color: white;
}


/* ------------ Section Photo ------------ */

/* Polaroid de section image */
.sc_polaroid {
	position: relative;
	float: left;
	margin-top: 1vw;
	margin-left: 3vw;
	margin-bottom: 8vw;
	background: white;
	padding: 1vw 1vw 5.5vw 1vw;
	box-shadow: 0.2vw 0.2vw 12px black;
	text-align: center;
	width: 19.25vw;
	height: 19.25vw;
	overflow: hidden;
	transition: transform 0.5s;
}

#sc_polaroid_1 {
	transform: rotate(-16deg) translate(5vw, 4vw);
}
#sc_polaroid_1:hover {
	transform: rotate(-10deg) translate(4vw, 2vw) scale(1.05);
}

#sc_polaroid_2 {
		transform: rotate(-5deg) translate(2vw, 2vw);
}
#sc_polaroid_2:hover {
		transform: rotate(-3deg) translate(1vw, 1vw) scale(1.05);
}

#sc_polaroid_3 {
	transform: rotate(5deg) translate(-2vw, 5vw);
}
#sc_polaroid_3:hover {
	transform: rotate(3deg) translate(-3vw, 3vw) scale(1.05);
}

#sc_polaroid_4 {
	transform: rotate(16deg) translate(-5vw, 4vw);
}
#sc_polaroid_4:hover {
	transform: rotate(10deg) translate(-7vw, 2vw) scale(1.05);
}



/* ------------ Section Vidéo ------------ */

/* Trous de pellicule */
.gr_hole {
  white-space: nowrap;
  font-size: 0;
  line-height: 0;
}

/* Trous de pellicule */
.hole {
  display: inline-block;
  margin: 1vw 1.28vw 1vw 0;
  width: 1.28vw; /* multiples de 32 divisible par un nombre impair */
  height: 2vw;
  border-radius: 0.3vw;
  background-color: black;
}

/* Pellicule */
.pellicule {
	position: relative;
	overflow: hidden;
	height: 26vw;
	background-color: #1C1C1E;
}

/* Groupe d'image pellicule */
.scrolling-images {
	white-space: nowrap;
  font-size: 0;
  line-height: 0;
}

/* Image pellicule */
.scrolling-images img {
	margin-left: 1.28vw;
	vertical-align: middle;
	height: 18vw;
	width: 32vw; /* ratio 16/9 de height 18 */
	border-radius: 1vw;
	transition: filter 0.5s;
}

/* Image pellicule */
.scrolling-images img:hover {
	filter: brightness(0.5);
}


/* ----------- Version mobile ------------ */

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

	/* Sous-titres - categories */
	h2 {
		font-size: 1.8em;
	}

	/* Scetion défilement */
	#section1 {
		margin-top: -54px;
		height: 54px;
	}

	/* --- Section intro --- */

	/* Logo intro */
	.img_logo {
		width: 80vw;
		max-width: 400px;
		margin: 5vh 0;
		margin-top: -5vh;
	}

	.lien_demo {
		margin-bottom: 2vh;
	}

	/* --- Polaroids --- */

	/* Groupe de Polaroids */
	.gr_polaroids {
		position: relative;
		width: 50vw;
		height: 50vw;
		margin-top: 5vh;
		max-width: 200px;
		max-height: 200px;
	}

	/* Polaroid */
	.polaroid {
		padding: 2% 2% 8% 2%;
		width: 40%;
		height: 40%;
	}

	/* Photo lien Projets */
	#photo1 {
		transform: rotate(-8deg);
		top: 37%;
		left: 8%;
	}
	#photo1:hover {
		transform: rotate(-8deg) scale(1);
	}

	/* Photo lien Boutique */
	#photo2 {
		transform: rotate(14deg);
		top: 39%;
		left: 48%;
	}
	#photo2:hover {
		transform: rotate(14deg) scale(1);
	}

	/* Photo lien Vidéos */
	#photo3 {
		transform: rotate(11deg);
		top: 3%;
		left: 4%;
	}
	#photo3:hover {
		transform: rotate(11deg) scale(1);
	}

	/* Photo lien Photos */
	#photo4 {
		transform: rotate(-20deg);
		top: 3%;
		left: 45%;
	}
	#photo4:hover {
		transform: rotate(-20deg) scale(1);
	}


	/* --- Section à propos --- */

	/* Image demi écran */
	.img_demi {
		margin: 0 5vw;
		margin-bottom: 5vw;
		width: 90vw;
		height: 50.65vw;
		border-radius: 4vw;
	}
	
	/* Image à propos - pointeur dessus */
	.img_demi:hover {
		transform: scale(1);
	}

	/* Texte à propos */
	.texte_demi {
		margin: 0 5vw;
		margin-bottom: 5vw;
		width: 90vw;
		height: auto;
		line-height: 1.2em;
		font-size: 1em;
	}

	/* --- Section portfolio --- */
	.bande-demo {
		width: 90vw;
		height: 50.625vw;
		margin-bottom: 15vw;
		max-width: none;
		max-height: none;
	}
	/* Image à propos - pointeur dessus */
	.bande-demo:hover {
		transform: scale(1);
	}

	.projet {
		width: 90vw;
		margin-left: 5vw;
		margin-bottom: 15vw;
	}

	/* Image flèche lecture - pointeur dessus */
	.bande-demo:hover .miniature_demo {
		opacity: 1;
	}

	/* Flèche lecture - pointeur dessus */
	.bande-demo:hover .play {
		display: none;

	}


	/* --- Frise type Bus --- */

	/* Frise */
	.frise {
		margin-top: 20vw;
		height: 16vw;
	}

	/* Noms des applications */
	.scrolling-text {
		white-space: nowrap;
		position: absolute;
		color: white;
	}

	/* Logos des applications */
	.scrolling-text img {
		height: 14vw;
	}

	/* --- Section photo --- */

	/* Polaroid de section image */
	.sc_polaroid {
		margin-left: 30.75vw;
		margin-bottom: -10vw;
		padding: 2vw 2vw 11vw 2vw;
		width: 38.5vw;
		height: 38.5vw;
	}

	#sc_polaroid_1 {
		transform: rotate(-16deg) translate(3vw, 5vw);
	}
	#sc_polaroid_1:hover {
		transform: rotate(-16deg) translate(3vw, 5vw);
	}

	#sc_polaroid_2 {
			transform: rotate(-5deg) translate(-10vw, -2vw);
	}
	#sc_polaroid_2:hover {
			transform: rotate(-5deg) translate(-10vw, -2vw);
	}

	#sc_polaroid_3 {
		transform: rotate(7deg) translate(8vw, -12vw);
	}
	#sc_polaroid_3:hover {
		transform: rotate(7deg) translate(8vw, -12vw);
	}

	#sc_polaroid_4 {
		transform: rotate(-14deg) translate(-5vw, -20vw);
	}
	#sc_polaroid_4:hover {
		transform: rotate(-14deg) translate(-5vw, -20vw);
	}


	/* --- Section vidéo --- */
	/* Multiplications par 2 */

	/* Trous de pellicule */
	.hole {
	  margin: 2vw 2.56vw 2vw 0;
	  width: 2.56vw;
	  height: 4vw;
	  border-radius: 0.6vw;
	}

	/* Pellicule */
	.pellicule {
		height: 52vw;
	}

	/* Image pellicule */
	.scrolling-images img {
		margin-left: 3vw;
		height: 36vw;
		width: 64vw;
		border-radius: 2vw;
	}

	/* Image pellicule */
	.scrolling-images img:hover {
		filter: brightness(1);
	}

}