/* ==========================================================================
   Carnet (blog + catégories + landing) — valeurs du prototype Blog.dc.html
   ========================================================================== */

.bf-blog__wrap {
	display: flex;
	flex-direction: column;
	gap: 24px;
	padding-top: 34px;
	padding-bottom: 80px;
}

.bf-blog__head { display: flex; flex-direction: column; gap: 10px; }

.bf-blog__title {
	margin: 0;
	font: 800 clamp(32px, 6vw, 54px)/1.05 var(--bf-font-display);
	color: var(--bf-title);
}

.bf-blog__sub {
	margin: 0;
	font: 400 16.5px/1.55 var(--bf-font-ui);
	color: var(--bf-body-soft);
	max-width: 640px;
}

/* Filtres ------------------------------------------------------------------ */

.bf-blog__filters { display: flex; gap: 8px; flex-wrap: wrap; }

.bf-blog__filter {
	font: 600 13.5px var(--bf-font-ui);
	color: var(--bf-sage-light);
	border: 1px solid var(--bf-line-input);
	border-radius: var(--bf-r-pill);
	padding: 8px 16px;
}

.bf-blog__filter:hover { color: var(--bf-orange-bright); border-color: var(--bf-orange-deep); }

.bf-blog__filter.is-active {
	color: var(--bf-on-orange);
	background: var(--bf-orange);
	border-color: var(--bf-orange);
}

/* À la une ----------------------------------------------------------------- */

.bf-blog__featured {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	background: var(--bf-card);
	border: 1px solid var(--bf-line-card);
	border-radius: 16px;
	overflow: hidden;
	color: inherit;
}

.bf-blog__featured:hover { border-color: var(--bf-orange); color: inherit; }

.bf-blog__featured-img { min-height: 240px; background: #243527; }

.bf-blog__featured-img img { width: 100%; height: 100%; object-fit: cover; display: block; }

.bf-blog__featured-body {
	padding: 28px 30px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	justify-content: center;
	align-items: flex-start;
}

.bf-blog__overline {
	font: 700 11.5px var(--bf-font-ui);
	color: var(--bf-sage-text);
	letter-spacing: .18em;
	text-transform: uppercase;
}

.bf-blog__featured-title {
	font: 800 clamp(22px, 3.2vw, 32px)/1.18 var(--bf-font-display);
	color: var(--bf-text);
}

.bf-blog__featured-go { font: 700 15px var(--bf-font-ui); color: var(--bf-orange-hover); }

/* Compteur + grille -------------------------------------------------------- */

.bf-blog__count {
	font: 600 13px var(--bf-font-ui);
	color: var(--bf-muted);
	text-align: right;
}

.bf-blog__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 22px;
}

.bf-blog__card {
	background: var(--bf-card);
	border: 1px solid var(--bf-line-card);
	border-radius: 14px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	color: inherit;
}

.bf-blog__card:hover { border-color: var(--bf-orange); color: inherit; }

.bf-blog__card-img { height: 150px; background: #243527; }

.bf-blog__card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }

.bf-blog__card-body { padding: 18px 20px; display: flex; flex-direction: column; gap: 8px; }

.bf-blog__card-title { font: 800 19px/1.25 var(--bf-font-display); color: var(--bf-text); }

.bf-blog__card-read { font: 500 12.5px var(--bf-font-ui); color: var(--bf-muted); margin-top: auto; }

/* Pagination --------------------------------------------------------------- */

.bf-blog__pagination {
	display: flex;
	justify-content: center;
	gap: 8px;
	flex-wrap: wrap;
}

.bf-blog__pagination .page-numbers {
	min-width: 40px;
	height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 10px;
	border: 1px solid var(--bf-line-input);
	border-radius: 10px;
	font: 700 14px var(--bf-font-ui);
	color: var(--bf-sage-light);
}

.bf-blog__pagination .page-numbers:hover { color: var(--bf-orange-bright); border-color: var(--bf-orange-deep); }

.bf-blog__pagination .page-numbers.current {
	background: var(--bf-orange);
	border-color: var(--bf-orange);
	color: var(--bf-on-orange);
}

.bf-blog__pagination .page-numbers.dots { border: 0; }

.bf-blog__more { align-self: center; }

/* État vide ---------------------------------------------------------------- */

.bf-blog__empty {
	display: flex;
	flex-direction: column;
	gap: 8px;
	align-items: center;
	text-align: center;
	padding: 44px 20px;
	background: var(--bf-panel);
	border: 1px solid var(--bf-line);
	border-radius: 14px;
}

.bf-blog__empty-title { font: 700 17px var(--bf-font-ui); color: var(--bf-text); }

.bf-blog__empty-quote { font: 600 18px var(--bf-font-hand); color: var(--bf-sage-light); }