/**
 * Enveloppe : entête et pied, présents sur toutes les pages.
 */

/* --------------------------------------------------------------- Entête -- */

.dh-entete {
	background: var(--encre);
	color: var(--ivoire);
	border-bottom: 1px solid var(--ardoise);
}

.dh-entete__barre {
	display: flex;
	align-items: center;
	gap: var(--esp-m);
	padding-block: var(--esp-s);
}

.dh-entete__marque {
	font-family: var(--font-titres);
	font-weight: 500;
	font-size: var(--style-texte-large-taille);
	letter-spacing: var(--style-texte-large-approche);
	text-decoration: none;
}

.dh-entete__nav {
	margin-inline-start: auto;
}

.dh-entete__nav ul {
	display: flex;
	gap: var(--esp-m);
	list-style: none;
	margin: 0;
	padding: 0;
}

.dh-entete__nav a {
	text-decoration: none;
	font-size: var(--style-lien-taille);
	font-weight: 700;
	letter-spacing: var(--style-lien-approche);
}

.dh-entete__nav a:hover,
.dh-entete__nav a:focus-visible {
	color: var(--accent);
}

/* Sans menu configuré, le CTA se cale à droite tout seul. */
.dh-entete__cta {
	margin-inline-start: auto;
}

.dh-entete__nav + .dh-entete__cta {
	margin-inline-start: 0;
}

/* ----------------------------------------------------------------- Pied -- */

.dh-pied {
	background: var(--encre);
	color: var(--sable);
	margin-top: var(--esp-xl);
}

.dh-pied__grille {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--esp-s);
	padding-block: var(--esp-m);
}

.dh-pied__marque {
	font-family: var(--font-titres);
	font-weight: 500;
	font-size: var(--style-texte-large-taille);
	letter-spacing: var(--style-texte-large-approche);
	margin: 0;
}

.dh-pied__conformite {
	font-size: var(--taille-s);
	color: var(--graphite);
	margin: 0;
}