/* Prisma Video - grille de vignettes + lecteur (lightbox) facon YouTube.
   Couleurs par defaut portees ici ; surchargeables via les Reglages / le widget. */

:root,
.pvid,
.pvid-lightbox {
	--pvid-primary: #111318;
	--pvid-accent: #E10600;
}

.pvid {
	--pvid-cols: 3;
}

.pvid *,
.pvid-lightbox * {
	box-sizing: border-box;
}

/* ---------- Menu de tri (visiteurs) ---------- */
.pvid-sort {
	display: flex;
	justify-content: flex-end;
	margin-bottom: 12px;
}

.pvid-sort__label {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	color: var(--pvid-label, #555);
}

.pvid-sort__select {
	font: inherit;
	font-size: 13px;
	padding: 4px 8px;
	border: 1px solid var(--pvid-select-border, #ccc);
	border-radius: 6px;
	background: var(--pvid-select-bg, #fff);
	color: var(--pvid-select-color, #222);
	cursor: pointer;
}

/* ---------- Grille ---------- */
.pvid-grid {
	display: grid;
	grid-template-columns: repeat(var(--pvid-cols), 1fr);
	gap: 20px;
}

/* Les vignettes sont des <button> (jamais des <a> : certains plugins decorent
   tous les liens). Beaucoup de themes stylisent donc TOUS les boutons, fond et
   bordure compris, y compris au survol et au focus : on annule ce style dans
   les quatre etats, sinon les reglages de couleur du widget ne servent a rien. */
.pvid-card,
.pvid-card:hover,
.pvid-card:focus,
.pvid-card:active {
	display: flex;
	flex-direction: column;
	text-align: left;
	padding: 0;
	margin: 0;
	border: 0;
	outline: 0;
	text-decoration: none;
	cursor: pointer;
	font: inherit;
	width: 100%;
}

.pvid-card {
	background: var(--pvid-card-bg, transparent);
	color: var(--pvid-card-title, inherit);
	transition: background .2s ease;
}

/* Aucun aplat par defaut : un gris translucide fait du ton sur ton avec les
   titres et alourdit la grille. Le survol se voit deja au zoom de la vignette,
   la video en cours a son contour. Les reglages du widget peuvent poser un fond
   si on en veut un. */
.pvid-card:hover,
.pvid-card:focus {
	background: var(--pvid-card-bg-hover, var(--pvid-card-bg, transparent));
	/* Sans cette ligne, le theme impose SA couleur de texte au survol (du blanc
	   sur puppy-play.com), ce qui rendrait le titre illisible sur un site clair. */
	color: var(--pvid-card-title-hover, var(--pvid-card-title, inherit));
}

.pvid-card.is-active {
	background: var(--pvid-card-bg-active, var(--pvid-card-bg, transparent));
	color: var(--pvid-card-title-active, var(--pvid-card-title, inherit));
}

/* Le focus clavier doit rester visible : on remplace le contour du navigateur
   par le notre plutot que de le supprimer. */
.pvid-card:focus-visible .pvid-card__thumb {
	outline: 3px solid var(--pvid-accent);
	outline-offset: 2px;
}

.pvid-card__thumb {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: 12px;
	background: #000;
}

.pvid-card__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .3s ease;
}

.pvid-card:hover .pvid-card__thumb img {
	transform: scale(1.05);
}

.pvid-card__play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--pvid-accent);
	opacity: .92;
	transition: transform .2s ease, opacity .2s ease;
}

.pvid-card__play::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 54%;
	transform: translate(-50%, -50%);
	border-style: solid;
	border-width: 11px 0 11px 18px;
	border-color: transparent transparent transparent #fff;
}

.pvid-card:hover .pvid-card__play {
	transform: translate(-50%, -50%) scale(1.08);
	opacity: 1;
}

.pvid-card__body {
	padding: 10px 2px 0;
}

.pvid-card__title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-weight: 600;
	line-height: 1.3;
	color: inherit; /* suit l'etat de la carte : normal, survol, en lecture */
}

