/*
 * gc-videotuto — STRUCTURE (mobile-first).
 * Ce fichier ne contient QUE la mise en page (layout, tailles, positions).
 * Les couleurs et le style visuel (fonds, bordures, arrondis, survols) sont
 * gérés par le thème. Voir la section « gc-videotuto » dans le style.css du thème.
 */

/* ---------- Navigation d'archive ---------- */
.gc-tuto-nav {
	margin: 1rem 0 1.5rem;
	display: flex;
	flex-direction: column;
	gap: .75rem;
}
.gc-tuto-nav__title {
	margin: 0;
	font-size: 1.15rem;
}

/* ---------- Fiche : colonne de gauche (photo + matériel) ---------- */
.gc-tuto__photo {
	aspect-ratio: 1 / 1;
	overflow: hidden;
	margin-bottom: 1.25rem;
}
.gc-tuto__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.gc-tuto__aside .gc-tuto-related {
	padding: 1rem;
}
.gc-tuto__aside .gc-tuto-related__list {
	flex-direction: column;
	gap: .6rem;
}
.gc-tuto__aside .gc-tuto-related__item a {
	flex-direction: row;
	align-items: center;
	gap: .6rem;
	max-width: none;
}
.gc-tuto__aside .gc-tuto-related__item img {
	width: 56px;
	height: 56px;
	object-fit: cover;
	flex: 0 0 auto;
}
.gc-tuto__aside .gc-tuto-related__name {
	text-align: left;
}

/* ---------- Fiche : ligne « Explorer les tutos » ---------- */
.gc-tuto-explore {
	margin-top: 2.5rem;
	padding-top: 1.5rem;
}
.gc-tuto-explore__title {
	font-size: 1.15rem;
	margin: 0 0 .75rem;
}
.gc-tuto-explore__search {
	padding: 25px 25px 50px 25px;
}
.gc-tuto-explore__filters {
	display: flex;
	flex-direction: column;
	gap: .75rem;
	padding-top: 25px;
}

/* ---------- Recherche ---------- */
.gc-tuto-search {
	display: flex;
	gap: .5rem;
	position: relative;
}
.gc-tuto-search__input {
	flex: 1;
	min-width: 0;
}
.gc-tuto-search__btn {
	flex: 0 0 auto;
}

/* ---------- Chips ---------- */
.gc-tuto-chips {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .4rem;
}
.gc-tuto-chips__label {
	font-weight: 700;
	font-size: .85rem;
	margin-right: .25rem;
}
.gc-tuto-chip {
	display: inline-block;
	padding: .25rem .7rem;
	text-decoration: none;
	font-size: .85rem;
	line-height: 1.4;
}
.gc-tuto-chip.is-active {
	font-weight: 700;
}

/* ---------- Fiche tuto ---------- */
.gc-tuto__header {
	margin-bottom: 1rem;
}
.gc-tuto__excerpt {
	font-size: 1.05rem;
	margin-top: .25rem;
}
.gc-tuto__tags {
	margin: 1rem 0;
}
.gc-tuto-tags {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
	margin: 0;
	padding: 0;
}
.gc-tuto-tags li {
	list-style: none;
}
.gc-tuto-tags a {
	display: inline-block;
	padding: .2rem .6rem;
	font-size: .85rem;
	text-decoration: none;
}

/* ---------- Vidéo (embed + chapitres) ---------- */
.gc-tuto-video {
	margin: 0 0 1.5rem;
}
.gc-tuto-video__player {
	position: relative;
	padding-top: 56.25%;
	margin-bottom: 1rem;
}
.gc-tuto-video__player iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.gc-tuto-video__chapters {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
}
.gc-tuto-video__chapters a,
.gc-tuto-video__chapters button {
	display: inline-flex;
	gap: .4rem;
	align-items: baseline;
	padding: .25rem .6rem;
	font-size: .9rem;
	line-height: 1.4;
	font-family: inherit;
	cursor: pointer;
	text-decoration: none;
}
.gc-tuto-video__time {
	font-weight: 700;
}

/* ---------- Matériel concerné / tutos liés ---------- */
.gc-tuto-related {
	margin: 1.5rem 0;
}
.gc-tuto-related__title {
	margin: 0 0 .75rem;
	font-size: 1.1rem;
}
.gc-tuto-related__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
}
.gc-tuto-related__item a {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .4rem;
	text-decoration: none;
	max-width: 140px;
}
.gc-tuto-related__item img {
	width: 100%;
	height: auto;
}
.gc-tuto-related__name {
	font-size: .9rem;
	text-align: center;
}

/* ---------- Page produit : bloc « Tutoriels vidéo » en bas ---------- */
.gc-tuto-on-product {
	clear: both;
	margin-top: 1.5rem;
	padding: 25px;
}
@media (min-width: 768px) {
	/* Largeur gauche + centre (9/12), aligné à gauche. */
	.gc-tuto-on-product {
		width: calc(100% - 50px);
	}
}

/* ---------- Pagination ---------- */
.gc-tuto-archive .pagination,
.gc-tuto-archive .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
	justify-content: center;
	margin-top: 1.5rem;
}
.gc-tuto-archive .page-numbers {
	padding: .35rem .7rem;
	text-decoration: none;
}
.gc-tuto-archive .page-numbers.current {
	font-weight: 700;
}

/* ---------- Autocomplétion (structure du menu jQuery UI) ---------- */
.ui-autocomplete {
	max-height: 320px;
	overflow-y: auto;
	z-index: 100000;
	padding: 4px 0;
}
.ui-autocomplete .ui-menu-item-wrapper {
	display: block;
	padding: .5rem .8rem;
	cursor: pointer;
}

/* ---------- Tablette / desktop ---------- */
@media (min-width: 768px) {
	.gc-tuto-search {
		max-width: 480px;
	}
}