/* ===== HEADER PREMIUM ÉLÉGANT — Design harmonieux et smart ===== */

/* ── 1. SUPPRIMER LES LIENS SECONDAIRES (من نحن, للإشهار, etc.) ── */
.site-header.site-header--magazine .top-links-pill {
	display: none !important;
}

/* ── 2. AUGMENTER LA HAUTEUR DU HEADER POUR UN DESIGN PREMIUM ── */
.site-header.site-header--magazine .header-top-inner {
	min-height: 100px !important;
	padding-block: 16px !important;
}

/* ── 3. AGRANDIR L'ESPACE POUR LA PUBLICITÉ ── */
.site-header.site-header--magazine .header-top-ad-leaderboard {
	flex: 1 1 auto;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 12px 20px !important;
	max-width: 780px;
}

.site-header.site-header--magazine .header-leaderboard-img {
	max-width: 100%;
	height: auto;
	border-radius: 6px;
	box-shadow: 0 2px 12px rgba(0,0,0,0.15);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.site-header.site-header--magazine .header-top-ad-leaderboard:hover .header-leaderboard-img {
	transform: translateY(-2px);
	box-shadow: 0 4px 20px rgba(0,0,0,0.25);
}

/* ── 4. RÉORGANISER LA DISPOSITION (LOGO | PUB | BOUTONS) ── */
.site-header.site-header--magazine .header-top-inner {
	display: grid;
	grid-template-columns: auto 1fr auto;
	grid-template-areas: "logo ad tools";
	gap: 24px;
	align-items: center;
}

.site-header.site-header--magazine .site-branding {
	grid-area: logo;
	justify-self: start;
}

.site-header.site-header--magazine .header-top-ad-leaderboard {
	grid-area: ad;
	justify-self: center;
}

.site-header.site-header--magazine .header-top-tools {
	grid-area: tools;
	justify-self: end;
}

/* ── 5. ESPACER LES BOUTONS DARK MODE ET MENU ── */
.site-header.site-header--magazine .header-top-tools {
	display: flex;
	align-items: center;
	gap: 12px;
}

/* ── 6. AMÉLIORER LES BOUTONS (DESIGN PREMIUM) ── */
.site-header.site-header--magazine .header-icon-btn,
.site-header.site-header--magazine .menu-toggle {
	width: 42px !important;
	height: 42px !important;
	background: rgba(255,255,255,0.15) !important;
	border: 1px solid rgba(255,255,255,0.25) !important;
	border-radius: 8px !important;
	transition: all 0.3s ease !important;
}

.site-header.site-header--magazine .header-icon-btn:hover,
.site-header.site-header--magazine .menu-toggle:hover {
	background: rgba(255,255,255,0.25) !important;
	border-color: rgba(255,255,255,0.4) !important;
	transform: translateY(-2px);
}

/* ── 7. AUGMENTER LA HAUTEUR DE LA BARRE DE NAVIGATION ── */
.site-header.site-header--magazine .header-nav-bar {
	background: rgba(0,0,0,0.18);
	border-bottom: 1px solid rgba(255,255,255,0.08);
	backdrop-filter: blur(8px);
}

.site-header.site-header--magazine .header-nav-inner {
	padding-block: 0;
	min-height: 52px;
}

.site-header.site-header--magazine .primary-menu a {
	height: 48px !important;
	padding: 0 18px !important;
	font-size: 0.9375rem !important;
}

/* ── 8. EFFET GRADIENT PREMIUM SUR LE HEADER ── */
.site-header.site-header--magazine .header-top-bar {
	background: linear-gradient(180deg, #0026A8 0%, #001D83 50%, #001570 100%);
	border-bottom: 2px solid rgba(250,163,27,0.3);
}

/* ── 9. AMÉLIORER L'ACCENT LINE (LIGNE DORÉE) ── */
.site-header.site-header--magazine .header-accent {
	height: 3px !important;
	background: linear-gradient(90deg, 
		transparent 0%, 
		#FAA31B 20%, 
		#ff9800 50%, 
		#FAA31B 80%, 
		transparent 100%
	);
	box-shadow: 0 2px 8px rgba(250,163,27,0.4);
}

/* ── 10. HARMONISER LES ESPACEMENTS ── */
.site-header.site-header--magazine {
	box-shadow: 0 4px 24px rgba(0,0,0,0.3);
}

/* ── 11. AMÉLIORER LA BARRE DE RECHERCHE ── */
.site-header.site-header--magazine .header-search {
	width: 220px !important;
}

.site-header.site-header--magazine .header-search__field {
	height: 40px !important;
	border-radius: 8px !important;
	background: rgba(255,255,255,0.12) !important;
	border: 1px solid rgba(255,255,255,0.2) !important;
	transition: all 0.3s ease;
}

.site-header.site-header--magazine .header-search__field:focus {
	background: rgba(255,255,255,0.18) !important;
	border-color: rgba(255,255,255,0.35) !important;
	box-shadow: 0 0 0 3px rgba(250,163,27,0.15);
}

/* ── 12. ICÔNES SOCIAL MEDIA PLUS GRANDES ── */
.site-header.site-header--magazine .header-social .social-icons a {
	width: 38px !important;
	height: 38px !important;
	border-radius: 8px !important;
}

/* ── RESPONSIVE — TABLET (≤ 1024px) ── */
@media (max-width: 1024px) {
	.site-header.site-header--magazine .header-top-inner {
		min-height: 90px !important;
		padding-block: 14px !important;
		gap: 16px;
	}
	
	.site-header.site-header--magazine .header-top-ad-leaderboard {
		padding: 10px 16px !important;
		max-width: 680px;
	}
	
	.site-header.site-header--magazine .header-search {
		width: 180px !important;
	}
}

/* ── RESPONSIVE — TABLET (≤ 900px) ── */
@media (max-width: 900px) {
	/* Cacher la pub sur tablette pour garder un header propre */
	.site-header.site-header--magazine .header-top-ad-leaderboard {
		display: none !important;
	}
	
	/* Layout simplifié : LOGO | BOUTONS */
	.site-header.site-header--magazine .header-top-inner {
		grid-template-columns: 1fr auto;
		grid-template-areas: "logo tools";
		min-height: 72px !important;
		gap: 12px;
	}
}

/* ── RESPONSIVE — MOBILE (≤ 768px) ── */
@media (max-width: 768px) {
	.site-header.site-header--magazine .header-top-inner {
		min-height: 64px !important;
		padding-block: 10px !important;
	}
	
	.site-header.site-header--magazine .header-icon-btn,
	.site-header.site-header--magazine .menu-toggle {
		width: 40px !important;
		height: 40px !important;
	}
	
	.site-header.site-header--magazine .header-nav-inner {
		min-height: 48px;
	}
	
	.site-header.site-header--magazine .primary-menu a {
		height: 44px !important;
		font-size: 0.875rem !important;
	}
}

/* ── RESPONSIVE — PETIT MOBILE (≤ 480px) ── */
@media (max-width: 480px) {
	.site-header.site-header--magazine .header-top-inner {
		min-height: 58px !important;
		padding-block: 8px !important;
		gap: 8px;
	}
	
	.site-header.site-header--magazine .header-icon-btn,
	.site-header.site-header--magazine .menu-toggle {
		width: 38px !important;
		height: 38px !important;
	}
}

/* ── DARK MODE AMÉLIORÉ ── */
body.dark-mode .site-header.site-header--magazine .header-top-bar {
	background: linear-gradient(180deg, #1a1a1a 0%, #0a0a0a 50%, #000000 100%);
	border-bottom-color: rgba(250,163,27,0.4);
}

body.dark-mode .site-header.site-header--magazine .header-nav-bar {
	background: rgba(255,255,255,0.03);
	border-bottom-color: rgba(255,255,255,0.1);
}

body.dark-mode .site-header.site-header--magazine .header-leaderboard-img {
	box-shadow: 0 2px 12px rgba(250,163,27,0.2);
}

/* ── ANIMATION SMOOTH POUR LE HEADER COMPACT (SCROLL) ── */
.site-header.site-header--magazine.is-compact .header-top-inner {
	min-height: 68px !important;
	padding-block: 8px !important;
	transition: all 0.3s ease;
}

.site-header.site-header--magazine.is-compact .header-top-ad-leaderboard {
	display: none !important;
}

.site-header.site-header--magazine.is-compact .header-top-inner {
	grid-template-columns: auto auto;
	grid-template-areas: "logo tools";
}

/* ── EFFET HOVER SUR LA PUBLICITÉ ── */
.site-header.site-header--magazine .header-top-ad-leaderboard a {
	display: block;
	position: relative;
	overflow: hidden;
	border-radius: 6px;
}

.site-header.site-header--magazine .header-top-ad-leaderboard a::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(45deg, transparent, rgba(255,255,255,0.1), transparent);
	transform: translateX(-100%);
	transition: transform 0.6s ease;
}

.site-header.site-header--magazine .header-top-ad-leaderboard a:hover::before {
	transform: translateX(100%);
}

/* ── OPTIMISATION ACCESSIBILITÉ ── */
@media (prefers-reduced-motion: reduce) {
	.site-header.site-header--magazine .header-top-inner,
	.site-header.site-header--magazine .header-icon-btn,
	.site-header.site-header--magazine .menu-toggle,
	.site-header.site-header--magazine .header-leaderboard-img,
	.site-header.site-header--magazine .header-search__field {
		transition: none !important;
	}
	
	.site-header.site-header--magazine .header-icon-btn:hover,
	.site-header.site-header--magazine .menu-toggle:hover,
	.site-header.site-header--magazine .header-top-ad-leaderboard:hover .header-leaderboard-img {
		transform: none !important;
	}
}

/* ── FOCUS VISIBLE POUR ACCESSIBILITÉ ── */
.site-header.site-header--magazine .header-icon-btn:focus-visible,
.site-header.site-header--magazine .menu-toggle:focus-visible,
.site-header.site-header--magazine .header-search__submit:focus-visible {
	outline: 3px solid #FAA31B;
	outline-offset: 2px;
}