/* ==========================================================
   Module tri_video — Coulisses de la recherche
   Couleurs tirées de la maquette XD « De vives voies »
   ========================================================== */

.tri-vid {
	--tri-vid-vert-fonce: #1f443d;
	--tri-vid-vert: #2d6b61;
	--tri-vid-pale: #d5ebe6;
	--tri-vid-texte: #2b2b2b;
	container-type: inline-size;
}

.tri-vid .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}


/* ---------- Vidéo à la une ---------- */

.tri-vid-une {
	max-width: 760px;
	margin: 0 auto 70px;
	scroll-margin-top: 140px;
}

.tri-vid-lecteur {
	position: relative;
	aspect-ratio: 16 / 9;
	border-radius: 6px;
	overflow: hidden;
	background: #000;
}

.tri-vid-lecteur iframe,
.tri-vid-poster {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.tri-vid-poster {
	padding: 0;
	background: #000;
	cursor: pointer;
}

.tri-vid-poster img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Bouton lecture */
.tri-vid-play {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 84px;
	height: 84px;
	margin: -42px 0 0 -42px;
	border-radius: 50%;
	background: rgba(31, 68, 61, .85);
	transition: background-color .2s, transform .2s;
}

.tri-vid-play::after {
	content: "";
	position: absolute;
	left: 34px;
	top: 26px;
	border-style: solid;
	border-width: 16px 0 16px 26px;
	border-color: transparent transparent transparent #fff;
}

.tri-vid-poster:hover .tri-vid-play,
.tri-vid-poster:focus-visible .tri-vid-play {
	background: var(--tri-vid-vert-fonce);
	transform: scale(1.06);
}

.tri-vid-poster:focus-visible {
	outline: 3px solid var(--tri-vid-vert-fonce);
	outline-offset: 3px;
}

.tri-vid-une-titre {
	margin: 22px 0 6px;
	padding: 0;
	font-size: 19px;
	font-weight: 600;
	color: var(--tri-vid-vert-fonce);
}

.tri-vid-une-description {
	margin: 0;
	padding: 0;
	font-size: 15px;
	line-height: 1.6;
	color: var(--tri-vid-vert);
}


/* ---------- Grille ---------- */

.tri-vid-zone {
	transition: opacity .2s;
}

.tri-vid.is-chargement .tri-vid-zone {
	opacity: .4;
	pointer-events: none;
}

.tri-vid-grille {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 34px 24px;
}

.tri-vid-carte-lien {
	display: block;
	color: inherit;
	text-decoration: none;
}

.tri-vid-carte-image {
	position: relative;
	display: block;
	aspect-ratio: 16 / 9;
	border-radius: 6px;
	overflow: hidden;
	background: var(--tri-vid-pale);
}

.tri-vid-carte-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .3s;
}

.tri-vid-carte-lien:hover .tri-vid-carte-image img,
.tri-vid-carte-lien:focus-visible .tri-vid-carte-image img {
	transform: scale(1.04);
}

.tri-vid-carte-lien:focus-visible {
	outline: 3px solid var(--tri-vid-vert-fonce);
	outline-offset: 3px;
}

.tri-vid-duree {
	position: absolute;
	right: 8px;
	bottom: 8px;
	padding: 1px 7px;
	border-radius: 3px;
	background: rgba(60, 60, 60, .8);
	color: #fff;
	font-size: 13px;
	line-height: 1.5;
}

.tri-vid-carte-titre {
	display: block;
	margin-top: 12px;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.5;
	color: var(--tri-vid-vert-fonce);
}


/* ---------- Pagination ---------- */

.tri-vid-pagination {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 40px;
}

.tri-vid-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--tri-vid-pale);
	color: var(--tri-vid-vert);
	font-size: 15px;
	text-decoration: none;
}

.tri-vid-pagination a.page-numbers:hover {
	background: #bfdfd8;
}

.tri-vid-pagination .page-numbers.current {
	background: var(--tri-vid-vert-fonce);
	color: #fff;
}

.tri-vid-pagination .page-numbers.dots {
	background: transparent;
}

.tri-vid-erreur {
	color: #b32d2e;
}


/* ---------- Colonnes selon la largeur réelle ---------- */

@container (max-width: 820px) {
	.tri-vid-grille {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@container (max-width: 520px) {
	.tri-vid-grille {
		grid-template-columns: minmax(0, 1fr);
	}
}