/* ==========================================================================
   Travaux — styles front. Carte HORIZONTALE (image gauche, contenu droite),
   empilée en mobile. Consomme les design tokens du socle (cnep-core/tokens.css)
   via la dépendance « cnep-core-tokens » : aucune couleur de marque en dur.
   ========================================================================== */

.upb-travaux-filters { margin: 0 0 1rem; }

.upb-travaux-list {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

/* Carte horizontale. */
.upb-travaux-card {
	display: flex;
	flex-direction: row;
	gap: 1.25rem;
	background: var(--upb-card-bg, #fff);
	border-radius: 1rem;
	overflow: hidden;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
}

.upb-travaux-card__media {
	flex: 0 0 38%;
	max-width: 38%;
	min-height: 180px;
	background: var(--surface-container, #f0eded);
}
.upb-travaux-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.upb-travaux-card__media-placeholder {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 180px;
	background: linear-gradient(135deg, var(--upb-light) 0%, var(--upb-accent) 100%);
	opacity: 0.25;
}

.upb-travaux-card__body {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	gap: 0.55rem;
	padding: 1.25rem 1.25rem 1.25rem 0;
}

.upb-travaux-card__title {
	margin: 0;
	text-align: center;
	font-size: 1.2rem;
	font-weight: 700;
	color: var(--upb-primary);
}

.upb-travaux-card__subtitle {
	margin: 0;
	text-align: center;
	font-size: 0.9rem;
	color: var(--cnep-muted, #6B6B6B);
}

.upb-travaux-card__badges {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
	justify-content: center;
}

.upb-travaux-badge {
	display: inline-block;
	padding: 0.15em 0.6em;
	border-radius: 4px;
	font-size: 0.7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	background: var(--cnep-badge-bg);
	color: var(--cnep-badge-text);
}

.upb-travaux-card__excerpt {
	margin: 0;
	font-size: 0.95rem;
	line-height: 1.55;
}

.upb-travaux-card__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	margin-top: auto;
	flex-wrap: wrap;
}

.upb-travaux-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.5rem 1rem;
	border-radius: 0.5rem;
	background: var(--upb-primary);
	color: var(--upb-on-primary, #fff);
	text-decoration: none;
	font-weight: 600;
}
.upb-travaux-btn:hover,
.upb-travaux-btn:focus { filter: brightness(0.95); }
.upb-travaux-btn:focus-visible {
	outline: 2px solid var(--upb-primary);
	outline-offset: 2px;
}
.upb-travaux-lock { font-size: 1rem; line-height: 1; }

/* Statut discret (neutre — couleurs non spécifiées par la maquette). */
.upb-travaux-status {
	font-size: 0.75rem;
	font-weight: 600;
	padding: 0.15em 0.6em;
	border-radius: 9999px;
	background: var(--surface-container-high, #eae7e7);
	color: var(--on-surface-variant, #574140);
}

.upb-travaux-pagination {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin-top: 1.25rem;
	justify-content: center;
}
.upb-travaux-pagination .page-numbers {
	padding: 0.3rem 0.7rem;
	border-radius: 0.375rem;
	text-decoration: none;
	background: var(--surface-container, #f0eded);
}
.upb-travaux-pagination .page-numbers.current {
	background: var(--upb-primary);
	color: var(--upb-on-primary, #fff);
}

.upb-travaux-card.is-hidden { display: none; }

/* Empilé en mobile : image au-dessus. */
@media ( max-width: 640px ) {
	.upb-travaux-card { flex-direction: column; }
	.upb-travaux-card__media { flex-basis: auto; max-width: 100%; }
	.upb-travaux-card__body { padding: 0 1.25rem 1.25rem; }
}

/* Variante « featured » agrandie. */
.upb-travaux--featured .upb-travaux-card { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16); }
.upb-travaux--featured .upb-travaux-card__title { font-size: 1.45rem; }