/**
 * Dahu Theme Annad 2026 — bandeau de tête (template-parts/banner.php) : titre + fil d'Ariane sur photo sombre
 * floutée avec voile, ou fond uni --color-surface-2.
 *
 * Composant du bandeau « Mon compte » (maquette « Espace Mon compte »), déplacé tel quel depuis
 * account.css pour être chargé sur tous les gabarits qui l'utilisent (Mon compte, archive produit,
 * actualités, article, recherche, 404). Noms de classes conservés.
 */

.annad-account-banner {
	position: relative;
	display: grid;
	place-items: center;
	min-height: 13rem;
	padding: 3rem var(--gutter);
	overflow: hidden;
	text-align: center;
	color: var(--color-on-surface);
	background-color: var(--color-surface-2);
}

@media (min-width: 64em) {
	.annad-account-banner {
		min-height: 18.75rem;
	}
}

.annad-account-banner__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: blur(3px);
	transform: scale(1.05); /* masque les bords transparents du flou */
}

.annad-account-banner::after {
	content: "";
	position: absolute;
	inset: 0;
	background-color: color-mix(in srgb, var(--color-bg) 55%, transparent);
}

.annad-account-banner__inner {
	position: relative;
	z-index: 1;
}

.annad-account-banner__title {
	font-family: var(--font-heading);
	font-size: clamp(2.25rem, 1.2rem + 4vw, 4rem);
	font-weight: 800;
	line-height: 1.1;
}

.annad-account-banner__breadcrumb {
	margin-top: 1rem;
	font-size: 1.125rem;
}

.annad-account-banner__breadcrumb a {
	color: inherit;
	text-decoration: none;
}

.annad-account-banner__breadcrumb a:hover {
	text-decoration: underline;
}

.annad-account-banner__breadcrumb a:focus-visible {
	outline: 2px solid var(--color-brand-green);
	outline-offset: 2px;
}