/**
 * Correctifs layout v4.0.2 — breadcrumb, espaces, badges stores, partage sticky.
 */

/* ── Logo header — pas de doublon (default + white empilés) ── */
.site-header.site-header--magazine .site-branding .custom-logo-link--adaptive .custom-logo--dark-only {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	margin: 0 !important;
	padding: 0 !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
	opacity: 0 !important;
	visibility: hidden !important;
}

body.dark-mode .site-header.site-header--magazine .site-branding .custom-logo-link--adaptive .custom-logo--dark-only {
	position: static !important;
	width: auto !important;
	height: auto !important;
	overflow: visible !important;
	clip: auto !important;
	white-space: normal !important;
	opacity: 1 !important;
	visibility: visible !important;
	max-height: clamp(44px, 7vw, 56px) !important;
}

body.dark-mode .site-header.site-header--magazine .site-branding .custom-logo-link--adaptive .custom-logo--default {
	display: none !important;
}

/* ── Bandeau YouTube — supprimé définitivement ── */
.home-youtube-banner,
.site-content > .home-youtube-banner {
	display: none !important;
	visibility: hidden !important;
	height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	overflow: hidden !important;
}

.lachtv-breadcrumb {
	display: none !important;
	visibility: hidden !important;
	height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	overflow: hidden !important;
}

body.single-lachtv .single-main .lachtv-breadcrumb {
	display: none !important;
	margin: 0 !important;
}

/* ── 2. Réduction espaces vides (article + accueil) ── */
body.single-lachtv .single-lachtv-grid {
	gap: clamp(12px, 2vw, 18px) !important;
}

body.single-lachtv .single-below {
	gap: clamp(16px, 2.5vw, 22px) !important;
}

body.single-lachtv .single-widget {
	margin-bottom: 0 !important;
}

body.single-lachtv .single-widget + .single-widget {
	margin-top: clamp(10px, 1.5vw, 14px) !important;
}

body.single-lachtv .site-footer.site-footer--harmonized {
	margin-top: clamp(16px, 2.5vw, 28px) !important;
}

.front-page .home-video-block {
	margin-bottom: clamp(12px, 2vw, 18px) !important;
}

/* ── Bloc فيديو — 4 vidéos, grille harmonisée sans trou ── */
.front-page .home-video-grid--four {
	display: grid !important;
	grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
	gap: clamp(10px, 1.2vw, 14px) !important;
	width: 100%;
}

.front-page .home-video-grid--four .home-video-card {
	min-width: 0;
}

.front-page .home-video-body--four {
	padding-bottom: clamp(12px, 1.5vw, 16px) !important;
}

