/**
 * Nouyouin Hero Slider — styles front (v1.4.0).
 *
 * Tous les sélecteurs sont préfixés par .nyhs (et les éléments sensibles
 * réinitialisés) pour résister aux styles globaux des thèmes / constructeurs
 * (button, img, h2, a, svg…) introduits par les mises à jour récentes.
 */

.nyhs {
	--nyhs-green: #184d47;
	--nyhs-orange: #c14426;
	--nyhs-yellow: #d4a019;
	--nyhs-brown: #3a2d1c;
	position: relative;
	display: block;
	width: 100%;
	max-width: 100%;
	margin: 0;
	border-radius: 18px;
	overflow: hidden;
	background: #0d0d0d;
	box-shadow: 0 18px 50px rgba(0, 0, 0, 0.18);
	font-family: inherit;
	line-height: normal;
	isolation: isolate;
}

.nyhs *,
.nyhs *::before,
.nyhs *::after {
	box-sizing: border-box;
}

.nyhs .nyhs-viewport {
	overflow: hidden;
	width: 100%;
	margin: 0;
	padding: 0;
}

.nyhs .nyhs-track {
	display: flex;
	flex-wrap: nowrap;
	width: 100%;
	margin: 0;
	padding: 0;
	transition: transform 0.65s cubic-bezier(0.22, 0.61, 0.36, 1);
	will-change: transform;
}

.nyhs .nyhs-slide {
	position: relative;
	flex: 0 0 100%;
	width: 100%;
	min-width: 100%;
	/* Hauteur fixe fiable (aspect-ratio + max-height se contrariaient selon la largeur). */
	height: clamp(380px, 42vw, 600px);
	margin: 0;
	padding: 0;
	overflow: hidden;
}

/* ---- Média ---- */
.nyhs .nyhs-media {
	position: absolute;
	inset: 0;
	display: block;
	margin: 0;
	padding: 0;
	text-decoration: none;
	border: 0;
	box-shadow: none;
}

.nyhs .nyhs-bg {
	position: absolute;
	inset: -8%;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	filter: blur(28px) brightness(0.55);
	transform: scale(1.1);
	z-index: 1;
}

.nyhs .nyhs-media img.nyhs-img {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	right: auto !important;
	bottom: auto !important;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	max-height: none !important;
	min-width: 0 !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	object-fit: cover !important;
	object-position: center center;
	display: block;
	opacity: 1;
	z-index: 2;
	transform-origin: center center;
}

/*
 * Mode « affiche » (v1.3) : visuels carrés ou verticaux (pochettes de
 * podcast, affiches avec texte). Fond aux couleurs de la marque, pochette
 * présentée comme une carte (coins arrondis, ombre), texte à gauche.
 */