.pvid-card__meta {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-top: 4px;
	font-size: 13px;
	color: var(--pvid-card-meta, inherit);
	opacity: var(--pvid-card-meta-opacity, .75);
}

.pvid-card:hover .pvid-card__meta,
.pvid-card:focus .pvid-card__meta {
	color: var(--pvid-card-meta-hover, var(--pvid-card-meta, inherit));
}

.pvid-card.is-active .pvid-card__meta {
	color: var(--pvid-card-meta-active, var(--pvid-card-meta, inherit));
}

.pvid-empty {
	padding: 24px;
	text-align: center;
	color: #666;
}

/* ---------- Lecteur (lightbox) ---------- */
.pvid-lightbox {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	background: color-mix(in srgb, var(--pvid-primary) 92%, #000);
	background: rgba(10, 12, 16, .92);
}

.pvid-lightbox[hidden] {
	display: none;
}

.pvid-modal {
	display: flex;
	gap: 20px;
	width: 100%;
	max-width: 1200px;
	max-height: 90vh;
}

.pvid-main {
	flex: 1 1 auto;
	min-width: 0;
	min-height: 0;
	display: flex;
	flex-direction: column;
}

/* L'ECRAN EST TOUJOURS AU FORMAT 16:9 (1920x1080), quel que soit le format reel
   de la video, sur ordinateur comme sur tablette et telephone.
   - width:100% + max-width -> il prend toute la largeur disponible, mais jamais
     plus haut que l'ecran (sinon la barre de controles passe sous la ligne de
     flottaison et les options deviennent inaccessibles) ;
   - flex:0 0 auto -> il n'est jamais ecrase par un voisin (description longue,
     conteneur a hauteur limitee), donc sa taille ne depend plus de la video. */
.pvid-player {
	position: relative;
	width: 100%;
	max-width: calc(82vh * 16 / 9);
	margin-left: auto;
	margin-right: auto;
	flex: 0 0 auto;
	aspect-ratio: 16 / 9;
	background: var(--pvid-stage-bg, #000);
	border-radius: 12px;
	overflow: hidden;
}

/* La video se loge dans ce cadre sans jamais le deformer : une source qui n'est
   pas en 16:9 (verticale, 4:3...) est centree avec des bandes noires. */
.pvid-player iframe,
.pvid-player video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	max-height: none;
	border: 0;
	display: block;
	object-fit: contain;
	background: var(--pvid-stage-bg, #000);
}

/* En plein ecran, le cadre epouse l'ecran (la video reste centree, sans deformation). */
.pvid-player:fullscreen {
	max-width: none;
	height: 100%;
	aspect-ratio: auto;
	border-radius: 0;
}

.pvid-player:-webkit-full-screen {
	max-width: none;
	height: 100%;
	aspect-ratio: auto;
	border-radius: 0;
}

.pvid-info {
	color: #fff;
	padding: 14px 2px 0;
	overflow-y: auto;
}

/* En fenetre, c'est la description qui se replie (et defile) quand la place
   manque, jamais le lecteur. */
.pvid-lightbox .pvid-main {
	overflow: hidden;
}

.pvid-lightbox .pvid-info {
	flex: 1 1 auto;
	min-height: 0;
}

.pvid-lightbox .pvid-player {
	max-width: calc(66vh * 16 / 9);
}

.pvid-info__title {
	margin: 0 0 6px;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.25;
}

.pvid-info__meta {
	font-size: 13px;
	color: rgba(255, 255, 255, .7);
	margin-bottom: 10px;
}

.pvid-info__desc {
	font-size: 14px;
	line-height: 1.55;
	color: rgba(255, 255, 255, .88);
}

/* Liste laterale */
.pvid-list {
	flex: 0 0 320px;
	max-width: 320px;
	overflow-y: auto;
	padding-right: 4px;
}

.pvid-list__head {
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	margin: 0 0 10px;
	opacity: .9;
}

.pvid-item {
	display: flex;
	gap: 10px;
	width: 100%;
	text-align: left;
	padding: 6px;
	margin: 0 0 6px;
	border: 0;
	border-radius: 10px;
	background: transparent;
	color: #fff;
	cursor: pointer;
	font: inherit;
}

.pvid-item:hover {
	background: rgba(255, 255, 255, .08);
}

.pvid-item.is-active {
	background: rgba(255, 255, 255, .12);
	box-shadow: inset 3px 0 0 var(--pvid-accent);
}

.pvid-item__thumb {
	position: relative;
	flex: 0 0 132px;
	width: 132px;
	aspect-ratio: 16 / 9;
	border-radius: 8px;
	overflow: hidden;
	background: #000;
}

.pvid-item__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.pvid-item__body {
	min-width: 0;
}

.pvid-item__title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.3;
}

.pvid-item__meta {
	font-size: 12px;
	color: rgba(255, 255, 255, .6);
	margin-top: 3px;
}

.pvid-close {
	position: absolute;
	top: 14px;
	right: 18px;
	width: 40px;
	height: 40px;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .12);
	color: #fff;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
}

