/*
 * Conseils : grilles (category.php, tag.php) et page d'un conseil (single.php).
 *
 * Sommaire :
 *   - Image de remplacement d'une vidéo
 *   - Grille de cartes
 *   - Page d'un conseil
 *   - Petits écrans
 */


/* ========== Image de remplacement d'une vidéo ========== */

/* Rectangle 16:9 prune avec un bouton « lecture » rose au centre.
   Sert de vignette sur les cartes en attendant les vraies images. */
.vtc-video-thumb {
	position: relative;
	display: block;
	aspect-ratio: 16 / 9;
	background:
		radial-gradient(70% 90% at 80% 10%, rgba(211, 122, 187, 0.45), transparent 70%),
		#2e272d;
}

/* Le bouton « lecture » : un cercle rose avec un triangle dessiné en CSS. */
.vtc-play {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: #d37abb;
	transform: translate(-50%, -50%);
	transition: transform 0.2s;
}

.vtc-play::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 54%;
	border-style: solid;
	border-width: 10px 0 10px 17px;
	border-color: transparent transparent transparent #2e272d;
	transform: translate(-50%, -50%);
}


/* ========== Grille de cartes ========== */

/* Espace en haut : sans la bande grise de Shapely, le titre serait collé au menu. */
.vtc-conseils {
	padding-top: 56px;
	padding-bottom: 40px;
}

/* Titre des pages de catégorie et de la page « Conseils ». */
.vtc-archive-title {
	margin: 0 0 32px;
	font-size: 44px;
	line-height: 1.15;
}

.vtc-conseils-intro {
	max-width: 46em;
	margin-bottom: 32px;
}

/* Trois cartes par ligne sur ordinateur. */
.vtc-conseil-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 36px 28px;
	margin: 0 0 40px;
	padding: 0;
	list-style: none;
}

.vtc-conseil-card {
	margin: 0;
}

.vtc-conseil-card a {
	display: block;
	color: #2b242a;
	text-decoration: none;
}

/* Au survol : le bouton grossit un peu et le titre devient rose. */
.vtc-conseil-card a:hover .vtc-play,
.vtc-conseil-card a:focus .vtc-play {
	transform: translate(-50%, -50%) scale(1.12);
}

.vtc-conseil-card a:hover .vtc-conseil-title,
.vtc-conseil-card a:focus .vtc-conseil-title {
	color: #d37abb;
	text-decoration: underline;
}

/* Nom de la catégorie (seulement sur la page « Conseils », qui les mélange toutes). */
.vtc-conseil-cat {
	display: block;
	margin-top: 14px;
	color: #665964;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.vtc-conseil-title {
	display: block;
	margin-top: 8px;
	font-size: 17px;
	font-weight: 600;
	line-height: 1.35;
}


/* ========== Filtre de la page « Conseils » ========== */

/* Recherche (large) et catégorie côte à côte, bouton « Effacer » au bout. */
.vtc-filter {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 16px 20px;
	margin-bottom: 12px;
}

/* min-width: 0 : permet au champ de rétrécir avec l'écran au lieu de déborder. */
.vtc-filter-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	flex: 1 1 220px;
	min-width: 0;
}

.vtc-filter-search {
	flex-grow: 2;
}

.vtc-filter label {
	margin: 0;
	color: #665964;
	font-size: 13px;
	font-weight: 700;
}

/* box-sizing : la largeur inclut la marge intérieure et la bordure,
   sinon le champ dépasse de sa colonne. */
.vtc-filter input,
.vtc-filter select {
	box-sizing: border-box;
	width: 100%;
	height: 50px;
	margin: 0;
	padding: 0 16px;
	border: 1px solid #ddd3db;
	border-radius: 0;
	background: #fff;
	color: #2b242a;
	font-size: 15px;
}

.vtc-filter input:focus,
.vtc-filter select:focus {
	border-color: #d37abb;
	outline: 2px solid rgba(211, 122, 187, 0.35);
	outline-offset: 0;
}

.vtc-filter-reset {
	height: 50px;
	padding: 0 22px;
	border: 2px solid #665964;
	background: transparent;
	color: #665964;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	cursor: pointer;
}

.vtc-filter-reset:hover,
.vtc-filter-reset:focus {
	background: #665964;
	color: #fff;
}

/* Nombre de résultats, sous le filtre. */
.vtc-filter-count {
	margin: 0 0 28px;
	color: #665964;
	font-size: 14px;
}

/* Une carte écartée par le filtre est retirée de la grille. */
.vtc-conseil-card[hidden],
.vtc-filter [hidden],
.vtc-filter-none[hidden] {
	display: none;
}


/* ========== Page d'un conseil ========== */

.vtc-conseil {
	max-width: 960px;
	margin: 0 auto 56px;
}

.vtc-conseil-back {
	margin-bottom: 12px;
	font-weight: 700;
}

.vtc-conseil-heading {
	margin: 0 0 28px;
	font-size: 36px;
	line-height: 1.2;
}

.vtc-conseil-back a {
	color: #665964;
	text-decoration: none;
}

.vtc-conseil-back a:hover {
	color: #d37abb;
}

/* Cadre 16:9 de la vidéo; le lecteur Vimeo le remplit entièrement. */
.vtc-video {
	position: relative;
	aspect-ratio: 16 / 9;
	background: #2e272d;
}

.vtc-video iframe,
.vtc-video .vtc-video-thumb {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.vtc-video-missing {
	position: absolute;
	bottom: 16px;
	left: 0;
	right: 0;
	margin: 0;
	color: #fff;
	text-align: center;
}

.vtc-conseil-text {
	margin-top: 32px;
}

/* « Autres conseils » sous la vidéo. */
.vtc-conseil-more {
	max-width: 960px;
	margin: 0 auto;
	padding-top: 40px;
	border-top: 1px solid rgba(102, 89, 100, 0.22);
}

.vtc-conseil-more h2 {
	margin-bottom: 24px;
	font-size: 22px;
}


/* ========== Petits écrans ========== */

/* Tablettes : deux cartes par ligne. */
@media (max-width: 991px) {
	.vtc-conseil-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* Téléphones : une carte par ligne, titres plus petits. */
@media (max-width: 640px) {
	.vtc-conseil-grid {
		grid-template-columns: 1fr;
	}

	.vtc-archive-title {
		font-size: 32px;
	}

	.vtc-conseil-heading {
		font-size: 26px;
	}
}