﻿/**
 * Premium Magazine Layer v3.60
 * CSS-only visual upgrade — structure HTML inchangée.
 */

/* ═══════════════════════════════════════════
   1. Canvas & rythme global
   ═══════════════════════════════════════════ */
body {
	background-color: var(--news-canvas);
	background-image: var(--mag-gradient-hero);
	background-attachment: fixed;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body.home .site-content {
	background: transparent;
}

.site-main.front-page {
	gap: clamp(20px, 3vw, 32px) !important;
	padding-block: clamp(14px, 2.2vw, 22px) clamp(24px, 3.5vw, 40px) !important;
}

body:not(.home) .site-content {
	background:
		var(--mag-gradient-hero),
		var(--news-canvas);
}

/* ═══════════════════════════════════════════
   2. Scroll storytelling — reveal premium
   ═══════════════════════════════════════════ */
.site-main.front-page > .home-reveal,
.site-main.front-page .home-category-sections > .home-reveal,
.home-youtube-banner.home-reveal-banner {
	opacity: 0;
	transform: translateY(var(--mag-reveal-distance, 22px)) scale(0.985);
	filter: blur(4px);
	transition:
		opacity var(--mag-reveal-duration, 0.65s) var(--mag-reveal-ease),
		transform var(--mag-reveal-duration, 0.65s) var(--mag-reveal-ease),
		filter var(--mag-reveal-duration, 0.65s) var(--mag-reveal-ease);
	transition-delay: var(--reveal-delay, 0ms);
	will-change: opacity, transform, filter;
}

.site-main.front-page > .home-reveal.is-visible,
.site-main.front-page .home-category-sections > .home-reveal.is-visible,
.home-youtube-banner.home-reveal-banner.is-visible {
	opacity: 1;
	transform: translateY(0) scale(1);
	filter: blur(0);
}

.home-youtube-banner.home-reveal-banner {
	animation: magBannerIn 0.8s var(--mag-reveal-ease) both;
}

@keyframes magBannerIn {
	from {
		opacity: 0;
		transform: translateY(16px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* ═══════════════════════════════════════════
   3. Coques de section — profondeur 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-hero-zone,
.single-post,
.page-content,
.archive-lachtv {
	border: 1px solid color-mix(in srgb, var(--news-border) 88%, transparent) !important;
	border-radius: var(--news-radius-lg, 16px) !important;
	box-shadow: var(--mag-shadow-section) !important;
	background: var(--mag-gradient-section) !important;
	overflow: hidden;
	transition:
		box-shadow 0.45s var(--mag-reveal-ease),
		transform 0.45s var(--mag-reveal-ease),
		border-color 0.35s ease;
}

@media (hover: hover) and (pointer: fine) {
	.front-page .home-premium-block:hover,
	.front-page .home-mosaic-block:hover,
	.front-page .home-national-block:hover,
	.front-page .home-video-block:hover,
	.front-page .home-sports-block:hover,
	.front-page .home-tri-columns:hover,
	.front-page .home-category-sections .home-category-section:hover,
	.front-page .most-viewed-section:hover,
	.front-page .programs-video-section:hover,
	.front-page .believe-section:hover,
	.front-page .home-see-also-zone:hover {
		box-shadow: var(--mag-shadow-card-hover) !important;
		border-color: color-mix(in srgb, var(--news-gold) 28%, var(--news-border)) !important;
	}
}

/* ═══════════════════════════════════════════
   4. En-têtes — magazine digital
   ═══════════════════════════════════════════ */
.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 {
	position: relative;
	background:
		var(--mag-header-shine),
		linear-gradient(118deg, #050505 0%, var(--news-charcoal) 38%, #141414 72%, #0a0a0a 100%) !important;
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	padding: clamp(12px, 1.6vw, 16px) clamp(14px, 2vw, 20px) !important;
	min-height: 56px;
}

.front-page .home-premium-header::before,
.front-page .home-mosaic-accent-header::before,
.front-page .home-sports-header::before,
.front-page .most-viewed-header::before,
.front-page .home-video-header::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	top: 0;
	bottom: 0;
	width: 3px;
	background: linear-gradient(180deg, var(--news-gold) 0%, var(--news-red) 100%);
	border-radius: 0 2px 2px 0;
	opacity: 0.95;
}

.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 {
	height: 2px !important;
	background: linear-gradient(
		90deg,
		transparent 0%,
		var(--news-gold) 15%,
		var(--news-red) 50%,
		var(--news-gold) 85%,
		transparent 100%
	) !important;
	opacity: 1 !important;
	animation: magHeaderLine 4s ease-in-out infinite;
	background-size: 200% 100% !important;
}

@keyframes magHeaderLine {
	0%, 100% { background-position: 0% 50%; }
	50% { background-position: 100% 50%; }
}

.front-page .home-premium-title,
.front-page .home-premium-title a,
.front-page .most-viewed-heading,
.front-page .home-video-title,
.front-page .home-sports-title,
.front-page .section-header .section-title {
	position: relative;
	font-weight: 800 !important;
	letter-spacing: -0.01em;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
	transition: color 0.3s ease, letter-spacing 0.3s ease;
}

@media (hover: hover) {
	.front-page .home-premium-title a:hover,
	.front-page .most-viewed-heading:hover {
		color: var(--news-gold-bright) !important;
		letter-spacing: 0;
	}
}

.front-page .home-premium-icon,
.front-page .home-video-icon,
.front-page .home-sports-icon,
.front-page .most-viewed-trend-icon {
	box-shadow: 0 0 0 1px rgba(var(--news-gold-rgb), 0.35), var(--mag-glow-gold);
	transition:
		transform 0.35s var(--news-ease-spring),
		box-shadow 0.35s ease;
}

@media (hover: hover) {
	.front-page .home-premium-header:hover .home-premium-icon,
	.front-page .most-viewed-header:hover .most-viewed-trend-icon {
		transform: scale(1.08) rotate(-3deg);
		box-shadow: 0 0 0 1px rgba(var(--news-gold-rgb), 0.55), 0 0 28px rgba(var(--news-gold-rgb), 0.35);
	}
}

.front-page .most-viewed-subtitle {
	opacity: 0.82;
	font-weight: 500;
	letter-spacing: 0.01em;
}

/* Boutons « المزيد » — CTA premium */
.home-premium-more-btn,
.home-sports-more-btn,
.home-video-more-btn,
.home-mosaic-accent-more,
.section-more {
	position: relative;
	overflow: hidden;
	font-weight: 800 !important;
	letter-spacing: 0.03em;
	box-shadow:
		0 2px 8px rgba(var(--news-gold-rgb), 0.32),
		inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
}

.home-premium-more-btn::after,
.home-sports-more-btn::after,
.home-video-more-btn::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.35) 50%, transparent 65%);
	transform: translateX(-120%);
	transition: transform 0.55s ease;
}

@media (hover: hover) {
	.home-premium-more-btn:hover::after,
	.home-sports-more-btn:hover::after,
	.home-video-more-btn:hover::after {
		transform: translateX(120%);
	}
}

/* ═══════════════════════════════════════════
   5. Cartes & vignettes — hover vivant
   ═══════════════════════════════════════════ */
.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-video-ratio,
.front-page .home-tri-featured-thumb,
.front-page .home-tri-list-thumb,
.front-page .home-see-also-card-thumb,
.front-page .home-highlight-thumb,
.front-page .most-viewed-card-link,
.front-page .home-sports-featured-thumb,
.front-page .home-sports-list-thumb,
.archive-card--mosaic .archive-card-thumb,
.related-post__thumb,
.post-card-thumb,
.hero-slide-media {
	position: relative;
	overflow: hidden;
	border-radius: var(--news-radius-img, 10px);
}

.front-page .home-cat-featured-img,
.front-page .home-mosaic-tile-img,
.front-page .home-national-img,
.front-page .home-video-img,
.front-page .home-tri-featured-img,
.front-page .home-tri-list-img,
.front-page .home-see-also-card-img,
.front-page .home-highlight-img,
.front-page .most-viewed-card-img,
.front-page .home-sports-featured-img,
.front-page .home-sports-list-img,
.archive-card--mosaic .archive-card-img,
.related-post__thumb img,
.post-card-thumb img,
.hero-slide-img {
	transition: transform 0.55s var(--mag-reveal-ease), filter 0.4s ease !important;
}

@media (hover: hover) and (pointer: fine) {
	.front-page a:hover .home-cat-featured-img,
	.front-page a:hover .home-mosaic-tile-img,
	.front-page a:hover .home-national-img,
	.front-page a:hover .home-video-img,
	.front-page a:hover .home-tri-featured-img,
	.front-page a:hover .home-tri-list-img,
	.front-page a:hover .home-see-also-card-img,
	.front-page a:hover .most-viewed-card-img,
	.front-page a:hover .home-sports-featured-img,
	.archive-card--mosaic a:hover .archive-card-img,
	.related-post a:hover img,
	.post-card a:hover img,
	.hero-slider a:hover .hero-slide-img {
		transform: scale(1.06) !important;
		filter: brightness(1.04) saturate(1.05);
	}
}

/* Titres cartes — underline animé */
.front-page .home-cat-featured-title a,
.front-page .home-mosaic-tile-title a,
.front-page .home-national-title,
.front-page .home-video-card-title,
.front-page .home-tri-featured-title a,
.front-page .home-tri-list-title a,
.front-page .home-see-also-card-title a,
.archive-card--mosaic .archive-card-title a,
.related-post__title a {
	background-image: linear-gradient(currentColor, currentColor);
	background-size: 0 1px;
	background-repeat: no-repeat;
	background-position: 100% 100%;
	transition:
		color 0.3s ease,
		background-size 0.35s var(--mag-reveal-ease);
}

@media (hover: hover) {
	.front-page .home-cat-featured-title a:hover,
	.front-page .home-mosaic-tile-title a:hover,
	.front-page .home-national-card-link:hover .home-national-title,
	.front-page .home-video-card-link:hover .home-video-card-title,
	.front-page .home-tri-featured-title a:hover,
	.front-page .home-tri-list-title a:hover,
	.archive-card--mosaic .archive-card-title a:hover,
	.related-post__title a:hover {
		color: var(--news-red) !important;
		background-size: 100% 1px;
		background-position: 0 100%;
	}
}

.category-badge,
.front-page .home-cat-featured-thumb .category-badge {
	box-shadow: 0 2px 8px rgba(var(--news-red-rgb), 0.35);
	transition: transform 0.25s var(--news-ease-spring), box-shadow 0.25s ease;
}

@media (hover: hover) {
	a:hover .category-badge {
		transform: translateY(-1px) scale(1.03);
		box-shadow: 0 4px 12px rgba(var(--news-red-rgb), 0.45);
	}
}

/* Listes compactes — hover row */
.front-page .home-cat-list-link,
.front-page .home-tri-list-link,
.front-page .home-feed-link,
.front-page .home-highlight-link {
	border-radius: var(--news-radius-sm);
	transition:
		background 0.25s ease,
		padding-inline-start 0.25s var(--mag-reveal-ease),
		box-shadow 0.25s ease;
}

@media (hover: hover) {
	.front-page .home-cat-list-link:hover,
	.front-page .home-tri-list-link:hover,
	.front-page .home-feed-link:hover {
		background: color-mix(in srgb, var(--news-gold) 6%, transparent);
		padding-inline-start: 4px;
	}
}

/* ═══════════════════════════════════════════
   6. Hero & breaking — impact éditorial
   ═══════════════════════════════════════════ */
.front-page .hero-slider--premium {
	box-shadow: var(--mag-shadow-section) !important;
	border-radius: var(--news-radius-lg) !important;
}

.front-page .hero-slide-title {
	text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
}

.site-header.site-header--magazine .breaking-ticker {
	background: linear-gradient(90deg, #0a0a0a 0%, #141414 50%, #0a0a0a 100%) !important;
	border-top: 1px solid rgba(var(--news-gold-rgb), 0.15);
}

.site-header.site-header--magazine .breaking-label {
	box-shadow: 0 0 16px rgba(var(--news-red-rgb), 0.45);
	animation: magPulse 2.5s ease-in-out infinite;
}

@keyframes magPulse {
	0%, 100% { box-shadow: 0 0 12px rgba(var(--news-red-rgb), 0.35); }
	50% { box-shadow: 0 0 22px rgba(var(--news-red-rgb), 0.55); }
}

.site-header.site-header--magazine {
	box-shadow:
		0 1px 0 rgba(0, 0, 0, 0.06),
		0 8px 32px rgba(15, 23, 42, 0.08) !important;
}

.site-header.site-header--magazine.is-compact {
	box-shadow:
		0 1px 0 rgba(0, 0, 0, 0.08),
		0 12px 40px rgba(15, 23, 42, 0.12) !important;
}

/* ═══════════════════════════════════════════
   7. Article single — lecture premium
   ═══════════════════════════════════════════ */
.single-post .entry-title {
	font-size: var(--type-title);
	line-height: var(--leading-tight);
	letter-spacing: -0.02em;
}

.single-post .entry-content {
	font-size: var(--type-lead);
	line-height: var(--leading-prose);
	color: var(--news-text);
}

.single-post .entry-content p {
	margin-block: 0 1.15em;
}

.single-post .entry-content h2,
.single-post .entry-content h3,
.single-post .entry-content h4 {
	margin-block: 1.6em 0.65em;
	color: var(--news-ink);
	font-weight: 800;
	letter-spacing: -0.015em;
	position: relative;
	padding-inline-start: 12px;
}

.single-post .entry-content h2::before,
.single-post .entry-content h3::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	top: 0.15em;
	bottom: 0.15em;
	width: 3px;
	border-radius: 2px;
	background: linear-gradient(180deg, var(--news-gold), var(--news-red));
}

.single-post .entry-content a {
	color: var(--news-blue, #1a5f9e);
	text-decoration: underline;
	text-decoration-color: color-mix(in srgb, var(--news-blue) 35%, transparent);
	text-underline-offset: 3px;
	transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

.single-post .entry-content a:hover {
	color: var(--news-red);
	text-decoration-color: var(--news-red);
}

.single-post .entry-content blockquote {
	border-inline-start: 4px solid var(--news-gold) !important;
	background: linear-gradient(90deg, var(--news-gold-soft), transparent) !important;
	border-radius: 0 var(--news-radius-md) var(--news-radius-md) 0 !important;
	padding: 16px 20px !important;
	font-style: normal;
	font-weight: 600;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.single-post .entry-thumbnail {
	border-radius: var(--news-radius-lg) !important;
	box-shadow: var(--mag-shadow-section);
	overflow: hidden;
}

.single-post .entry-meta {
	padding: 10px 14px;
	border-radius: var(--news-radius-sm);
	background: var(--news-border-subtle);
	border: 1px solid var(--news-border);
}

/* ═══════════════════════════════════════════
   8. Archives & widgets
   ═══════════════════════════════════════════ */
.archive-lachtv-header {
	border-bottom: 3px solid transparent !important;
	border-image: linear-gradient(90deg, var(--news-gold), var(--news-red), var(--news-gold)) 1 !important;
}

.archive-lachtv-title {
	font-weight: 900 !important;
	letter-spacing: -0.02em;
}

.archive-card--mosaic {
	border-radius: var(--news-radius-md) !important;
	box-shadow: var(--mag-shadow-card) !important;
	transition:
		box-shadow 0.4s var(--mag-reveal-ease),
		transform 0.4s var(--mag-reveal-ease) !important;
}

@media (hover: hover) {
	.archive-card--mosaic:hover {
		transform: translateY(-3px) !important;
		box-shadow: var(--mag-shadow-card-hover) !important;
	}
}

.lachtv-breadcrumb {
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	box-shadow: var(--news-shadow-xs) !important;
}

/* ═══════════════════════════════════════════
   9. Footer — finition média
   ═══════════════════════════════════════════ */
.site-footer.site-footer--harmonized {
	border-top: none !important;
	box-shadow: 0 -8px 40px rgba(15, 23, 42, 0.06) !important;
}

.site-footer.site-footer--harmonized .footer-accent {
	height: 4px;
	background: linear-gradient(
		90deg,
		var(--news-gold) 0%,
		var(--news-red) 35%,
		var(--news-gold) 70%,
		var(--news-red) 100%
	) !important;
	background-size: 200% 100%;
	animation: magHeaderLine 6s ease-in-out infinite;
}

.site-footer.site-footer--harmonized .footer-back-top {
	transition:
		transform 0.35s var(--news-ease-spring),
		box-shadow 0.35s ease !important;
}

@media (hover: hover) {
	.site-footer.site-footer--harmonized .footer-back-top:hover {
		transform: translateX(-50%) translateY(-4px) scale(1.05) !important;
		box-shadow: var(--mag-glow-gold) !important;
	}
}

/* ═══════════════════════════════════════════
   10. Dark mode — magazine nocturne
   ═══════════════════════════════════════════ */
body.dark-mode {
	background-image:
		radial-gradient(ellipse 100% 60% at 50% -10%, rgba(var(--news-gold-rgb), 0.04) 0%, transparent 50%),
		linear-gradient(180deg, #0a0a0a 0%, var(--news-canvas) 100%);
}

body.dark-mode .front-page .home-premium-block,
body.dark-mode .front-page .most-viewed-section,
body.dark-mode .front-page .home-national-block,
body.dark-mode .single-post {
	background: linear-gradient(180deg, #1e1e1e 0%, #161616 100%) !important;
	border-color: rgba(255, 255, 255, 0.08) !important;
}

body.dark-mode .front-page .home-premium-header,
body.dark-mode .front-page .most-viewed-header {
	background:
		linear-gradient(118deg, #000 0%, #111 45%, #0d0d0d 100%) !important;
}

body.dark-mode .single-post .entry-content blockquote {
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

body.dark-mode .site-header.site-header--magazine .breaking-ticker {
	background: linear-gradient(90deg, #000 0%, #111 50%, #000 100%) !important;
}

/* ═══════════════════════════════════════════
   11. Accessibilité & mobile
   ═══════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
	.site-main.front-page > .home-reveal,
	.site-main.front-page .home-category-sections > .home-reveal,
	.home-youtube-banner.home-reveal-banner,
	.front-page .home-premium-header::after,
	.site-footer.site-footer--harmonized .footer-accent,
	.site-header.site-header--magazine .breaking-label {
		animation: none !important;
		transition: opacity 0.2s ease !important;
		transform: none !important;
		filter: none !important;
	}

	.front-page a:hover img,
	.front-page a:hover .home-mosaic-tile-img {
		transform: none !important;
	}
}

@media (max-width: 768px) {
	.site-main.front-page > .home-reveal,
	.site-main.front-page .home-category-sections > .home-reveal {
		--mag-reveal-distance: 14px;
		filter: none;
	}

	.home-youtube-banner.home-reveal-banner,
	.home-youtube-banner.home-reveal-banner.is-visible {
		opacity: 1 !important;
		transform: none !important;
		filter: none !important;
	}

	.front-page .home-premium-header::after {
		animation: none;
	}
}