@media (max-width: 1024px) {
	.front-page .home-video-grid--four {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}

@media (max-width: 768px) {
	.front-page .home-video-grid--four {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 10px !important;
	}
}

@media (max-width: 540px) {
	.front-page .home-video-grid--four {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}

/* ── Page catégorie — grille 4 col (priorité sur responsive-max / site-fixes) ── */
body.archive-lachtv .archive-lachtv-grid--four {
	display: grid !important;
	grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
	gap: clamp(8px, 1vw, 12px) !important;
	width: 100%;
}

@media (max-width: 1024px) {
	body.archive-lachtv .archive-lachtv-grid--four {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}

@media (max-width: 768px) {
	body.archive-lachtv .archive-lachtv-grid--four {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 10px !important;
	}
}

/* ── 3. Vidéos sidebar — grille paire mobile ── */
@media (max-width: 768px) {
	body.single-lachtv .single-video-list {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}

/* ── 4. Newsletter article — espacement visuel ── */
body.single-lachtv .article-newsletter {
	margin: clamp(20px, 3.5vw, 32px) 0 clamp(18px, 3vw, 26px) !important;
	padding: clamp(4px, 1vw, 8px) 0 !important;
}

body.single-lachtv .article-newsletter__inner {
	margin-inline: 0 !important;
}

/* ── 5. Badges stores officiels — centrés ── */
.site-footer.site-footer--harmonized .footer-top-col--app {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.site-footer.site-footer--harmonized .footer-top-col--app .footer-top-title {
	padding-inline-start: 0;
	border-inline-start: none;
	text-align: center;
	width: 100%;
}

.site-footer.site-footer--harmonized .footer-top-col--app .footer-top-desc {
	text-align: center;
	margin-inline: auto;
	max-width: 36ch;
}

.site-footer.site-footer--harmonized .footer-app-badges {
	justify-content: center;
	align-items: center;
	width: 100%;
	gap: clamp(8px, 2vw, 12px);
}

.site-footer.site-footer--harmonized .footer-app-badge__img {
	height: 46px;
	width: auto;
	max-width: min(156px, 42vw);
	object-fit: contain;
}

/* ── 6. Réseaux sociaux footer — centrés (toutes tailles) ── */
.site-footer.site-footer--harmonized .footer-col--brand {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.site-footer.site-footer--harmonized .footer-logo-wrap {
	display: flex;
	justify-content: center;
	width: 100%;
}

.site-footer.site-footer--harmonized .footer-social {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
	margin-top: clamp(12px, 2vw, 18px);
}

.site-footer.site-footer--harmonized .footer-social-label {
	display: block;
	width: 100%;
	text-align: center;
	margin-bottom: 10px;
}

.site-footer.site-footer--harmonized .footer-social .social-icons,
.site-footer.site-footer--harmonized .footer-social .social-icons--modern,
.site-footer.site-footer--harmonized .footer-social .social-icons--footer {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 10px;
	width: 100%;
	margin-inline: auto;
	padding-inline: 0;
}

/* ── 7. Barre partage sticky — ne casse plus le footer ── */
@media (max-width: 768px) {
	body.single-lachtv.has-sticky-share .site-footer.site-footer--harmonized {
		padding-bottom: calc(52px + env(safe-area-inset-bottom, 0px));
	}

	body.single-lachtv.has-sticky-share .entry-share-sticky {
		z-index: 9985;
	}

	body.single-lachtv .entry-share-sticky__btn {
		font-size: 0.75rem;
		padding: 8px 6px;
		min-height: 46px;
	}

	body.single-lachtv .entry-share-sticky__btn svg {
		flex-shrink: 0;
	}
}

@media (max-width: 991px) {
	.site-footer.site-footer--harmonized .footer-top-band__inner {
		grid-template-columns: 1fr;
		gap: clamp(24px, 4vw, 32px);
	}

	.site-footer.site-footer--harmonized .footer-top-divider {
		display: none;
	}

	.site-footer.site-footer--harmonized .footer-top-col--newsletter,
	.site-footer.site-footer--harmonized .footer-top-col--app {
		align-items: center;
		text-align: center;
	}

	.site-footer.site-footer--harmonized .footer-top-col--newsletter .footer-top-title {
		padding-inline-start: 0;
		border-inline-start: none;
		text-align: center;
		width: 100%;
	}

	.site-footer.site-footer--harmonized .footer-top-col--newsletter .footer-top-desc {
		text-align: center;
		margin-inline: auto;
	}
}

/* ═══════════════════════════════════════════════════════════════
   8. الأكثر مشاهدة — correctif desktop + mobile (priorité max)
   ═══════════════════════════════════════════════════════════════ */

/* Desktop / tablette — neutralise home-reference (flex + card-body legacy) */
.front-page .most-viewed-section .most-viewed-mosaic-grid {
	display: grid !important;
	min-height: 0;
}

.front-page .most-viewed-section .most-viewed-card--featured {
	display: block !important;
	flex-direction: unset !important;
	height: auto !important;
	align-self: stretch !important;
	border: none !important;
	box-shadow: none !important;
}

.front-page .most-viewed-section .most-viewed-card--featured::before {
	display: none !important;
	content: none !important;
}

.front-page .most-viewed-section .most-viewed-card-body {
	display: none !important;
}

@media (min-width: 641px) {
	.front-page .most-viewed-section .most-viewed-body {
		min-height: 120px;
	}

	.front-page .most-viewed-section .most-viewed-mosaic-grid {
		grid-template-rows: auto auto !important;
	}
}

/* Mobile — annule mobile-premium-max + force layout liste */
@media (max-width: 768px) {
	.front-page .most-viewed-section.home-reveal {
		opacity: 1 !important;
		transform: none !important;
		filter: none !important;
		visibility: visible !important;
	}

	.front-page .most-viewed-section .most-viewed-body {
		display: block !important;
		padding: 10px !important;
		min-height: 0 !important;
		overflow: visible !important;
	}

	.front-page .most-viewed-section .most-viewed-mosaic-grid {
		display: grid !important;
		grid-template-columns: 1fr !important;
		grid-template-rows: none !important;
		grid-template-areas:
			"feat"
			"s1"
			"s2"
			"s3"
			"s4" !important;
		gap: 8px !important;
		width: 100% !important;
		min-height: 0 !important;
		height: auto !important;
	}

	.front-page .most-viewed-section .most-viewed-card,
	.front-page .most-viewed-section .most-viewed-card--featured {
		display: block !important;
		width: 100% !important;
		height: auto !important;
		min-height: 0 !important;
		overflow: visible !important;
		box-shadow: none !important;
		border: none !important;
		border-radius: 0 !important;
		contain: none !important;
	}

	/* Vedette — overlay 16:9 */
	.front-page .most-viewed-section .most-viewed-card--featured .most-viewed-card-link {
		display: block !important;
		position: relative !important;
		width: 100% !important;
		height: auto !important;
		min-height: 0 !important;
		aspect-ratio: 16 / 9 !important;
		border-radius: 8px !important;
		overflow: hidden !important;
		background: #111 !important;
	}

	.front-page .most-viewed-section .most-viewed-card--featured .most-viewed-card-thumb {
		position: absolute !important;
		inset: 0 !important;
		width: 100% !important;
		height: 100% !important;
		max-height: none !important;
		aspect-ratio: unset !important;
		border-radius: 0 !important;
		flex: none !important;
	}

	.front-page .most-viewed-section .most-viewed-card--featured .most-viewed-card-img {
		position: absolute !important;
		inset: 0 !important;
		width: 100% !important;
		height: 100% !important;
		object-fit: cover !important;
	}

	.front-page .most-viewed-section .most-viewed-card--featured .most-viewed-card-overlay {
		display: block !important;
	}

	.front-page .most-viewed-section .most-viewed-card--featured .most-viewed-card-caption {
		position: absolute !important;
		inset-inline: 0 !important;
		bottom: 0 !important;
		display: block !important;
		padding: 28px 12px 12px !important;
		background: transparent !important;
	}

	.front-page .most-viewed-section .most-viewed-card--featured .most-viewed-card-title {
		color: #fff !important;
		font-size: 0.875rem !important;
		-webkit-line-clamp: 2 !important;
		line-clamp: 2 !important;
	}

	/* Articles 2–5 — ligne horizontale */
	.front-page .most-viewed-section .most-viewed-card:not(.most-viewed-card--featured) .most-viewed-card-link {
		display: flex !important;
		flex-direction: row !important;
		align-items: stretch !important;
		width: 100% !important;
		height: auto !important;
		min-height: 76px !important;
		aspect-ratio: unset !important;
		background: var(--news-surface, #fff) !important;
		border: 1px solid var(--news-border, #e4e7ec) !important;
		border-radius: 8px !important;
		overflow: hidden !important;
		box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06) !important;
	}

	.front-page .most-viewed-section .most-viewed-card:not(.most-viewed-card--featured) .most-viewed-card-thumb {
		position: relative !important;
		flex: 0 0 112px !important;
		width: 112px !important;
		min-height: 76px !important;
		height: auto !important;
		aspect-ratio: unset !important;
		border-radius: 0 !important;
		inset: auto !important;
	}

	.front-page .most-viewed-section .most-viewed-card:not(.most-viewed-card--featured) .most-viewed-card-img {
		position: absolute !important;
		inset: 0 !important;
		width: 100% !important;
		height: 100% !important;
		object-fit: cover !important;
	}

	.front-page .most-viewed-section .most-viewed-card:not(.most-viewed-card--featured) .most-viewed-card-overlay {
		display: none !important;
	}

	.front-page .most-viewed-section .most-viewed-card:not(.most-viewed-card--featured) .most-viewed-card-caption {
		position: static !important;
		flex: 1 1 auto !important;
		display: flex !important;
		flex-direction: column !important;
		justify-content: center !important;
		gap: 3px !important;
		padding: 8px 10px !important;
		background: var(--news-surface, #fff) !important;
		text-align: start !important;
	}

	.front-page .most-viewed-section .most-viewed-card:not(.most-viewed-card--featured) .most-viewed-card-title {
		color: var(--news-ink, #1a1a1a) !important;
		text-shadow: none !important;
		font-size: 0.8125rem !important;
		font-weight: 600 !important;
		-webkit-line-clamp: 2 !important;
		line-clamp: 2 !important;
	}

	.front-page .most-viewed-section .most-viewed-card:not(.most-viewed-card--featured) .most-viewed-cat {
		color: var(--news-red, #e60000) !important;
	}

	.front-page .most-viewed-section .most-viewed-card:not(.most-viewed-card--featured) .most-viewed-views {
		color: var(--news-muted, #5c6670) !important;
	}

	body.dark-mode .front-page .most-viewed-section .most-viewed-card:not(.most-viewed-card--featured) .most-viewed-card-link,
	body.dark-mode .front-page .most-viewed-section .most-viewed-card:not(.most-viewed-card--featured) .most-viewed-card-caption {
		background: var(--news-surface, #1a1a1a) !important;
		border-color: var(--news-border, rgba(255, 255, 255, 0.1)) !important;
	}

	body.dark-mode .front-page .most-viewed-section .most-viewed-card:not(.most-viewed-card--featured) .most-viewed-card-title {
		color: var(--news-ink, #fafafa) !important;
	}
}
