/**
 * Bandeau des pages du blog : dégradé sur l'image, fil d'Ariane au-dessus du titre.
 * Chargé après les CSS du site principal dans header.php pour pouvoir les surcharger.
 */

.banner.banner-inner {
	--banner-accent: #ff6464; /* --color-accent du site principal */
	isolation: isolate; /* le voile (z-index: -1) reste au-dessus de l'image de fond */
}

/* Voile sombre, plus dense en bas où se trouve le texte */
.banner.banner-inner.parallax:before {
	background: linear-gradient(
		to top,
		rgba(18, 18, 28, .72) 0%,
		rgba(18, 18, 28, .42) 45%,
		rgba(18, 18, 28, .08) 100%
	);
}

/* Fil d'Ariane */
.banner-inner .breadcrumbs {
	margin: 0 0 22px;
	font-family: Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: .12em;
	color: rgba(255, 255, 255, .85);
}

/* Trait d'accent entre le fil d'Ariane et le titre */
.banner-inner .breadcrumbs:after {
	content: '';
	display: block;
	width: 44px;
	height: 3px;
	margin-top: 18px;
	border-radius: 2px;
	background: var(--banner-accent);
}

.banner-inner .breadcrumbs li:before {
	content: '\203A';
	margin: 0 .7em;
	vertical-align: baseline;
	color: var(--banner-accent);
}

.banner-inner .breadcrumbs a {
	color: rgba(255, 255, 255, .85);
}

.banner-inner .breadcrumbs a:hover,
.banner-inner .breadcrumbs a:focus {
	color: #fff;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Article ou page : le titre est déjà le h1, inutile de le répéter dans le fil */
#blog-single .breadcrumbs li:last-child {
	display: none;
}

/* Titre */
.banner.banner-inner .banner-text h1 {
	max-width: 22ch;
	margin-bottom: 0;
	font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: clamp(30px, 4.5vw, 60px);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -.01em;
	text-shadow: 0 2px 12px rgba(0, 0, 0, .35);
}

.banner.banner-inner .subtitle:empty {
	display: none;
}

/* /css_site/mobile.css force tous les h1 à 40px !important sous 850px : trop large pour les titres d'articles */
@media (max-width: 850px) {
	.banner.banner-inner .banner-text h1 {
		font-size: clamp(26px, 7vw, 40px) !important;
	}

	.banner-inner .breadcrumbs {
		font-size: 12px;
	}
}