/*
 * Accueil — sections premium ajoutées après le hero (recherche produit,
 * univers produits, etc.). Fichier dédié pour centraliser leur CSS plutôt
 * que d'empiler des balises <style> inline dans post_content à chaque
 * nouvelle section — la section recherche (.zb-home-search) reste en style
 * inline car aucun fichier dédié n'existait encore à ce moment ; celle-ci
 * l'ouvre pour toutes les sections suivantes. Chargé uniquement sur
 * is_front_page() (voir functions.php, zb_enqueue_homepage_premium_sections).
 */

/* ---------- "Nos univers" : grille de 4 cartes ---------- */

.zb-home-universes {
	box-sizing: border-box;
	/* Échappe la largeur de lecture ~820px de .entry-content.is-layout-constrained
	   (WordPress core) — même technique déjà validée sur .zbi-scene et
	   .zb-home-search ; !important nécessaire, spécificité core supérieure à
	   un simple sélecteur de classe. */
	width: 100vw !important;
	max-width: 100vw !important;
	margin-left: calc(50% - 50vw) !important;
	margin-right: calc(50% - 50vw) !important;
	background: var(--zb-surface-page, #faf7f1);
	padding: 56px 24px;
}

.zb-home-universes__inner {
	/* Réutilise --zb-home-wide (1360px), déjà défini dans homepage-layout.css
	   comme le conteneur "principal" standard du site pour grilles/cartes. */
	max-width: var(--zb-home-wide, 1360px);
	margin: 0 auto;
}

.zb-home-universes__eyebrow {
	display: block;
	text-align: center;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--zb-accent-deep, #237a3d);
	margin: 0 0 10px;
}

.zb-home-universes__title {
	text-align: center;
	font-size: 32px;
	line-height: 1.25;
	color: var(--zb-text-heading, #23261f);
	margin: 0 0 12px;
}

.zb-home-universes__intro {
	text-align: center;
	max-width: 640px;
	margin: 0 auto 40px;
	font-size: 16px;
	line-height: 1.5;
	color: var(--zb-text-secondary, #5f6259);
}

.zb-home-universes__grid {
	display: grid;
	/* 5 cartes (ajout Ossature métallique, 01/08/2026) : 5 colonnes en
	   desktop pour une grille symétrique, plutôt que 4+1 déséquilibré. */
	grid-template-columns: repeat(5, 1fr);
	gap: 24px;
}

.zb-home-universes__card {
	position: relative;
	/* Colonne flex plutôt que "display:block" : la hauteur de la carte doit
	   s'adapter au contenu réel de .body (titre + texte + CTA), jamais l'inverse.
	   Avant (bug du 01/08) : .media fixait la hauteur via aspect-ratio et .body
	   était positionné en absolute dessus — un titre plus long débordait alors
	   au-dessus du cadre et se faisait couper par cet overflow:hidden. */
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 240px;
	border-radius: 16px;
	overflow: hidden;
	text-decoration: none;
	box-shadow: 0 6px 20px rgba(35, 38, 31, 0.1);
	transition: transform 220ms ease, box-shadow 220ms ease;
}

.zb-home-universes__media {
	/* Calque de fond en absolute (inset:0) : suit désormais la hauteur réelle
	   de la carte (déterminée par .body) au lieu de l'imposer via aspect-ratio. */
	position: absolute;
	inset: 0;
	/* Fond de secours commun : nécessaire pour la carte "Accessoires et
	   fixations" (photo produit sur fond transparent, voir rapport) et
	   comme garde-fou si une image tarde à charger. */
	background: var(--zb-surface-dark, #121519);
	overflow: hidden;
}

.zb-home-universes__media--brand {
	background: var(--zb-cta-bg, #163d22);
}

.zb-home-universes__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 220ms ease;
}

.zb-home-universes__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(15, 17, 13, 0.05) 0%, rgba(15, 17, 13, 0.78) 100%);
}

.zb-home-universes__body {
	/* En flux normal (plus en absolute) : sa hauteur réelle pousse désormais
	   la hauteur de .card via flexbox, au lieu d'être ignorée par elle. */
	position: relative;
	padding: 20px;
	z-index: 1;
}

.zb-home-universes__card-title {
	margin: 0 0 6px;
	font-size: 19px;
	color: #fff;
	text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

.zb-home-universes__card-text {
	margin: 0 0 12px;
	font-size: 14px;
	line-height: 1.4;
	color: rgba(255, 255, 255, 0.88);
	text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
}

.zb-home-universes__cta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	font-weight: 700;
	color: #fff;
	letter-spacing: 0.02em;
}

.zb-home-universes__cta::after {
	content: "→";
}

/* Hover réservé aux dispositifs à pointeur précis (mission : @media hover:hover). */
@media (hover: hover) {
	.zb-home-universes__card:hover {
		transform: translateY(-2px);
		box-shadow: 0 12px 28px rgba(35, 38, 31, 0.16);
	}

	.zb-home-universes__card:hover .zb-home-universes__media img {
		transform: scale(1.03);
	}
}

.zb-home-universes__card:focus-visible {
	outline: 3px solid var(--zb-accent-deep, #237a3d);
	outline-offset: 3px;
}

.zb-home-universes__card:active {
	transform: translateY(0);
}

/* Desktop large : 4 colonnes. Espace insuffisant : 2 colonnes (tablette),
   puis 1 colonne (mobile) — jamais de contenu compressé à l'excès. */
@media (max-width: 1100px) {
	.zb-home-universes__grid {
		grid-template-columns: repeat(2, 1fr);
	}

	/* 5 cartes sur 2 colonnes : la dernière se retrouverait seule, à moitié
	   large, avec un vide à côté — elle occupe donc toute la largeur de sa
	   ligne plutôt que de laisser un espace déséquilibré. */
	.zb-home-universes__card:last-child {
		grid-column: 1 / -1;
	}
}

@media (max-width: 640px) {
	.zb-home-universes__grid {
		grid-template-columns: 1fr;
	}

	.zb-home-universes__title {
		font-size: 26px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.zb-home-universes__card,
	.zb-home-universes__media img {
		transition: none;
	}

	.zb-home-universes__card:hover {
		transform: none;
	}

	.zb-home-universes__card:hover .zb-home-universes__media img {
		transform: none;
	}
}

/* ---------- "Pourquoi Zarboutan" : réassurance (4 éléments, non cliquables) ---------- */

.zb-home-trust {
	box-sizing: border-box;
	/* Même échappement de largeur que .zb-home-search et .zb-home-universes
	   (contrainte .entry-content.is-layout-constrained, WordPress core). */
	width: 100vw !important;
	max-width: 100vw !important;
	margin-left: calc(50% - 50vw) !important;
	margin-right: calc(50% - 50vw) !important;
	background: var(--zb-surface-alt, #f1ece3);
	padding: 56px 24px;
}

.zb-home-trust__inner {
	max-width: var(--zb-home-wide, 1360px);
	margin: 0 auto;
}

.zb-home-trust__eyebrow {
	display: block;
	text-align: center;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--zb-accent-deep, #237a3d);
	margin: 0 0 10px;
}

.zb-home-trust__title {
	text-align: center;
	font-size: 30px;
	line-height: 1.25;
	color: var(--zb-text-heading, #23261f);
	margin: 0 0 12px;
}

.zb-home-trust__intro {
	text-align: center;
	max-width: 640px;
	margin: 0 auto 40px;
	font-size: 16px;
	line-height: 1.5;
	color: var(--zb-text-secondary, #5f6259);
}

.zb-home-trust__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
}

.zb-home-trust__item {
	/* Fond blanc sur fond beige de section : distinction visuelle sobre,
	   sans photo ni ombre marquée (mission : "ombre minimale ou aucune"). */
	background: var(--zb-surface-card, #fff);
	border: 1px solid var(--zb-border-subtle, #e6e0d3);
	border-radius: 14px;
	padding: 28px 22px;
	text-align: center;
}

.zb-home-trust__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 999px;
	background: var(--zb-surface-alt, #f1ece3);
	color: var(--zb-accent-deep, #237a3d);
	margin: 0 0 16px;
}

.zb-home-trust__item-title {
	margin: 0 0 8px;
	font-size: 17px;
	color: var(--zb-text-heading, #23261f);
}

.zb-home-trust__item-text {
	margin: 0;
	font-size: 14px;
	line-height: 1.5;
	color: var(--zb-text-secondary, #5f6259);
}

/* Desktop : 4 colonnes. Tablette : 2. Mobile : 1, largeur 100%. */
@media (max-width: 1100px) {
	.zb-home-trust__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 640px) {
	.zb-home-trust__grid {
		grid-template-columns: 1fr;
	}

	.zb-home-trust__title {
		font-size: 24px;
	}
}