/**
 * Premium UI Layer v3.58 — polish visuel unifié.
 * Structure, sections et logique inchangées — CSS uniquement.
 */

/* ── 1. Fondations & performance ── */
html {
	scroll-padding-top: 68px;
}

body {
	color: var(--news-text);
	background: var(--news-canvas);
}

img,
video,
svg {
	max-width: 100%;
	height: auto;
}

/* ── 2. Typographie — hiérarchie renforcée ── */
h1, h2, h3, h4, h5, h6,
.entry-title,
.home-premium-title,
.archive-hero-title,
.archive-lachtv-title {
	color: var(--news-ink);
	font-weight: 800;
	line-height: var(--leading-tight, 1.28);
}

.entry-meta,
.post-card-meta,
.home-feed-date,
.archive-card--mosaic .archive-card-date,
.most-viewed-views,
.home-cat-list-date {
	color: var(--news-muted) !important;
	font-size: var(--type-meta) !important;
	font-weight: 500;
	letter-spacing: 0.01em;
}

.post-card-title a,
.home-cat-featured-title a,
.home-mosaic-tile-title a,
.home-national-title a,
.home-video-card-title a,
.home-tri-featured-title a,
.home-tri-list-title a,
.home-see-also-card-title a,
.archive-card--mosaic .archive-card-title a,
.related-post__title a {
	color: var(--news-ink);
	font-weight: 600;
	transition: color var(--ui-transition);
}

.post-card-title a:hover,
.home-cat-featured-title a:hover,
.home-mosaic-tile-title a:hover,
.home-national-title a:hover,
.home-video-card-title a:hover,
.home-tri-featured-title a:hover,
.home-tri-list-title a:hover,
.home-see-also-card-title a:hover,
.archive-card--mosaic .archive-card-title a:hover,
.related-post__title a:hover {
	color: var(--news-red);
}

/* ── 3. Cartes — shell premium unifié ── */
.post-card,
.archive-featured,
.related-post,
.front-page .home-cat-featured,
.front-page .home-mosaic-tile,
.front-page .home-national-item,
.front-page .home-video-card,
.front-page .home-tri-featured,
.front-page .home-tri-list-item,
.front-page .home-see-also-card,
.front-page .home-highlight-card,
.front-page .home-widget__item,
.archive-card--mosaic,
.front-page .programs-video-section .carousel-card,
.front-page .believe-section .believe-card {
	border: var(--ui-border);
	border-radius: var(--ui-radius-sm);
	background: var(--news-surface);
	box-shadow: var(--news-shadow-xs);
	transition:
		box-shadow var(--ui-transition),
		transform var(--ui-transition),
		border-color var(--ui-transition);
}

/* Blocs section — coque premium */
.front-page .home-premium-block,
.front-page .home-mosaic-block,
.front-page .home-national-block,
.front-page .home-video-block,
.front-page .home-sports-block,
.front-page .home-tri-columns,
.front-page .home-category-sections .home-category-section,
.front-page .most-viewed-section,
.front-page .programs-video-section,
.front-page .believe-section,
.front-page .home-see-also-zone,
.front-page .home-widget,
.single-post,
.page-content,
.archive-widget,
.related-posts {
	border: var(--ui-border);
	border-radius: var(--ui-radius);
	background: var(--news-surface);
	box-shadow: var(--news-shadow);
	overflow: hidden;
}

/* En-têtes de section — gradient premium */
.front-page .home-premium-header,
.front-page .home-mosaic-accent-header,
.front-page .home-sports-header,
.front-page .most-viewed-header,
.front-page .home-video-header,
.front-page .section-header,
.archive-widget__header,
.widget-title {
	position: relative;
	background: linear-gradient(118deg, #0a0a0a 0%, var(--news-charcoal) 42%, #1a1a1a 100%) !important;
}

.front-page .home-premium-header::after,
.front-page .home-mosaic-accent-header::after,
.front-page .home-sports-header::after,
.front-page .most-viewed-header::after,
.front-page .home-video-header::after,
.front-page .section-header::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	height: 2px;
	background: linear-gradient(
		90deg,
		transparent 0%,
		var(--news-gold) 20%,
		var(--news-red) 50%,
		var(--news-gold) 80%,
		transparent 100%
	);
	opacity: 0.9;
}

