/* Section « Hero » : photo de fond et voile, texte centré, en blanc. Le bas est plus haut que le
   haut : la section suivante (atouts, formulaire) le chevauche (--chevauchement). */

.dqb-hero {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: var(--hauteur-hero);
	overflow: hidden;
	background: var(--couleur-fond);
	color: var(--couleur-sur-photo);
	text-align: center;
}

.dqb-hero__media {
	position: absolute;
	inset: 0;
	overflow: hidden;

	& img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	&::after {
		content: "";
		position: absolute;
		inset: 0;
		background: linear-gradient(180deg, var(--voile-photo));
	}
}

.dqb-hero__contenu {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--espace-5);
	max-width: var(--largeur-hero);
	padding-block: var(--espace-8) calc(var(--chevauchement) + var(--espace-7));
}

.dqb-hero__ariane ol {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--espace-2);
	margin: 0;
	padding: 0;
	font-size: var(--taille-petite);
	list-style: none;

	& li {
		display: inline-flex;
		align-items: center;
		gap: var(--espace-2);
	}

	& li + li::before {
		content: "›";
	}

	& a {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
		color: var(--couleur-sur-photo);
	}

	& a:hover {
		color: var(--couleur-sur-photo);
		text-decoration: none;
	}
}

.dqb-hero__pastille {
	padding: var(--espace-2) var(--espace-4);
	border-radius: var(--rayon-pilule);
	background: color-mix(in srgb, var(--couleur-sur-photo) 16%, transparent);
	backdrop-filter: var(--flou-entete);
	font-size: var(--taille-petite);
	font-weight: var(--graisse-moyenne);
	letter-spacing: 0.04em;
}

.dqb-hero__titre {
	font-size: var(--taille-h1);
	font-weight: var(--graisse-forte);
}

.dqb-hero__texte {
	max-width: var(--largeur-titre);
	font-size: var(--taille-grande);
	text-wrap: pretty;
}

.dqb-hero__boutons {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--espace-3);
	margin-block-start: var(--espace-1);
}

.dqb-hero__bouton {
	font-size: var(--taille-texte);

	& .dqb-icone {
		flex: none;
	}

	&:focus-visible {
		outline-color: var(--couleur-sur-photo);
	}
}

@media (hover: hover) {
	.dqb-hero .dqb-bouton:hover {
		box-shadow: var(--ombre-bouton);
	}
}