.pvid-close:hover {
	background: rgba(255, 255, 255, .22);
}

/* ---------- Disposition "player" : lecteur pleine largeur + bibliotheque ----------
   Le lecteur occupe toute la largeur du bloc, les vignettes vivent DESSOUS
   (voir « Bibliotheque »). Plus de colonne laterale : elle devenait
   interminable des que le nombre de videos grandissait. */
.pvid--player .pvid-stage {
	display: block;
}

.pvid--player .pvid-main {
	width: 100%;
}

/* Les textes heritent de la couleur du theme : lisible sur un site clair
   comme sur un site sombre, sans rien regler. Les selecteurs de couleur du
   widget passent par-dessus quand on veut une teinte precise. */
.pvid--player .pvid-info {
	color: inherit;
	padding: 14px 2px 0;
}

.pvid--player .pvid-info__title {
	color: var(--pvid-info-title, inherit);
}

.pvid--player .pvid-info__meta {
	color: var(--pvid-info-meta, inherit);
	opacity: var(--pvid-info-meta-opacity, .75);
}

.pvid--player .pvid-info__desc {
	color: var(--pvid-info-desc, inherit);
}

.pvid--player .pvid-list {
	flex: 0 0 340px;
	max-width: 340px;
	max-height: 70vh;
	overflow-y: auto;
	padding-right: 4px;
}

.pvid--player .pvid-list__head {
	color: inherit;
}

.pvid--player .pvid-item {
	color: inherit;
}

.pvid--player .pvid-item:hover {
	background: rgba(0, 0, 0, .05);
}

.pvid--player .pvid-item.is-active {
	background: rgba(0, 0, 0, .06);
	box-shadow: inset 3px 0 0 var(--pvid-accent);
}

.pvid--player .pvid-item__meta {
	color: inherit;
	opacity: .75;
}

/* ---------- Bibliotheque (sous le lecteur) ----------
   Toutes les couleurs passent par des variables : le CSS pose un defaut neutre
   (transparent, ou une teinte grise qui marche sur fond clair comme sombre) et
   les reglages du widget n'ont qu'a redefinir la variable. */
.pvid-browse {
	margin-top: 30px;
	background: var(--pvid-browse-bg, transparent);
	padding: var(--pvid-browse-pad, 0);
	border-radius: var(--pvid-browse-radius, 0);
}

.pvid-browse__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 16px;
	padding-bottom: 12px;
	margin-bottom: 20px;
	border-bottom: 1px solid var(--pvid-line, rgba(128, 128, 128, .3));
}

/* Champ de recherche */
.pvid-search {
	position: relative;
	display: flex;
	align-items: center;
	flex: 1 1 220px;
	max-width: 320px;
	margin: 0;
}

