body {
	background-image: none;
}

/* Titres h3 */
h3 {
	color : red;
	font-family: Andale Mono, Arial;
	text-align: center;
}

/* --------- Vignette largeur 1 ---------- */

/* Espaces rectengulaire des projets */
.carton_projet {
	margin-bottom: 4vw;
	margin-left: 4vw;
	width: 92vw;
	height: 65vw;
	background-color: #232323; /* Violet #252130 */
	border-radius: 14px;
}

/* Projets */
.projet {
	width: 100%;
}

/* Vidéo d'apercu du projet */
.video_projet {
	position: absolute;
	z-index: 2;
	border: none;
	margin-top: 37.85%;
	margin-left: 3.1%;
	width: 42.9vw;
	height: 24.1vw;
	background-color: black;
	border-radius: 7px;
}

/* --------- Vignette largeur 2 ---------- */

/* Vignette (demi écran) */
.vignette_demi {
	float: left;
	width: 45.5vw;
	height: 25.59vw;
	margin-left: 3vw;
	margin-bottom: 3vw;
	border-radius: 14px;
	overflow: hidden;
	transition: transform 0.5s;
}

/* Image vignette */
.vignette_demi img {
	width: 100%;
}

/* Image vignette comportant des lien - pointeur dessus */
a .vignette_demi:hover .img_projet {
	opacity: 0.5;
}

/* Vignette (demi écran) - pointeur dessus */
a .vignette_demi:hover {
	transform: scale(1.03);
}

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

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

/* Texte vignette */
.texte_overlay {
	opacity: 0;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-family: Andale Mono;
	font-size: 2vw;
	line-height: 1.5;
	color: white;
}

/* Texte vignette - pointeur sur vignette */
	.vignette_demi:hover .texte_overlay {
		opacity: 1;
	}


/* ----------- Texte largeur 2 ----------- */

/* Type de projet & année */
.texte_demi_titre {
	color: red;
	font-size: 2vw;
}

/* Personnes du projet */
.texte_demi_sous-titre {
	text-align: left;
	color: gray;
	font-size: 1.2vw;
}

/* Lien texte */
p a {
	color: red;
	text-decoration: none;
}

/* Lien texte - pointeur dessus */
p a:hover {
	color: grey;
}

/* Despription (demi écran) */
.texte_demi {
	float: left;
	width: 45.5vw;
	height: 25.59vw;
	margin-left: 3vw;
	margin-bottom: 3vw;
	color: white;
	font-family: Andale Mono;
	font-size: 1vw;
	line-height: 1.5;
	text-align: justify;
}


/* ---- Vignette comparaison largeur 2 --- */

/* Vignette compare */
.vignette_compare {
	float: left;
	position: relative;
	width: 45.5vw;
	height: 25.59vw;
	margin-left: 3vw;
	margin-bottom: 3vw;
	border-radius: 14px;
	overflow: hidden;
}

/* Conteneur du slider */
.slider {
  position:relative;
  height:0px;
  padding-bottom:66.666666667%;
}

/* Image après */
.slider_after {
  position:absolute;
  top:0px;
  left:0px;
  z-index:1;
  width:100%;
  height:100%;
  background-size: 45.5vw;
  pointer-events: none;
}

/* Image avant */
.slider_before {
  position:absolute;
  top:0px;
  left:0px;
  z-index:2;
  width:50%;
  height:100%;
  background-size: 45.5vw;
  pointer-events: none;
  overflow:hidden;
}

/* Barre de séparation */
.slider_separator {
  position:absolute;
  left:50%;
  width: 22px;
  outline: 2px solid rgba(255, 255, 255, 0.7);
  outline-offset: -12px;
  margin-top: -5vw;
  height: 35.59vw;
  top:0px;
  bottom:0px;
  cursor:ew-resize;
  z-index:3;
  transform:translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Flèches gauche et droite */
.slider_separator::before,
.slider_separator::after {
  content: '';
  width: 12px;
  height: 12px;
  border: solid white;
  border-width: 2px 2px 0 0;
  position: absolute;
  transition: left 0.3s ease, right 0.3s ease;
}

/* Flèche gauche */
.slider_separator::before {
  transform: rotate(-135deg);
  left: -10px;
}

/* Flèche gauche - au survol */
.slider_separator:hover::before {
  left: -15px;
}

/* Flèche droite */
.slider_separator::after {
  transform: rotate(45deg);
  right: -10px;
}

/* Flèche droite - au survol */
.slider_separator:hover::after {
  right: -15px;
}

.slider_range {
  position:absolute;
  width:100%;
  bottom:0px;
  z-index: 3;
  appearance: none;
  background:rgba(255,255,255,0.3);
  outline:none;
  margin:0px;
}

.slider_range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width:12px;
  height:16px;
  background:white;
}

