/* Blog : en-tête de liste, catégories, pagination, recherche, et page d'article. */

.dqb-blog {
	display: flex;
	flex-direction: column;
	gap: var(--espace-6);
}

.dqb-blog__description {
	max-width: 620px;
	color: var(--couleur-texte-doux);
	font-size: var(--taille-grande);
}

.dqb-blog__categories ul {
	display: flex;
	flex-wrap: wrap;
	gap: var(--espace-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.dqb-blog__categories a,
.dqb-blog .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0 var(--espace-4);
	border: 1px solid var(--couleur-trait);
	border-radius: var(--rayon-pilule);
	color: var(--couleur-texte);
	font-weight: var(--graisse-forte);
	text-decoration: none;

	&:hover,
	&[aria-current="page"] {
		border-color: var(--couleur-primaire);
		background: var(--couleur-primaire);
		color: var(--couleur-sur-primaire);
	}
}

.dqb-blog .nav-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--espace-2);
}

.dqb-blog .page-numbers.dots {
	border: 0;
}

/* Formulaire de recherche (searchform.php). */
.dqb-recherche {
	display: flex;
	gap: var(--espace-2);
	max-width: 520px;
}

.dqb-recherche__champ {
	flex: 1;
	min-height: 44px;
	padding: 0 var(--espace-4);
	border: 1px solid var(--couleur-trait);
	border-radius: var(--rayon-pilule);
	background: var(--couleur-surface);
}

.dqb-recherche__bouton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: var(--rayon-pilule);
	background: var(--couleur-primaire);
	color: var(--couleur-sur-primaire);
	cursor: pointer;
}

/* Page d'article (single.php). */
.dqb-article {
	display: flex;
	flex-direction: column;
	gap: var(--espace-6);
}

.dqb-article__meta {
	color: var(--couleur-texte-doux);
	font-size: var(--taille-petite);
}

.dqb-article__visuel {
	& img {
		width: 100%;
		max-height: 640px;
		border-radius: var(--rayon-l);
		object-fit: cover;
	}
}

.dqb-article .post-navigation .nav-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--espace-4);

	& a {
		display: inline-flex;
		min-height: 44px;
		align-items: center;
		font-weight: var(--graisse-forte);
	}
}