/* ------ Section bandeau supérieur ------ */

/* Titre - lien */
h1 a {
	text-decoration: none;
	color: #AE1D0F;
}

/* Sous navigation */
.sous_nav_grp {
	margin: -3.5vw auto 3vw auto;
}

/* Vidéo du train */
.bande_demo {
	margin-left: 10vw;
	width: 80vw;
	border-radius: 14px;
}

/* ------ Barre secondaire - pilule ------ */

/* Groupe barre de nav secondaire */
.sous_nav_grp {
	margin: -3.5 auto 3vw auto;
	max-width: 85vw;
	text-align: center;
}

/* Lien */
.sous_nav a {
	text-decoration: none;
	color: white;
}

/* Lien - pointeur dessus */
.sous_nav a:hover {
	color: gray;
}

/* Lien - actif */
.sous_nav a.active {
	color: red;
}

/* Separateur point */
.separator_p {
	display: inline-block;
}


/* --------- Gallerie des projets -------- */

/* Titre gallerie */
.gallerie h1 {
	margin-top: 4vw;
	margin-bottom: 0;
}

h2 {
	margin-top: 2vw;
}

/* Vignette des projects */
.vignette {
	position: relative;
	float: left;
	width: 21.25vw;
	height: 11.95vw;
	margin-left: 3vw;
	margin-bottom: 3vw;
	border-radius: 1vw;
	text-align: center;
	color: white;
	overflow: hidden;
	transition: transform 0.5s;
}

/* Bevel vignette */
.vignette::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 1vw;
  box-shadow:
    inset 0.1px 0.1px 2.5px rgba(255, 255, 255, 0.7),
    inset -0.5px -0.5px 1.5px rgba(0, 0, 0, 0.2);
  pointer-events: none;
  z-index: 2;
}

/* Vignette des projects */
.vignette:hover {
	transform: scale(1.1);
}

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

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

/* Les utilisateurs ayant une souris */
@media (hover: hover) {

	/* Texte vignette */
	.texte_overlay {
		opacity: 0;
	}

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

	/* Image vignette - pointeur sur vignette */
	.vignette:hover img {
		opacity: 0.5;
	}

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


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

	/* Sous navigation */
	.sous_nav_grp {
		position: static;
		margin: -6vw auto 5vw auto;
		font-size: 5vw;
		width: 70vw;
	}

	.sous_nav {
		background: none;
		border-radius: 4vw;
		padding: 5vw 0;
		box-shadow: none;
	}

	.sous_nav a {
		display: block;
		margin: 5px 0;
	}

	.sous_nav a:hover {
		color: white;
	}


	/* --- Gallerie des projets --- */

	/* Titre gallerie */
	.gallerie h1 {
		margin-top: 12vw;
	}

	/* Sous-titre gallerie */
	h2 {
		font-size: 8vw;
		margin-top: 8vw;
	}

	/* Vignette des projects */
	.vignette {
		margin-left: 5vw;
		margin-bottom: 5vw;
		width: 90vw;
		height: 50.65vw;
		border-radius: 4vw;
	}

	/* Bevel vignette */
	.vignette::before {
		border-radius: 4vw;
		box-shadow:
			inset 0.1px 0.1px 2px rgba(255, 255, 255, 0.7),
			inset -0.5px -0.5px 1.5px rgba(0, 0, 0, 0.2);
	}

	/* Image vignette */
	.vignette img {
		opacity: 0.8;
	}

	/* Image vignette - pointeur sur vignette */
	.vignette:hover img {
		opacity: 0.8;
	}

	/* Texte vignette */
	.texte_overlay {
		font-size: 8vw;
		line-height: 1.5;
		opacity: 1;
	}
}