.slider_range::-moz-slider-thumb {
  -moz-appearance: none;
  width:12px;
  height:16px;
  background:white;
}

.slider .slider_range {
  display:none;
}


/* ---------- Projets largeur 3 ---------- */

/* Projets largeur 3 */
.projet_tiers {
	position: relative;
	float: left;
	width: 29.333vw;
	margin-left: 3vw;
	margin-bottom: 3vw;
	text-align: center;
	color: white;
	transition: transform 0.5s;
}

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


/* --------- Vignette largeur 3 ---------- */

/* Vignette (tiers écran) */
.vignette_tiers {
	float: left;
	width: 29.333vw;
	height: 16.5vw;
	margin-left: 3vw;
	margin-bottom: 3vw;
	border-radius: 14px;
	overflow: hidden;
	transition: transform 0.5s;
}

/* Image vignette */
.vignette_tiers img {
	width: 100%;
}

/* Image vignette */
.vignette_tiers video {
	width: 100%;
}

/* Image vignette comportant des lien - pointeur dessus */
a .vignette_tiers:hover .img_projet {
	opacity: 0.5;
}

/* Vignette (tiers écran) - pointeur dessus */
a .vignette_tiers:hover {
	transform: scale(1.03);
}

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


/* --------- Vignette largeur 4 ---------- */

/* Vignette carré (quart écran) */
.vignette_quart {
	float: left;
	width: 21.25vw;
	height: 16.5vw;
	margin-left: 3vw;
	margin-bottom: 3vw;
	border-radius: 14px;
	overflow: hidden;
	transition: transform 0.5s;
}

/* Image vignette */
.vignette_quart img {
	width: 100%;
}


/* ----------- Version mobile ------------ */
@media only screen and (max-width: 738px) {

	/* Sous-titres - categories */
	h2 {
		font-size: 1.8em;
		margin-left: 5vw;
		margin-right: 5vw;
	}


	/* ---- Vignette largeur 2 ----- */

	.vignette_demi {
		margin-left: 5vw;
		margin-right: 5vw;
		margin-bottom: 5vw;
		width: 90vw;
		height: 50.65vw;
		border-radius: 4vw;
	}

	.relief_demi {
		transform: scale(1.0);
	}

	/* Image vignette comportant des lien - pointeur dessus */
	a .vignette_demi:hover .img_projet {
		opacity: 1;
	}

	/* Vignette (demi écran) - pointeur dessus */
	.vignette_demi:hover {
		transform: scale(1);
	}

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

	/* Texte vignette - pointeur sur vignette */
		.vignette_demi:hover .texte_overlay {
			opacity: 0;
		}


	/* ------ Texte largeur 2 ------ */

	.texte_demi {
		margin-left: 5vw;
		margin-bottom: 5vw;
		width: 90vw;
		height: auto;
	}

	/* Despription (demi écran) */
	.texte_demi {
		font-size: 3vw;
	}

	/* Type de projet & année */
	.texte_demi_titre {
		color: red;
		font-size: 5vw;
	}

	/* Personnes du projet */
	.texte_demi_sous-titre {
		color: gray;
		font-size: 3.5vw;
	}


	/* --- Vignette comparaison largeur 2 --- */

	/* Vignette compare */
	.vignette_compare {
		margin-left: 5vw;
		margin-right: 5vw;
		margin-bottom: 5vw;
		width: 90vw;
		height: 50.65vw;
		border-radius: 4vw;
	}

	.slider_after {
		background-size: 90vw;
	}

	.slider_before {
		background-size: 90vw;;
	}

	.slider_separator {
		height: 60.65vw;
	}

	/* ---- Projet largeur 3 ----- */
	.projet_tiers {
		width: 90vw;
		margin-left: 5vw;
		margin-bottom: 10vw;
	}

	/* ---- Vignette largeur 3 ----- */

	/* Vignette (tiers écran) */
	.vignette_tiers {
		margin-left: 5vw;
		margin-right: 5vw;
		margin-bottom: 5vw;
		width: 90vw;
		height: 50.65vw;
		border-radius: 4vw;
	}

	/* --------- Vignette largeur 4 ---------- */

/* Vignette carré (quart écran) */
.vignette_quart {
		margin-left: 20vw;
		margin-right: 20vw;
		margin-bottom: 5vw;
		width: 60vw;
		height: auto;
		border-radius: 4vw;
	}

}