/* ── 4. Hover & micro-interactions (desktop) ── */
@media (hover: hover) and (pointer: fine) {
	.post-card:hover,
	.archive-featured:hover,
	.related-post:hover,
	.front-page .home-cat-featured:hover,
	.front-page .home-mosaic-tile:hover,
	.front-page .home-national-item:hover,
	.front-page .home-video-card:hover,
	.front-page .home-see-also-card:hover,
	.front-page .home-highlight-card:hover,
	.archive-card--mosaic:hover,
	.front-page .programs-video-section .carousel-card:hover,
	.front-page .believe-section .believe-card:hover {
		box-shadow: var(--news-shadow-hover);
		transform: var(--ui-lift);
		border-color: rgba(var(--news-gold-rgb), 0.25);
	}

	.front-page .home-premium-block:hover,
	.front-page .home-mosaic-block:hover,
	.front-page .home-national-block:hover,
	.front-page .most-viewed-section:hover {
		box-shadow: var(--news-shadow-hover);
	}
}

/* ── 5. Boutons — système unifié ── */
.btn-primary,
button.btn-primary,
.home-premium-more-btn,
.home-sports-more-btn,
.home-video-more-btn,
.home-culture-more-btn,
.most-viewed-more-btn,
.section-more,
.archive-read-more,
.archive-lachtv-read__link,
.site-footer.site-footer--harmonized .footer-newsletter-btn,
.notification-subscribe,
.entry-cta__btn,
.single-main .form-submit .submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-height: 36px;
	padding: 7px 16px;
	font-family: inherit;
	font-size: var(--type-meta);
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0.02em;
	text-decoration: none;
	color: var(--news-charcoal);
	background: var(--news-gold);
	border: 1px solid rgba(0, 0, 0, 0.06);
	border-radius: var(--ui-radius-pill);
	box-shadow: 0 2px 8px rgba(var(--news-gold-rgb), 0.28);
	cursor: pointer;
	transition:
		background var(--ui-transition),
		transform var(--ui-transition),
		box-shadow var(--ui-transition),
		color var(--ui-transition);
}

.btn-primary:hover,
button.btn-primary:hover,
.home-premium-more-btn:hover,
.home-sports-more-btn:hover,
.home-video-more-btn:hover,
.most-viewed-more-btn:hover,
.section-more:hover,
.archive-read-more:hover,
.archive-lachtv-read__link:hover,
.site-footer.site-footer--harmonized .footer-newsletter-btn:hover,
.notification-subscribe:hover {
	background: var(--news-gold-bright);
	transform: translateY(-1px);
	box-shadow: 0 4px 14px rgba(var(--news-gold-rgb), 0.38);
	color: var(--news-charcoal);
}

.btn-primary:active,
.home-premium-more-btn:active,
.archive-read-more:active {
	transform: translateY(0);
	box-shadow: 0 1px 4px rgba(var(--news-gold-rgb), 0.2);
}

/* Boutons secondaires / outline */
.notification-later,
.entry-share__btn {
	border-radius: var(--ui-radius-sm);
	font-weight: 600;
	transition:
		background var(--ui-transition),
		border-color var(--ui-transition),
		transform var(--ui-transition),
		color var(--ui-transition);
}

/* Pagination */
.page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	min-height: 36px;
	padding: 4px 10px;
	font-weight: 600;
	border: var(--ui-border);
	border-radius: var(--ui-radius-sm);
	background: var(--news-surface);
	transition:
		background var(--ui-transition),
		border-color var(--ui-transition),
		color var(--ui-transition),
		transform var(--ui-transition);
}