.pvid-search__input {
	width: 100%;
	font: inherit;
	font-size: 14px;
	padding: 8px 12px 8px 34px;
	border: 1px solid var(--pvid-field-border, rgba(128, 128, 128, .45));
	border-radius: 8px;
	background: var(--pvid-field-bg, transparent);
	color: var(--pvid-field-color, inherit);
}

.pvid-search__input::placeholder {
	color: var(--pvid-field-color, inherit);
	opacity: .55;
}

.pvid-search__input:focus {
	outline: 2px solid var(--pvid-accent);
	outline-offset: 1px;
}

/* Loupe dessinee en CSS : aucune image ni police d'icones a charger. */
.pvid-search__icon {
	position: absolute;
	left: 12px;
	width: 12px;
	height: 12px;
	border: 2px solid currentColor;
	border-radius: 50%;
	opacity: .55;
	pointer-events: none;
}

.pvid-search__icon::after {
	content: "";
	position: absolute;
	right: -5px;
	bottom: -4px;
	width: 7px;
	height: 2px;
	background: currentColor;
	transform: rotate(45deg);
}

/* Filtre (annee / theme) et tri, cote a cote dans la barre */
.pvid-filter {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	margin: 0;
	color: var(--pvid-label, inherit);
}

.pvid-browse .pvid-sort {
	display: inline-flex;
	justify-content: flex-start;
	margin-bottom: 0;
}

.pvid-filter__select {
	font: inherit;
	font-size: 13px;
	padding: 4px 8px;
	border: 1px solid var(--pvid-select-border, #ccc);
	border-radius: 6px;
	background: var(--pvid-select-bg, #fff);
	color: var(--pvid-select-color, #222);
	cursor: pointer;
}

.pvid-browse__count {
	margin-left: auto;
	font-size: 13px;
	white-space: nowrap;
	color: var(--pvid-count, inherit);
	opacity: var(--pvid-count-opacity, .7);
}

/* Sections (annee ou theme) */
.pvid-section + .pvid-section {
	margin-top: 28px;
}

.pvid-section__title {
	margin: 0 0 12px;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--pvid-section-title, inherit);
	opacity: var(--pvid-section-title-opacity, .8);
}

/* Vignette en cours de lecture */
.pvid-card.is-active .pvid-card__thumb {
	outline: var(--pvid-card-outline-width, 3px) solid var(--pvid-card-outline, var(--pvid-accent));
	outline-offset: 2px;
}

.pvid-card.is-active .pvid-card__play {
	display: none;
}

.pvid-card.is-active .pvid-card__title {
	font-weight: 700;
}

/* Bouton « Voir plus » */
.pvid-browse__more {
	display: flex;
	justify-content: center;
	margin-top: 24px;
}

/* Meme precaution que pour les vignettes : le bouton « Voir plus » est un
   <button>, donc cible par le style de boutons du theme dans tous ses etats. */
.pvid-more,
.pvid-more:hover,
.pvid-more:focus,
.pvid-more:active {
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	padding: 10px 24px;
	border-radius: 999px;
	text-decoration: none;
	cursor: pointer;
	transition: background .2s ease, color .2s ease, border-color .2s ease;
}

.pvid-more {
	border: 1px solid var(--pvid-more-border, rgba(128, 128, 128, .5));
	background: var(--pvid-more-bg, transparent);
	color: var(--pvid-more-color, inherit);
}

.pvid-more:hover,
.pvid-more:focus {
	border: 1px solid var(--pvid-more-border-hover, var(--pvid-more-border, rgba(128, 128, 128, .5)));
	background: var(--pvid-more-bg-hover, rgba(128, 128, 128, .14));
	color: var(--pvid-more-color-hover, var(--pvid-more-color, inherit));
}

.pvid-browse__empty {
	padding: 26px;
	text-align: center;
	color: var(--pvid-count, inherit);
	opacity: .7;
}

/* « hidden » doit gagner sur les display: flex ci-dessus. */
.pvid-browse__more[hidden],
.pvid-browse__empty[hidden],
.pvid-filter[hidden] {
	display: none !important;
}

/* ---------- Controles maison (fichiers .mp4) ---------- */
.pvid-player video {
	cursor: pointer;
}

.pvid-ctrls {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	align-items: center;
	gap: 4px;
	padding: 8px 10px 10px;
	background: linear-gradient(to top, rgba(0, 0, 0, .78), rgba(0, 0, 0, 0));
	opacity: 0;
	transform: translateY(4px);
	transition: opacity .2s ease, transform .2s ease;
	pointer-events: none;
	z-index: 4;
}

.pvid-player.pvid-show .pvid-ctrls {
	opacity: 1;
	transform: none;
	pointer-events: auto;
}

.pvid-player.pvid-has-ticker .pvid-ctrls {
	bottom: var(--pvid-ticker-h, 0px);
}

.pvid-ctrl {
	border: 0;
	background: transparent;
	color: #fff;
	cursor: pointer;
	padding: 4px;
	border-radius: 4px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 0;
}

.pvid-ctrl:hover {
	background: rgba(255, 255, 255, .2);
}

.pvid-ctrl__time {
	color: #fff;
	font-size: 12px;
	white-space: nowrap;
	margin: 0 6px;
	font-variant-numeric: tabular-nums;
}

.pvid-seek {
	flex: 1 1 auto;
	height: 6px;
	margin: 0 4px;
	background: rgba(255, 255, 255, .3);
	border-radius: 3px;
	position: relative;
	cursor: pointer;
}

.pvid-seek__fill {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 0;
	background: var(--pvid-accent);
	border-radius: 3px;
}

/* ---------- Logo incruste ---------- */
.pvid-logo {
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 3;
	height: 46px;
	width: auto;
	max-width: 38%;
	pointer-events: none;
	opacity: .95;
	filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .4));
}

