/* =========================================================================
   Batiself — Page « Toutes les catégories » (annuaire du catalogue)
   ========================================================================= */

.batiself-catpage { background: #fff; }

/* ---------- Hero ---------------------------------------------------------- */
.bs-catpage-hero {
	background: var(--bs-color-bg-alt);
	padding: var(--bs-space-2xl) 0;
}
.bs-catpage-hero__eyebrow {
	margin: 0 0 10px;
	color: var(--bs-color-primary);
	font-size:      var(--bs-type-eyebrow-size);
	font-weight:    var(--bs-type-eyebrow-weight);
	letter-spacing: var(--bs-type-eyebrow-tracking);
	text-transform: var(--bs-type-eyebrow-case);
}
.bs-catpage-hero__title {
	margin: 0 0 12px;
	color: var(--bs-color-primary);
	font-size:      var(--bs-type-h1-size);
	font-weight:    var(--bs-weight-bold);
	line-height:    var(--bs-type-h1-leading);
	letter-spacing: var(--bs-type-h1-tracking);
}
.bs-catpage-hero__title strong { font-weight: var(--bs-weight-black); }
.bs-catpage-hero__lead {
	margin: 0;
	max-width: 640px;
	color: var(--bs-color-muted);
	font-size:   var(--bs-type-body-size);
	line-height: var(--bs-type-body-leading);
}

/* ---------- Grille des univers ------------------------------------------- */
.bs-catpage-section { padding: var(--bs-space-2xl) 0; }
.bs-catpage-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: var(--bs-space-lg);
	align-items: start;
}

.bs-catpage-card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--bs-color-border);
	overflow: hidden;
}

/* En-tête de carte = image de l'univers + libellé blanc sur dégradé. */
.bs-catpage-card__head {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: 150px;
	padding: var(--bs-space-md);
	background-color: var(--bs-color-primary);
	background-size: cover;
	background-position: center;
	text-decoration: none;
	overflow: hidden;
}
.bs-catpage-card__head::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0, 91, 167, .12) 0%, rgba(16, 54, 86, .72) 100%);
	transition: background .3s ease;
}
.bs-catpage-card__head:hover::after { background: linear-gradient(180deg, rgba(0, 91, 167, .2) 0%, rgba(16, 54, 86, .8) 100%); }
/* No image → branded Batiself placeholder (diagonals + wordmark) instead of a
   flat blue tile, matching the category cards used elsewhere. */
.bs-catpage-card__head--placeholder {
	background-image:
		var(--bs-overlay-diagonals),
		linear-gradient(150deg, var(--bs-color-primary) 0%, var(--bs-color-primary-dark) 100%);
}
.bs-catpage-card__head--placeholder::before {
	content: 'Batiself';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -60%);
	z-index: 1;
	color: rgba(255, 255, 255, .82);
	font-weight: var(--bs-weight-black, 800);
	font-size: clamp(1.1rem, 2.4vw, 1.6rem);
	letter-spacing: .04em;
}
.bs-catpage-card__title {
	position: relative;
	z-index: 1;
	color: #fff;
	font-size:      var(--bs-type-h3-size);
	font-weight:    var(--bs-weight-bold);
	line-height:    var(--bs-leading-snug);
}

/* Liste des sous-catégories. */
.bs-catpage-card__list {
	list-style: none;
	margin: 0;
	padding: 10px;
	display: flex;
	flex-direction: column;
}
.bs-catpage-card__list a {
	display: block;
	padding: 9px 12px;
	color: var(--bs-color-text);
	text-decoration: none;
	font-size:   var(--bs-type-body-sm-size);
	line-height: var(--bs-leading-snug);
	border-bottom: 1px solid var(--bs-color-border);
	transition: background .15s ease, color .15s ease;
}
.bs-catpage-card__list li:last-child a { border-bottom: 0; }
.bs-catpage-card__list a:hover { background: var(--bs-color-bg-alt); color: var(--bs-color-primary); }

/* Univers sans sous-catégorie → lien « Découvrir ». */
.bs-catpage-card__all {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 14px 16px;
	color: var(--bs-color-primary);
	font-weight: var(--bs-weight-bold);
	text-decoration: none;
	font-size: var(--bs-type-body-sm-size);
}
.bs-catpage-card__all:hover { color: var(--bs-color-primary-dark); }

.bs-catpage-empty { color: var(--bs-color-muted); font-style: italic; }

@media (max-width: 600px) {
	.bs-catpage-hero { padding: var(--bs-space-xl) 0; }
	.bs-catpage-grid { grid-template-columns: 1fr; gap: var(--bs-space-md); }
}