/* ---------- Titre & bannière ----------- */

/* Bandeau pleine page */
body {
	background-image: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 1)), url("../images/youtube_fond.webp");
	background-repeat: no-repeat;
	background-size: 100%;
}

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

/* Groupe barre de nav secondaire */
.sous_nav_grp {
	z-index: 300;
	margin: -1em auto 0 auto;
	max-width: 85vw;
}

/* 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;
}

/* Bouton d'abonnement Youtube */
.abonner {
	float: left;
	font-family: Andale Mono, Arial;
	background-color: rgba(174, 29, 15, 0.7);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	font-size: 1em;
	padding: 1em;
	border: none;
	border-radius: 10em;
	color: white;
	margin-left: 1em;
	box-shadow: 
		inset 0.1px 0.1px 2px rgba(255, 255, 255, 0.8), /* bevel */
		0 4px 6px rgba(0, 0, 0, 0.5); /* shadow */
	transition: transform 0.3s, background-color 0.3s;
}

/* Bouton d'abonnement - au survol */
.abonner:hover {
	background-color: rgba(74, 9, 5, 0.7);
	transform: scale(1.06);
}


/* ----------- Section vidéos ------------ */

/* Grille de vidéos */
#galerie {
	margin-top: 4vw;
	margin-left: 8.5vw;
}

/* Container vidéo */
.frame_video {
	z-index: 100;
	position: relative;
	float: left;
	width: 40vw;
	height: 22vw;
	margin-right: 3vw;
	margin-bottom: 3vw;
	border: none;
	border-radius: 20px;
	overflow: hidden;
}

/* Bevel vidéo */
.frame_video::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 20px;
	box-shadow:
		inset 0.1px 0.1px 3px 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;
}

/* Vidéo */
iframe {
	width: 100%;
	height: 100%;
	border: none;
	border-radius: 16px;
	scale: 1.018;
}


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

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

	/* Bandeau pleine page */
	body {
		background-size: 235% auto;
		background-position: 50% 0; /* Décalage horizontal */
	}

	/* Bar des filtres */
	.sous_nav_grp {
		display: block;
		position: static;
		max-width: none;
	}

	.sous_nav {
		font-size: 4vw;
		line-height: 7vw;
		margin: 0 4vw 5vw 4vw;
		border-radius: 4vw;
	}
	

	/* Bouton d'abonnement Youtube */
	.abonner {
		font-size: 4vw;
		width: 92vw;
		margin-left: 4vw;
		margin-bottom: 7vw;
		padding: 0.5em;
	}

	.abonner:hover {
		background-color: rgba(174, 29, 15, 0.7);
		transform: none;
	}

	/* Grille de vidéos */
	#galerie {
		margin-top: 45vw;
		margin-left: 0;
	}

	/* Container vidéo */
	.frame_video {
		width: 92vw;
		height: 50.6vw;
		margin-left: 4vw;
		margin-bottom: 6vw;
		border-radius: 4vw;
	}

	/* Bevel vidéo */
	.frame_video::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);
	}
}