/* ---------- Bandeau d'information defilant ---------- */
.pvid-ticker {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 3;
	overflow: hidden;
	white-space: nowrap;
	background: rgba(17, 19, 24, .72);
	color: #fff;
	padding: 6px 0;
	font-size: 14px;
	line-height: 1.4;
}

.pvid-ticker__text {
	display: inline-block;
	padding-left: 100%;
	animation: pvid-scroll 18s linear infinite;
	will-change: transform;
}

.pvid-ticker:hover .pvid-ticker__text {
	animation-play-state: paused;
}

@keyframes pvid-scroll {
	from { transform: translateX(0); }
	to { transform: translateX(-100%); }
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
	.pvid-modal {
		flex-direction: column;
		max-height: 92vh;
		overflow-y: auto;
	}

	.pvid--player .pvid-stage {
		flex-direction: column;
	}

	/* IMPORTANT : en colonne, il faut etirer les blocs sur toute la largeur.
	   Sans ca (align-items:flex-start herite de la disposition en ligne), la
	   colonne du lecteur se reduit a la largeur de son texte : l'ecran devenait
	   minuscule et sa taille changeait d'une video a l'autre selon la longueur
	   du titre et de la description. */
	.pvid-modal,
	.pvid--player .pvid-stage {
		align-items: stretch;
	}

	.pvid-main,
	.pvid--player .pvid-main {
		flex: 0 0 auto;
		width: 100%;
	}

	.pvid-lightbox .pvid-main {
		overflow: visible;
	}

	.pvid-list {
		flex: 1 1 auto;
		max-width: none;
	}

	.pvid--player .pvid-list {
		flex: 1 1 auto;
		max-width: none;
		max-height: none;
	}
}

/* Repli quand Elementor n'ecrit pas de regle par appareil (le controle
   « Colonnes » du widget, lui, passe par-dessus : il est plus specifique). */
@media (max-width: 900px) {
	.pvid-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 600px) {
	.pvid-lightbox {
		padding: 10px;
	}

	.pvid-grid {
		gap: 14px;
	}

	.pvid-browse__bar {
		gap: 10px 12px;
	}

	.pvid-search {
		flex: 1 1 100%;
		max-width: none;
	}

	.pvid-browse__count {
		margin-left: 0;
	}
}