.nyhs .nyhs-slide.is-poster {
	background:
		radial-gradient(ellipse at 78% 45%, rgba(212, 160, 25, 0.22) 0%, rgba(212, 160, 25, 0) 55%),
		radial-gradient(ellipse at 10% 100%, rgba(24, 77, 71, 0.75) 0%, rgba(24, 77, 71, 0) 60%),
		linear-gradient(120deg, #0f2a26 0%, #0b1311 55%, #17110a 100%);
}

.nyhs .nyhs-slide.is-poster .nyhs-bg {
	opacity: 0.22;
	filter: blur(60px) saturate(1.2);
}

/* Motif discret pour éviter un aplat « vide ». */
.nyhs .nyhs-slide.is-poster .nyhs-media::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background-image: radial-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px);
	background-size: 22px 22px;
	-webkit-mask-image: linear-gradient(to right, #000 0%, transparent 60%);
	mask-image: linear-gradient(to right, #000 0%, transparent 60%);
}

.nyhs .nyhs-slide.is-poster .nyhs-media img.nyhs-img {
	top: 50% !important;
	left: auto !important;
	right: clamp(70px, 7vw, 110px) !important;
	width: auto !important;
	height: 80% !important;
	max-width: 44% !important;
	aspect-ratio: var(--nyhs-ratio, 1);
	object-fit: cover !important;
	object-position: center;
	border-radius: 16px !important;
	box-shadow: 0 30px 70px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.08) !important;
	transform: translateY(-50%);
	transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.nyhs .nyhs-slide.is-poster.is-active .nyhs-media img.nyhs-img {
	animation: nyhs-poster-in 0.8s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

.nyhs .nyhs-slide.is-poster:hover .nyhs-media img.nyhs-img {
	transform: translateY(-50%) scale(1.02);
}

@keyframes nyhs-poster-in {
	from { opacity: 0; transform: translateY(-46%) scale(0.97); }
	to   { opacity: 1; transform: translateY(-50%) scale(1); }
}

.nyhs .nyhs-slide.is-poster .nyhs-scrim {
	background: linear-gradient(to right, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 55%);
}

.nyhs .nyhs-slide.is-poster .nyhs-body {
	top: 0;
	bottom: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	max-width: 56%;
}

.nyhs .nyhs-slide.is-poster h2.nyhs-title {
	-webkit-line-clamp: 3;
	line-clamp: 3;
	font-size: clamp(24px, 3.2vw, 44px);
}

.nyhs .nyhs-slide.is-poster p.nyhs-desc {
	-webkit-line-clamp: 3;
	line-clamp: 3;
}

/*
 * Mode « lecteur » (v1.4) : vidéos YouTube. Les miniatures contiennent déjà
 * leur propre texte : on les présente comme un écran 16:9 à droite, bouton
 * lecture centré dessus, et le texte du slider à gauche sur fond de marque.
 */
.nyhs .nyhs-slide.nyhs-type-youtube {
	container-type: inline-size;
	--nyhs-card-w: 46%;
	--nyhs-card-right: clamp(70px, 7vw, 110px);
	background:
		radial-gradient(ellipse at 75% 50%, rgba(193, 68, 38, 0.22) 0%, rgba(193, 68, 38, 0) 55%),
		radial-gradient(ellipse at 10% 100%, rgba(24, 77, 71, 0.75) 0%, rgba(24, 77, 71, 0) 60%),
		linear-gradient(120deg, #0f2a26 0%, #0b1311 55%, #1a0f0b 100%);
}

.nyhs .nyhs-slide.nyhs-type-youtube .nyhs-bg {
	opacity: 0.2;
	filter: blur(60px) saturate(1.2);
}

.nyhs .nyhs-slide.nyhs-type-youtube .nyhs-media::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background-image: radial-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px);
	background-size: 22px 22px;
	-webkit-mask-image: linear-gradient(to right, #000 0%, transparent 60%);
	mask-image: linear-gradient(to right, #000 0%, transparent 60%);
}

.nyhs .nyhs-slide.nyhs-type-youtube .nyhs-media img.nyhs-img {
	top: 50% !important;
	left: auto !important;
	right: var(--nyhs-card-right) !important;
	width: var(--nyhs-card-w) !important;
	height: auto !important;
	max-height: 82% !important;
	aspect-ratio: 16 / 9;
	object-fit: cover !important;
	object-position: center;
	border-radius: 14px !important;
	box-shadow: 0 30px 70px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.08) !important;
	transform: translateY(-50%);
	transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1), filter 0.3s ease;
}

.nyhs .nyhs-slide.nyhs-type-youtube.is-active .nyhs-media img.nyhs-img {
	animation: nyhs-poster-in 0.8s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

.nyhs .nyhs-slide.nyhs-type-youtube:hover .nyhs-media img.nyhs-img {
	transform: translateY(-50%) scale(1.02);
	filter: brightness(0.85);
}

.nyhs .nyhs-slide.nyhs-type-youtube .nyhs-scrim {
	background: linear-gradient(to right, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 55%);
}

/* Bouton lecture centré sur l'écran (et non plus au milieu du slider). */
.nyhs .nyhs-slide.nyhs-type-youtube .nyhs-play {
	left: calc(100% - var(--nyhs-card-right) - (var(--nyhs-card-w) / 2));
	width: 76px;
	height: 76px;
	border: 0;
	background: #ff0000;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}

.nyhs .nyhs-slide.nyhs-type-youtube:hover .nyhs-play {
	background: var(--nyhs-orange);
}

.nyhs .nyhs-slide.nyhs-type-youtube .nyhs-body {
	top: 0;
	bottom: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	max-width: calc(100% - var(--nyhs-card-w) - var(--nyhs-card-right) - 20px);
}

.nyhs .nyhs-slide.nyhs-type-youtube h2.nyhs-title {
	-webkit-line-clamp: 3;
	line-clamp: 3;
	font-size: clamp(24px, 3vw, 42px);
}

.nyhs .nyhs-slide.nyhs-type-youtube p.nyhs-desc {
	-webkit-line-clamp: 3;
	line-clamp: 3;
}

/* Léger zoom sur la diapositive active (photos uniquement). */
.nyhs .nyhs-slide.is-active:not(.is-poster):not(.nyhs-type-youtube) .nyhs-img {
	animation: nyhs-zoom 7s ease-out forwards;
}

@keyframes nyhs-zoom {
	from { transform: scale(1); }
	to   { transform: scale(1.07); }
}

.nyhs .nyhs-scrim {
	position: absolute;
	inset: 0;
	z-index: 3;
	background:
		linear-gradient(to top, rgba(0, 0, 0, 0.82) 0%, rgba(0, 0, 0, 0.35) 38%, rgba(0, 0, 0, 0) 68%),
		linear-gradient(to right, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 55%);
}

.nyhs .nyhs-play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 4;
	width: 78px;
	height: 78px;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.55);
	border: 2px solid rgba(255, 255, 255, 0.85);
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	transition: transform 0.2s ease, background 0.2s ease;
}

.nyhs .nyhs-slide:hover .nyhs-play {
	transform: translate(-50%, -50%) scale(1.08);
	background: var(--nyhs-orange);
}

.nyhs .nyhs-play svg {
	width: 34px !important;
	height: 34px !important;
	margin-left: 4px;
	fill: currentColor;
}

/* ---- Contenu ---- */
.nyhs .nyhs-body {
	position: absolute;
	left: 0;
	bottom: 0;
	z-index: 5;
	width: 100%;
	max-width: 760px;
	margin: 0;
	padding: clamp(20px, 4vw, 46px);
	padding-bottom: clamp(64px, 6vw, 76px);
	/* Décalage à gauche pour ne jamais passer sous la flèche précédente. */
	padding-left: clamp(74px, 7vw, 104px);
	color: #fff;
	text-align: left;
}

.nyhs .nyhs-badge {
	display: inline-block;
	flex: 0 0 auto;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 6px 13px;
	border-radius: 999px;
	margin: 0 0 14px;
	color: #fff;
	background: var(--nyhs-green);
	line-height: 1;
}

.nyhs .nyhs-meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
	margin: 0 0 16px;
}

