/*
Theme Name:   SuperMagPro Child – Ux-Tech
Template:     supermagpro
Description:  Thème enfant de SuperMagPro pour ux-tech.fr : traduction française, dates propres, alt d'images automatiques, footer corrigé, header mobile.
Version:      1.3.0
Text Domain:  supermag
*/

/* ---------- Méta d'article : publication + mise à jour ---------- */
.entry-meta .posted-on,
.entry-meta .byline { margin-right: 12px; }
.entry-meta .updated-on {
	display: inline-block;
	margin-right: 12px;
	font-style: italic;
	opacity: .85;
}
.entry-meta .updated-on time { display: inline; }

/* ---------- Images : jamais plus larges que leur conteneur ---------- */
.entry-content img,
.single-thumb img,
.header-ainfo img {
	max-width: 100%;
	height: auto;
}

/* ---------- Header : desktop (logo à gauche, pub à droite) ---------- */
.header-wrapper .uxtech-branding {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
}
.header-wrapper .uxtech-branding > .clearfix { display: none; }
.header-wrapper .uxtech-branding > *:not(.site-logo):not(.uxtech-header-ad) { flex: 0 0 100%; }
.header-wrapper .uxtech-branding .site-logo.float-left {
	float: none;
	width: auto;
	flex: 0 0 auto;
	display: flex;
	align-items: center;
}
.header-wrapper .uxtech-branding .uxtech-site-title {
	margin: 0;
	padding: 0;
	line-height: 0;
	font-size: inherit;
}
.header-wrapper .uxtech-branding .site-logo.float-left > .uxtech-site-title > a,
.header-wrapper .uxtech-branding .custom-logo-link {
	display: inline-block;
	padding: 0;
	line-height: 0;
}
.header-wrapper .uxtech-branding .uxtech-logo-desktop {
	max-height: 90px;
	width: auto;
	height: auto;
}
.header-wrapper .uxtech-branding .header-ainfo.float-right {
	float: none;
	width: auto;
	flex: 1 1 0;
	min-width: 0;
	padding-top: 0;
	text-align: right;
	line-height: 0;
}
.header-wrapper .uxtech-header-ad img {
	max-width: 100%;
	height: auto;
}

/* Logo de la barre : caché sur desktop (sélecteur renforcé contre « .main-navigation a { display:block } ») */
.header-wrapper .main-navigation a.uxtech-bar-logo { display: none; }

/* ---------- Header : mobile et tablette (menu burger, ≤ 992 px) ---------- */
@media screen and (max-width: 992px) {
	/* Ordre : barre de menu, puis pub, puis le reste */
	.header-wrapper .header-container {
		display: flex;
		flex-direction: column;
	}
	.header-wrapper .header-container > * {
		order: 3;
		width: 100%;
		max-width: 100%;
		margin-left: 0;
		margin-right: 0;
		box-sizing: border-box;
	}
	.header-wrapper .header-container > #site-navigation { order: 1; }
	.header-wrapper .header-container > .uxtech-branding-wrap { order: 2; }

	/* Logo desktop masqué, pub centrée sous la barre */
	.header-wrapper .uxtech-branding { padding: 10px 0; justify-content: center; }
	.header-wrapper .uxtech-branding .site-logo.float-left { display: none !important; }
	.header-wrapper .uxtech-branding .header-ainfo.float-right {
		flex: 0 0 100%;
		width: 100%;
		text-align: center;
		margin: 0;
	}
	.header-wrapper .uxtech-header-ad img {
		display: block;
		margin: 0 auto;
	}

	/* Logo mobile centré dans la barre sombre */
	.header-wrapper .header-main-menu { position: relative; }
	.header-wrapper .main-navigation a.uxtech-bar-logo {
		display: block;
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		z-index: 5;
		line-height: 0;
		padding: 0;
	}
	.header-wrapper .main-navigation a.uxtech-bar-logo img {
		max-height: 40px;
		width: auto;
		height: auto;
	}
}

/* ---------- Carrousel de l'accueil : plus de déformation ---------- */
/* Le thème force une hauteur fixe de 365 px avec une largeur à 100 % :
   l'image est étirée dès que le ratio ne correspond pas. On garde le ratio
   660×365 et on recadre proprement au lieu de déformer. */
.slider-feature-wrap .slider-section img,
.slider-feature-wrap .slider-section .bx-wrapper img {
	width: 100%;
	height: auto !important;
	aspect-ratio: 660 / 365;
	object-fit: cover;
	object-position: center;
}

/* ---------- Bloc à droite du carrousel : grille 2×2 sans trou ---------- */
/* Le thème range les vignettes dans deux colonnes fixes (gauche/droite).
   Si une colonne est vide, ça laisse un trou. On les remet dans une seule
   grille de 2 colonnes qui se remplit dans l'ordre. */
.slider-feature-wrap .besides-slider {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	align-content: start;
}
.slider-feature-wrap .besides-slider .besides-slider-left,
.slider-feature-wrap .besides-slider .besides-slider-right {
	display: contents;
}
.slider-feature-wrap .besides-slider .beside-post {
	float: none;
	width: auto !important;
	margin: 0 !important;
	padding: 0 !important;
}
.slider-feature-wrap .besides-slider .beside-thumb img {
	float: none;
	display: block;
	width: 100%;
	max-width: none;
	max-height: none;
	height: auto !important;
	aspect-ratio: 240 / 172;
	object-fit: cover;
	object-position: center;
}
@media screen and (min-width: 768px) {
	.slider-feature-wrap .besides-slider { padding-left: 12px; box-sizing: border-box; }
}
@media screen and (max-width: 767px) {
	.slider-feature-wrap .besides-slider { margin-top: 12px; }
}