.page-numbers.current,
.page-numbers:hover {
	background: var(--news-gold);
	border-color: var(--news-gold);
	color: var(--news-charcoal);
}

/* ── 6. Formulaires — inputs, selects, search ── */
input[type="text"],
input[type="email"],
input[type="search"],
input[type="url"],
input[type="tel"],
input[type="password"],
textarea,
select,
.header-search__field,
.search-form input[type="search"],
.site-footer.site-footer--harmonized .footer-newsletter-input {
	min-height: 40px;
	padding: 8px 14px;
	font-family: inherit;
	font-size: var(--type-body);
	color: var(--news-ink);
	background: var(--news-surface);
	border: var(--ui-border);
	border-radius: var(--ui-radius-sm);
	box-shadow: var(--news-shadow-inset);
	transition:
		border-color var(--ui-transition),
		box-shadow var(--ui-transition);
}

.header-search__field,
.search-form input[type="search"] {
	border-radius: var(--ui-radius-pill);
}

input:focus,
textarea:focus,
select:focus,
.header-search__field:focus,
.search-form input[type="search"]:focus,
.site-footer.site-footer--harmonized .footer-newsletter-input:focus {
	border-color: var(--news-gold);
	box-shadow: 0 0 0 3px var(--news-gold-soft);
	outline: none;
}

/* ── 7. Badges & labels ── */
.category-badge,
.hero-slide-cat,
.front-page .home-zone-label,
.front-page .related-post__cat,
.front-page .home-see-also-cat-label,
.archive-card--mosaic .archive-card-cat {
	display: inline-flex;
	align-items: center;
	padding: 3px 10px;
	font-size: 10px;
	font-weight: 800;
	line-height: 1.3;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	border-radius: var(--news-radius-xs);
}

.category-badge,
.archive-card--mosaic .archive-card-cat {
	background: var(--news-gold);
	color: var(--news-charcoal);
	box-shadow: 0 1px 4px rgba(var(--news-gold-rgb), 0.3);
}

.hero-slide-cat {
	background: var(--news-red);
	color: #fff;
	box-shadow: 0 2px 8px rgba(var(--news-red-rgb), 0.3);
}

/* ── 8. Modales & popups ── */
.notification-popup-inner {
	border: var(--ui-border);
	border-radius: var(--ui-radius);
	background: var(--news-surface);
	box-shadow: var(--news-shadow-lg);
	padding: clamp(16px, 3vw, 24px);
}

.notification-later {
	color: var(--news-muted);
	font-size: var(--type-small);
}

/* ── 9. Menus & navigation ── */
.site-header.site-header--magazine .primary-menu a {
	font-weight: 600;
	border-radius: var(--ui-radius-sm);
}