.nyhs .nyhs-meta .nyhs-badge {
	margin: 0;
}

.nyhs .nyhs-date {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.72);
}

.nyhs .nyhs-badge-post { background: var(--nyhs-green); color: #fff; }
.nyhs .nyhs-badge-youtube { background: #ff0000; color: #fff; }
.nyhs .nyhs-badge-podcast { background: var(--nyhs-yellow); color: #1a1407; }
.nyhs .nyhs-badge-tiktok { background: #111; color: #fff; }

.nyhs h2.nyhs-title {
	margin: 0 0 12px;
	padding: 0;
	border: 0;
	font-family: inherit;
	font-size: clamp(22px, 3.4vw, 40px);
	line-height: 1.12;
	font-weight: 800;
	letter-spacing: -0.01em;
	text-transform: none;
	color: #fff;
	text-shadow: 0 2px 18px rgba(0, 0, 0, 0.45);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.nyhs h2.nyhs-title::before,
.nyhs h2.nyhs-title::after {
	content: none;
	display: none;
}

.nyhs .nyhs-title a,
.nyhs .nyhs-title a:visited {
	color: #fff;
	text-decoration: none;
	box-shadow: none;
	border: 0;
}

.nyhs .nyhs-title a:hover {
	color: #f3ede0;
}

.nyhs p.nyhs-desc {
	margin: 0 0 20px;
	padding: 0;
	font-size: clamp(14px, 1.4vw, 17px);
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.92);
	max-width: 620px;
	text-shadow: 0 1px 10px rgba(0, 0, 0, 0.4);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.nyhs a.nyhs-cta,
.nyhs a.nyhs-cta:visited {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	width: auto;
	margin: 0;
	padding: 12px 22px;
	border: 0;
	border-radius: 10px;
	background: var(--nyhs-green);
	color: #fff;
	font-weight: 700;
	font-size: 15px;
	line-height: 1.2;
	text-decoration: none;
	text-transform: none;
	box-shadow: none;
	transition: background 0.18s ease, transform 0.18s ease;
}

.nyhs .nyhs-cta span {
	transition: transform 0.18s ease;
}

.nyhs a.nyhs-cta:hover,
.nyhs a.nyhs-cta:focus-visible {
	background: var(--nyhs-orange);
	color: #fff;
}

.nyhs .nyhs-cta:hover span {
	transform: translateX(3px);
}

/* ---- Réinitialisation des boutons (flèches + points) ----
 * Les thèmes appliquent souvent padding, min-height, line-height, bordures,
 * fonds et ombres à tous les <button> : on neutralise tout. */
.nyhs button.nyhs-arrow,
.nyhs button.nyhs-dot {
	-webkit-appearance: none !important;
	appearance: none !important;
	margin: 0 !important;
	padding: 0 !important;
	min-width: 0 !important;
	min-height: 0 !important;
	max-width: none !important;
	max-height: none !important;
	line-height: 0 !important;
	font-size: 0 !important;
	letter-spacing: 0 !important;
	text-indent: 0 !important;
	border: 0 !important;
	box-shadow: none !important;
	text-shadow: none !important;
	outline-offset: 2px;
	cursor: pointer;
	flex: 0 0 auto !important;
}

.nyhs button.nyhs-arrow::before,
.nyhs button.nyhs-arrow::after,
.nyhs button.nyhs-dot::before,
.nyhs button.nyhs-dot:not(.is-active)::after {
	content: none !important;
	display: none !important;
}

/* ---- Flèches ---- */
.nyhs button.nyhs-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 6;
	width: 46px !important;
	height: 46px !important;
	border-radius: 50% !important;
	background: rgba(0, 0, 0, 0.4) !important;
	color: #fff !important;
	display: flex !important;
	align-items: center;
	justify-content: center;
	backdrop-filter: blur(2px);
	transition: background 0.18s ease;
}

.nyhs button.nyhs-arrow:hover,
.nyhs button.nyhs-arrow:focus-visible {
	background: var(--nyhs-orange) !important;
	color: #fff !important;
	outline: none;
}

.nyhs button.nyhs-arrow svg {
	display: block !important;
	width: 24px !important;
	height: 24px !important;
	min-width: 24px;
	max-width: none !important;
	flex: 0 0 24px;
	fill: none !important;
	stroke: currentColor !important;
	overflow: visible;
}

.nyhs button.nyhs-prev { left: 16px; right: auto; }
.nyhs button.nyhs-next { right: 16px; left: auto; }

/* ---- Pagination (avec progression de l'autoplay) ---- */
.nyhs .nyhs-dots {
	position: absolute;
	z-index: 6;
	left: 50%;
	right: auto;
	bottom: 20px;
	transform: translateX(-50%);
	display: flex;
	align-items: center;
	gap: 8px;
	height: 26px;
	margin: 0;
	padding: 0 12px;
	border-radius: 999px;
	background: rgba(0, 0, 0, 0.35);
	backdrop-filter: blur(6px);
}

.nyhs button.nyhs-dot {
	position: relative;
	display: block !important;
	width: 8px !important;
	height: 8px !important;
	overflow: hidden;
	border-radius: 999px !important;
	background: rgba(255, 255, 255, 0.45) !important;
	transition: background 0.2s ease, width 0.3s ease;
}

.nyhs button.nyhs-dot:hover {
	background: rgba(255, 255, 255, 0.8) !important;
}

.nyhs button.nyhs-dot.is-active {
	width: 34px !important;
	background: rgba(255, 255, 255, 0.35) !important;
}

/* Remplissage : statique sans autoplay, animé pendant l'autoplay. */
.nyhs button.nyhs-dot.is-active::after {
	content: "" !important;
	display: block !important;
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: #fff;
	transform-origin: left center;
}

.nyhs.is-running button.nyhs-dot.is-active::after {
	animation: nyhs-progress var(--nyhs-delay, 6000ms) linear forwards;
}

@keyframes nyhs-progress {
	from { transform: scaleX(0); }
	to   { transform: scaleX(1); }
}

/* ---- Responsive ---- */
@media (max-width: 782px) {
	.nyhs {
		border-radius: 14px;
	}
	.nyhs .nyhs-slide {
		height: auto;
		aspect-ratio: 4 / 5;
		min-height: 440px;
	}
	/* Sur mobile, la pochette est centrée en haut, le texte en dessous. */
	.nyhs .nyhs-slide.is-poster {
		aspect-ratio: auto;
		min-height: 620px;
	}
	.nyhs .nyhs-slide.is-poster .nyhs-media img.nyhs-img {
		top: 24px !important;
		left: 50% !important;
		right: auto !important;
		height: auto !important;
		width: 62% !important;
		max-width: 260px !important;
		transform: translateX(-50%);
	}
	.nyhs .nyhs-slide.is-poster:hover .nyhs-media img.nyhs-img {
		transform: translateX(-50%);
	}
	.nyhs .nyhs-slide.is-poster.is-active .nyhs-media img.nyhs-img {
		animation: none;
	}
	.nyhs .nyhs-slide.is-poster .nyhs-body {
		top: auto;
		max-width: 100%;
		justify-content: flex-end;
	}
	.nyhs .nyhs-slide.is-poster h2.nyhs-title {
		-webkit-line-clamp: 2;
		line-clamp: 2;
	}
	.nyhs .nyhs-slide.is-poster p.nyhs-desc {
		-webkit-line-clamp: 2;
		line-clamp: 2;
	}
	.nyhs .nyhs-dots {
		bottom: 12px;
	}
	/* Vidéo sur mobile : écran 16:9 en haut, texte en dessous. */
	.nyhs .nyhs-slide.nyhs-type-youtube {
		--nyhs-card-w: 88%;
		aspect-ratio: auto;
		min-height: 560px;
	}
	.nyhs .nyhs-slide.nyhs-type-youtube .nyhs-media img.nyhs-img {
		top: 24px !important;
		left: 6% !important;
		right: auto !important;
		transform: none;
		animation: none !important;
	}
	.nyhs .nyhs-slide.nyhs-type-youtube:hover .nyhs-media img.nyhs-img {
		transform: none;
	}
	.nyhs .nyhs-slide.nyhs-type-youtube .nyhs-play {
		left: 50%;
		top: calc(24px + 88cqw * 9 / 32);
		width: 60px;
		height: 60px;
	}
	.nyhs .nyhs-slide.nyhs-type-youtube .nyhs-body {
		top: auto;
		max-width: 100%;
		justify-content: flex-end;
	}
	.nyhs .nyhs-slide.nyhs-type-youtube h2.nyhs-title,
	.nyhs .nyhs-slide.nyhs-type-youtube p.nyhs-desc {
		-webkit-line-clamp: 2;
		line-clamp: 2;
	}
	.nyhs .nyhs-body {
		padding-bottom: 54px;
		/* Sur mobile la flèche est plus petite : on dégage juste ce qu'il faut. */
		padding-left: 60px;
		padding-right: 60px;
	}
	.nyhs button.nyhs-arrow {
		width: 38px !important;
		height: 38px !important;
	}
	.nyhs button.nyhs-prev { left: 10px; }
	.nyhs button.nyhs-next { right: 10px; }
}

@media (prefers-reduced-motion: reduce) {
	.nyhs .nyhs-track { transition: none; }
	.nyhs .nyhs-slide.is-active .nyhs-img,
	.nyhs .nyhs-slide.is-poster.is-active .nyhs-media img.nyhs-img { animation: none; }
	.nyhs.is-running button.nyhs-dot.is-active::after { animation: none; transform: scaleX(1); }
	.nyhs .nyhs-cta span { transition: none; }
}