/* NF YouTube Channel
 * Personnalisable via les variables CSS (ex. dans Elementor > CSS personnalisé) :
 * .nfyt { --nfyt-accent: #c00; --nfyt-gap: 32px; --nfyt-btn-height: 52px; }
 */
.nfyt {
	--nfyt-gap: 24px;
	--nfyt-radius: 0;
	--nfyt-btn-radius: 0;
	--nfyt-btn-height: 48px;
	--nfyt-dark: #000;
	--nfyt-dark-text: #fff;
	--nfyt-accent: #ff0033;
	--nfyt-accent-text: #fff;
	--nfyt-muted: #6b7280;
	--nfyt-cols: 3;
}

.nfyt__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: var(--nfyt-gap);
}
.nfyt__channel {
	font-weight: 700;
	font-size: 1.15em;
	color: inherit;
	text-decoration: none;
}
/* Boutons : préfixés par .nfyt pour passer devant les styles de boutons du thème / d'Elementor.
 * Hauteur fixe + flex = texte parfaitement centré en hauteur, lien et bouton de même taille. */
.nfyt .nfyt__subscribe,
.nfyt .nfyt__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-height: var(--nfyt-btn-height);
	margin: 0;
	padding: 0 22px;
	border: 0;
	border-radius: var(--nfyt-btn-radius);
	background: var(--nfyt-accent);
	color: var(--nfyt-accent-text);
	font-family: inherit;
	font-size: 11px;
	font-weight: 800;
	line-height: 1;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 2px;
	box-shadow: none;
	transition: opacity .2s;
}
.nfyt .nfyt__subscribe:hover,
.nfyt .nfyt__btn:hover,
.nfyt .nfyt__subscribe:focus,
.nfyt .nfyt__btn:focus {
	background: var(--nfyt-accent);
	color: var(--nfyt-accent-text);
	opacity: .85;
}
.nfyt button.nfyt__btn { cursor: pointer; }
.nfyt .nfyt__btn--dark,
.nfyt .nfyt__btn--dark:hover,
.nfyt .nfyt__btn--dark:focus {
	background: var(--nfyt-dark);
	color: var(--nfyt-dark-text);
}
.nfyt__btn:focus-visible { outline: 3px solid var(--nfyt-accent); outline-offset: 2px; }

/* Grille */
.nfyt--grid .nfyt__list {
	display: grid;
	grid-template-columns: repeat(var(--nfyt-cols), minmax(0, 1fr));
	gap: var(--nfyt-gap);
}
@media (max-width: 960px) {
	.nfyt--grid .nfyt__list { grid-template-columns: repeat(min(var(--nfyt-cols), 2), minmax(0, 1fr)); }
}
@media (max-width: 600px) {
	.nfyt--grid .nfyt__list { grid-template-columns: 1fr; }
}

/* Liste */
.nfyt--list .nfyt__list {
	display: flex;
	flex-direction: column;
	gap: var(--nfyt-gap);
}
.nfyt--list .nfyt__item {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
	gap: var(--nfyt-gap);
	align-items: center;
}
@media (max-width: 600px) {
	.nfyt--list .nfyt__item { grid-template-columns: 1fr; gap: 12px; }
}

/* Lecteur / miniature */
.nfyt__player {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: var(--nfyt-radius);
	background: #000;
}
.nfyt__play {
	all: unset;
	position: absolute;
	inset: 0;
	cursor: pointer;
	display: block;
}
.nfyt__play img {
	width: 100%;
	height: 100%;
	object-fit: cover; /* supprime les bandes noires de la miniature 4:3 */
	display: block;
	transition: transform .4s ease;
}
.nfyt__play:hover img { transform: scale(1.04); }
.nfyt__play:focus-visible { outline: 3px solid var(--nfyt-accent); outline-offset: -3px; }
.nfyt__icon {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	line-height: 0;
}
.nfyt__icon-bg { fill: #212121; fill-opacity: .8; transition: fill .2s, fill-opacity .2s; }
.nfyt__play:hover .nfyt__icon-bg,
.nfyt__play:focus-visible .nfyt__icon-bg { fill: var(--nfyt-accent); fill-opacity: 1; }
.nfyt__player iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* Textes */
.nfyt__meta { margin-top: 12px; }
.nfyt--list .nfyt__meta { margin-top: 0; }
.nfyt__title {
	margin: 0 0 4px;
	font-size: 1em;
	line-height: 1.35;
}
.nfyt__date {
	display: block;
	font-size: .85em;
	color: var(--nfyt-muted);
}
.nfyt__desc {
	margin: 8px 0 0;
	font-size: .9em;
	color: var(--nfyt-muted);
}

/* Apparition des vidéos chargées en AJAX */
.nfyt__item--enter {
	animation: nfyt-in .55s cubic-bezier(.2, .7, .2, 1) both;
}
@keyframes nfyt-in {
	from { opacity: 0; transform: translateY(18px); }
	to   { opacity: 1; transform: none; }
}

/* Bouton « Charger plus » : chargement, erreur, disparition */
.nfyt .nfyt__loadmore { transition: opacity .3s, transform .3s; }
.nfyt .nfyt__loadmore.is-loading { pointer-events: none; opacity: .75; }
.nfyt__loadmore.is-loading::after {
	content: "";
	flex: none;
	width: .9em;
	height: .9em;
	margin-left: .6em;
	box-sizing: border-box;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	animation: nfyt-spin .7s linear infinite;
}
.nfyt__loadmore.has-error { animation: nfyt-shake .4s; }
.nfyt .nfyt__loadmore.is-leaving { opacity: 0; transform: scale(.95); }
@keyframes nfyt-spin { to { transform: rotate(360deg); } }
@keyframes nfyt-shake {
	25% { transform: translateX(-4px); }
	75% { transform: translateX(4px); }
}

@media (prefers-reduced-motion: reduce) {
	.nfyt__item--enter,
	.nfyt__loadmore.is-loading::after,
	.nfyt__loadmore.has-error { animation: none; }
}

.nfyt__more {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	margin: var(--nfyt-gap) 0 0;
}

.nfyt-error {
	padding: 12px 16px;
	border-left: 4px solid #d63638;
	background: #fcf0f1;
	color: #1d2327;
}