.site-header.site-header--magazine .primary-menu .current-menu-item > a,
.site-header.site-header--magazine .primary-menu .current_page_item > a {
	background: rgba(0, 0, 0, 0.12);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.lachtv-breadcrumb {
	padding: 8px 14px;
	font-size: var(--type-small);
	background: var(--news-surface);
	border: var(--ui-border);
	border-radius: var(--ui-radius-sm);
}

.lachtv-breadcrumb a {
	color: var(--news-text);
	font-weight: 500;
	transition: color var(--ui-transition);
}

.lachtv-breadcrumb a:hover {
	color: var(--news-gold);
}

/* ── 10. Tableaux (contenu article) ── */
.entry-content table,
.page-content table {
	width: 100%;
	border-collapse: collapse;
	border-radius: var(--ui-radius-sm);
	overflow: hidden;
	font-size: var(--type-small);
}

.entry-content th,
.page-content th {
	padding: 10px 12px;
	font-weight: 700;
	text-align: start;
	background: var(--news-charcoal);
	color: #fff;
}

.entry-content td,
.page-content td {
	padding: 9px 12px;
	border-bottom: 1px solid var(--news-border-subtle);
}

.entry-content tr:nth-child(even) td,
.page-content tr:nth-child(even) td {
	background: var(--news-border-subtle);
}

/* ── 11. Espacements compacts ── */
.site-main.front-page {
	gap: var(--ui-gap-section) !important;
	padding-block: clamp(10px, 1.8vw, 18px) clamp(16px, 2.5vw, 28px) !important;
}

.front-page .home-premium-body,
.front-page .home-mosaic-body,
.front-page .home-national-grid,
.front-page .home-video-body--strip,
.front-page .home-sports-body,
.front-page .most-viewed-body,
.front-page .home-category-section__body,
.front-page .home-see-also-body,
.front-page .home-tri-columns-inner {
	padding: var(--ltv-body-pad, clamp(10px, 1.4vw, 14px)) !important;
}

.front-page .home-national-grid,
.front-page .home-video-grid--strip,
.front-page .home-see-also-posts--six,
.front-page .home-category-section__grid,
.front-page .home-tri-columns-grid,
.front-page .home-mosaic-grid,
.front-page .home-hero-zone .home-hero-zone-grid {
	gap: var(--ui-gap-card) !important;
}

.front-page .home-premium-header,
.front-page .home-mosaic-accent-header,
.front-page .home-sports-header,
.front-page .most-viewed-header,
.front-page .home-video-header,
.front-page .section-header {
	padding: 10px 14px !important;
	min-height: 44px;
}

/* ── 12. Images & thumbnails ── */
.post-card-thumb,
.front-page .home-cat-featured-thumb,
.front-page .home-mosaic-tile-link,
.front-page .home-national-thumb,
.front-page .home-video-card-thumb,
.front-page .home-tri-featured-thumb,
.front-page .home-tri-list-thumb,
.front-page .home-see-also-card-thumb,
.front-page .home-highlight-thumb,
.archive-featured-thumb,
.archive-card--mosaic .archive-card-thumb,
.related-post__thumb,
.single-post .entry-thumbnail {
	border-radius: var(--news-radius-img);
	overflow: hidden;
}

/* ── 13. Footer premium ── */
.site-footer.site-footer--harmonized {
	margin-top: clamp(16px, 2.5vw, 28px);
	border-top: var(--ui-border);
	box-shadow: 0 -2px 16px rgba(15, 23, 42, 0.04);
}

.site-footer.site-footer--harmonized .footer-accent {
	height: 3px;
	background: linear-gradient(
		90deg,
		var(--news-gold) 0%,
		var(--news-red) 50%,
		var(--news-gold) 100%
	);
}

.site-footer.site-footer--harmonized .footer-social .social-icons a {
	border-radius: 50%;
	transition:
		transform var(--ui-transition),
		box-shadow var(--ui-transition);
}

@media (hover: hover) {
	.site-footer.site-footer--harmonized .footer-social .social-icons a:hover {
		transform: translateY(-2px);
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
	}
}

/* ── 14. Header premium ── */
.site-header.site-header--magazine {
	box-shadow: 0 1px 0 rgba(15, 23, 42, 0.05), 0 4px 20px rgba(15, 23, 42, 0.06);
}

.site-header.site-header--magazine .header-icon-btn,
.site-header.site-header--magazine .menu-toggle {
	border-radius: var(--ui-radius-sm);
	transition:
		background var(--ui-transition),
		transform var(--ui-transition);
}

.site-header.site-header--magazine .breaking-label {
	font-weight: 800;
	letter-spacing: 0.03em;
}

/* ── 15. Article single ── */
.single-post {
	padding: clamp(16px, 2.5vw, 24px) !important;
}

.single-post .entry-share {
	padding: 10px 12px;
	border-radius: var(--ui-radius-sm);
	background: var(--news-border-subtle);
	border: var(--ui-border-subtle);
}

.single-post .entry-content blockquote {
	border-inline-start: 4px solid var(--news-gold);
	background: var(--news-gold-soft);
	border-radius: 0 var(--ui-radius-sm) var(--ui-radius-sm) 0;
	padding: 12px 16px;
}

/* ── 16. Archive 3lachtv ── */
body.archive-lachtv .archive-lachtv-header {
	border-bottom-width: 3px;
	border-bottom-color: var(--news-gold);
}

.archive-card--mosaic {
	border: none;
	box-shadow: var(--news-shadow);
}

.archive-card--mosaic:hover {
	box-shadow: var(--news-shadow-hover);
}

/* ── 17. Dark mode ── */
body.dark-mode .post-card,
body.dark-mode .archive-featured,
body.dark-mode .related-post,
body.dark-mode .front-page .home-premium-block,
body.dark-mode .single-post,
body.dark-mode .page-content,
body.dark-mode .archive-card--mosaic {
	background: var(--news-surface);
	border-color: var(--news-border);
}

body.dark-mode input,
body.dark-mode textarea,
body.dark-mode select,
body.dark-mode .header-search__field {
	background: rgba(255, 255, 255, 0.04);
	border-color: var(--news-border);
	color: var(--news-text);
}

body.dark-mode .lachtv-breadcrumb {
	background: var(--news-surface);
	border-color: var(--news-border);
}

body.dark-mode .notification-popup-inner {
	background: var(--news-surface);
	border-color: var(--news-border);
}

/* ── 18. Mobile premium ── */
@media (max-width: 768px) {
	:root {
		--ui-gap-section: 14px;
		--ui-gap-card: 8px;
		--ltv-container-pad: max(12px, env(safe-area-inset-left, 0px));
	}

	html, body {
		overflow-x: clip;
	}

	.site-main.front-page {
		gap: 14px !important;
		padding-block: 8px 18px !important;
	}

	.btn-primary,
	.home-premium-more-btn,
	.home-sports-more-btn,
	.archive-read-more,
	.site-footer.site-footer--harmonized .footer-newsletter-btn {
		min-height: 44px;
		padding: 10px 16px;
	}

	.header-search__field,
	input[type="search"] {
		font-size: 16px;
		min-height: 44px;
	}

	.site-header.site-header--magazine .header-icon-btn,
	.site-header.site-header--magazine .menu-toggle {
		width: 44px;
		height: 44px;
		min-width: 44px;
		min-height: 44px;
	}

	.front-page .home-premium-header,
	.front-page .home-mosaic-accent-header,
	.front-page .home-sports-header,
	.front-page .most-viewed-header {
		padding: 10px 12px !important;
		min-height: 44px;
	}

	.single-post {
		padding: 14px !important;
		border-radius: var(--ui-radius-sm) !important;
	}

	.post-card,
	.front-page .home-premium-block,
	.front-page .home-mosaic-block,
	.front-page .most-viewed-section {
		border-radius: var(--ui-radius-sm) !important;
	}

	@media (hover: none) {
		.post-card:hover,
		.archive-featured:hover,
		.related-post:hover,
		.front-page .home-cat-featured:hover,
		.front-page .home-mosaic-tile:hover,
		.archive-card--mosaic:hover {
			transform: none;
			box-shadow: var(--news-shadow-xs);
		}
	}
}

@media (max-width: 480px) {
	:root {
		--ui-gap-section: 12px;
		--ltv-container-pad: max(10px, env(safe-area-inset-left, 0px));
	}

	.site-main.front-page {
		gap: 12px !important;
	}
}

/* ── 19. Accessibilité & performance ── */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}

	.post-card:hover,
	.archive-featured:hover,
	.related-post:hover,
	.front-page .home-cat-featured:hover,
	.btn-primary:hover,
	.home-premium-more-btn:hover {
		transform: none !important;
	}
}