/**
 * BALIOJDID — Enchères
 * Reprend les variables et les composants du thème Broccoli.
 */

.bje-liste,
.bje-single,
.bje-archive {
	--bje-accent: var(--ltn__secondary-color, #80B500);
	--bje-accent-fonce: var(--ltn__secondary-color-2, #699403);
	--bje-accent-clair: var(--ltn__secondary-color-3, #a2da1c);
	--bje-encre: var(--ltn__heading-color, #071c1f);
	--bje-gris: #f7f8f7;
	--bje-bordure: #e9ebe9;
	--bje-texte-doux: #6b7574;
	--bje-ombre: var(--ltn__box-shadow-3, 0 1px 6px 0 rgba(54, 56, 61, 0.15));
}

/* ---------------------------------------------------------------------
 * Intro & filtres
 * ------------------------------------------------------------------ */

.bje-intro {
	max-width: 720px;
	margin: 0 auto 40px;
	text-align: center;
	color: var(--bje-texte-doux);
}

.bje-filtres {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 35px;
	justify-content: center;
}

.bje-filtre {
	display: inline-block;
	padding: 9px 22px;
	border: 1px solid var(--bje-bordure);
	border-radius: 2px;
	font-size: 14px;
	font-weight: 600;
	color: var(--bje-encre);
	background: #fff;
	transition: all 0.25s ease;
}

.bje-filtre:hover,
.bje-filtre:focus {
	border-color: var(--bje-accent);
	color: var(--bje-accent);
}

.bje-filtre--actif,
.bje-filtre--actif:hover {
	background: var(--bje-accent);
	border-color: var(--bje-accent);
	color: #fff;
}

/* ---------------------------------------------------------------------
 * Cartes de la grille
 * ------------------------------------------------------------------ */

.bje-grille {
	margin-bottom: 20px;
}

.bje-col {
	margin-bottom: 30px;
}

.bje-card .inner-box {
	background: #fff;
	border: 1px solid var(--bje-bordure);
	border-radius: 2px;
	overflow: hidden;
	height: 100%;
	transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.bje-card:hover .inner-box {
	box-shadow: var(--ltn__box-shadow-1, 0 16px 32px 0 rgba(7, 28, 31, 0.1));
	transform: translateY(-4px);
}

.bje-card__media {
	position: relative;
	overflow: hidden;
}

/**
 * Le thème Broccoli applique « .product-img img { z-index: -1 } » et
 * « transition: all 3.5s ». Ces deux règles ont la même spécificité que la
 * nôtre et sa feuille est chargée après la nôtre : il faut donc une
 * spécificité strictement supérieure (3 classes) pour reprendre la main.
 */
.bje-card .inner-box .bje-card__media img {
	position: relative;
	z-index: 1 !important;
	width: 100%;
	height: auto;
	display: block;
	/* Format carré uniforme quelles que soient les proportions de la photo. */
	aspect-ratio: 1 / 1;
	object-fit: contain;
	object-position: center;
	background: #fff;
	/* 3,5 s côté thème : ramené à une durée utile. */
	transition: transform 0.5s ease !important;
}

.bje-card:hover .inner-box .bje-card__media img {
	transform: scale(1.04);
}

.bje-card .bje-badge,
.bje-card .bje-card__timer,
.bje-card .product-hover-action {
	z-index: 4;
}

/* Repli pour les navigateurs sans aspect-ratio. */
@supports not (aspect-ratio: 1 / 1) {
	.bje-card__media {
		padding-top: 100%;
	}

	.bje-card__media img {
		position: absolute;
		top: 0;
		left: 0;
		height: 100%;
	}
}

.bje-badge {
	position: absolute;
	top: 14px;
	left: 14px;
	z-index: 3;
	padding: 5px 14px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #fff;
	border-radius: 2px;
	background: var(--bje-texte-doux);
}

.bje-badge--en_cours {
	background: var(--bje-accent);
}

.bje-badge--a_venir {
	background: var(--bje-encre);
}

.bje-badge--terminee {
	background: #9aa3a2;
}

.bje-badge--large {
	top: 20px;
	left: 20px;
	font-size: 13px;
	padding: 8px 20px;
}

.bje-card__timer {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 3;
	padding: 9px 14px;
	font-size: 13px;
	font-weight: 600;
	color: #fff;
	background: rgba(7, 28, 31, 0.82);
	text-align: center;
}

.bje-card__timer i {
	margin-right: 6px;
	color: var(--bje-accent-clair);
}

.bje-card__info {
	padding: 22px 20px 24px;
}

.bje-card .product-title {
	font-size: 18px;
	line-height: 1.4;
	margin-bottom: 16px;
	min-height: 50px;
}

.bje-card__ligne {
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: 8px;
	flex-wrap: wrap;
	padding: 12px 0;
	border-top: 1px solid var(--bje-bordure);
	border-bottom: 1px solid var(--bje-bordure);
}

.bje-card__label {
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--bje-texte-doux);
}

.bje-card__prix,
.bje-card__prix .amount {
	font-size: 20px;
	font-weight: 700;
	color: var(--bje-accent);
}

.bje-card__meta {
	margin: 12px 0 18px;
	font-size: 13px;
	color: var(--bje-texte-doux);
}

.bje-card__action .btn {
	width: 100%;
}

/* ---------------------------------------------------------------------
 * Page d'une enchère
 * ------------------------------------------------------------------ */

.bje-single__media {
	position: relative;
	border: 1px solid var(--bje-bordure);
	background: #fff;
}

.bje-single__media img {
	width: 100%;
	height: auto;
	display: block;
}

.bje-specs {
	list-style: none;
	margin: 24px 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1px;
	background: var(--bje-bordure);
	border: 1px solid var(--bje-bordure);
}

.bje-specs li {
	background: #fff;
	padding: 16px 12px;
	text-align: center;
}

.bje-specs span {
	display: block;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--bje-texte-doux);
	margin-bottom: 6px;
}

.bje-specs strong,
.bje-specs strong .amount {
	font-size: 15px;
	color: var(--bje-encre);
}

.bje-panneau {
	background: #fff;
	border: 1px solid var(--bje-bordure);
	padding: 34px 32px;
}

@media (max-width: 991px) {
	.bje-panneau {
		margin-top: 35px;
		padding: 26px 20px;
	}
}

.bje-panneau__titre {
	font-size: 30px;
	line-height: 1.25;
	margin-bottom: 14px;
}

.bje-panneau__stats {
	display: flex;
	gap: 22px;
	flex-wrap: wrap;
	font-size: 14px;
	color: var(--bje-texte-doux);
	padding-bottom: 22px;
	border-bottom: 1px solid var(--bje-bordure);
}

.bje-panneau__stats i {
	color: var(--bje-accent);
	margin-right: 5px;
}

.bje-panneau__label {
	display: block;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--bje-texte-doux);
	margin-bottom: 8px;
}

/* Signature : le prix courant, adossé à un filet vert épais. */
.bje-panneau__prix {
	margin: 24px 0;
	padding-left: 18px;
	border-left: 4px solid var(--bje-accent);
}

.bje-panneau__montant,
.bje-panneau__montant .amount {
	font-size: 40px;
	line-height: 1.1;
	font-weight: 700;
	color: var(--bje-encre);
}

.bje-panneau__temps {
	margin-bottom: 26px;
}

.bje-countdown {
	box-shadow: none;
	padding: 0;
	margin-top: 0;
	display: flex;
	gap: 10px;
}

.bje-countdown .single {
	margin-right: 0;
	flex: 1;
	text-align: center;
	background: var(--bje-gris);
	border: 1px solid var(--bje-bordure);
	padding: 12px 4px 8px;
}

.bje-countdown .single h1 {
	font-size: 26px;
	margin-bottom: 2px;
	color: var(--bje-encre);
	font-variant-numeric: tabular-nums;
}

.bje-countdown .single p {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--bje-texte-doux);
	margin-bottom: 4px;
}

.bje-countdown.bje-countdown--urgent .single h1 {
	color: #c0392b;
}

.bje-panneau__echeance {
	margin: 12px 0 0;
	font-size: 13px;
	color: var(--bje-texte-doux);
}

/* Formulaire d'offre */

.bje-formulaire label {
	display: block;
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--bje-encre);
	margin-bottom: 10px;
}

.bje-formulaire label small {
	display: inline-block;
	margin-left: 6px;
	font-weight: 600;
	text-transform: none;
	letter-spacing: 0;
	color: var(--bje-accent-fonce);
}

.bje-formulaire__champ {
	display: flex;
	align-items: stretch;
	border: 1px solid var(--bje-bordure);
	background: #fff;
	margin-bottom: 16px;
}

.bje-formulaire__champ input[type="number"] {
	flex: 1;
	border: 0;
	background: transparent;
	height: 56px;
	padding: 0 8px 0 16px;
	font-size: 22px;
	font-weight: 700;
	color: var(--bje-encre);
	-moz-appearance: textfield;
	min-width: 0;
}

.bje-formulaire__champ input[type="number"]::-webkit-outer-spin-button,
.bje-formulaire__champ input[type="number"]::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.bje-formulaire__champ input:focus {
	outline: none;
}

.bje-formulaire__champ:focus-within {
	border-color: var(--bje-accent);
}

.bje-devise {
	display: flex;
	align-items: center;
	padding-right: 12px;
	font-size: 15px;
	font-weight: 700;
	color: var(--bje-texte-doux);
}

.bje-pas {
	width: 52px;
	border: 0;
	background: var(--bje-gris);
	font-size: 22px;
	line-height: 1;
	color: var(--bje-encre);
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease;
}

.bje-pas:hover {
	background: var(--bje-accent);
	color: #fff;
}

.bje-submit {
	width: 100%;
}

.bje-submit[disabled] {
	opacity: 0.6;
	cursor: progress;
}

.bje-mention {
	margin: 14px 0 0;
	font-size: 12px;
	line-height: 1.6;
	color: var(--bje-texte-doux);
}

.bje-connexion {
	background: var(--bje-gris);
	padding: 26px 22px;
	text-align: center;
}

.bje-connexion p {
	margin-bottom: 18px;
	color: var(--bje-encre);
}

/* Messages */

.bje-message,
.bje-alerte {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 14px 18px;
	margin-bottom: 20px;
	font-size: 14px;
	line-height: 1.5;
	border-left: 3px solid var(--bje-texte-doux);
	background: var(--bje-gris);
	color: var(--bje-encre);
}

.bje-message[hidden] {
	display: none;
}

.bje-message--succes,
.bje-alerte--succes {
	border-left-color: var(--bje-accent);
	background: rgba(128, 181, 0, 0.09);
}

.bje-message--erreur {
	border-left-color: #c0392b;
	background: rgba(192, 57, 43, 0.08);
}

.bje-alerte--fin {
	border-left-color: var(--bje-encre);
}

.bje-alerte i,
.bje-message i {
	margin-top: 2px;
	color: var(--bje-accent);
}

/* ---------------------------------------------------------------------
 * Bas de page : description et historique
 * ------------------------------------------------------------------ */

.bje-bas {
	margin-top: 60px;
}

.bje-bloc {
	background: #fff;
	border: 1px solid var(--bje-bordure);
	padding: 28px 26px;
	height: 100%;
}

@media (max-width: 991px) {
	.bje-bloc {
		margin-bottom: 30px;
	}
}

.bje-bloc__titre {
	font-size: 20px;
	margin-bottom: 20px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--bje-bordure);
}

.bje-historique {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
}

.bje-historique td {
	padding: 12px 6px;
	border-bottom: 1px solid var(--bje-bordure);
	vertical-align: middle;
}

.bje-historique tr:last-child td {
	border-bottom: 0;
}

.bje-historique__qui {
	font-weight: 600;
	color: var(--bje-encre);
}

.bje-historique__quand {
	color: var(--bje-texte-doux);
	font-size: 13px;
	white-space: nowrap;
}

.bje-historique__combien {
	text-align: right;
	font-weight: 700;
	white-space: nowrap;
}

.bje-historique__tete .bje-historique__combien,
.bje-historique__tete .bje-historique__combien .amount {
	color: var(--bje-accent);
}

.bje-historique__moi {
	background: rgba(128, 181, 0, 0.06);
}

.bje-tag {
	display: inline-block;
	margin-left: 6px;
	padding: 2px 8px;
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: #fff;
	background: var(--bje-accent);
	border-radius: 2px;
	vertical-align: middle;
}

.bje-vide {
	color: var(--bje-texte-doux);
	font-size: 14px;
	margin: 0;
}

.bje-similaires {
	margin-top: 80px;
}

/* ---------------------------------------------------------------------
 * État vide et pagination
 * ------------------------------------------------------------------ */

.bje-etat-vide {
	text-align: center;
	padding: 70px 20px;
	border: 1px dashed var(--bje-bordure);
	background: var(--bje-gris);
}

.bje-etat-vide i {
	font-size: 40px;
	color: var(--bje-accent);
	margin-bottom: 18px;
	display: block;
}

.bje-etat-vide h4 {
	margin-bottom: 10px;
}

.bje-etat-vide p {
	max-width: 460px;
	margin: 0 auto 24px;
	color: var(--bje-texte-doux);
}

.bje-pagination {
	margin-top: 30px;
	text-align: center;
}

.bje-pagination .page-numbers {
	display: inline-block;
	min-width: 42px;
	height: 42px;
	line-height: 40px;
	margin: 0 3px;
	padding: 0 8px;
	border: 1px solid var(--bje-bordure);
	color: var(--bje-encre);
	font-weight: 600;
	background: #fff;
}

.bje-pagination .page-numbers.current,
.bje-pagination .page-numbers:hover {
	background: var(--bje-accent);
	border-color: var(--bje-accent);
	color: #fff;
}

/* ---------------------------------------------------------------------
 * Accessibilité
 * ------------------------------------------------------------------ */

.bje-filtre:focus-visible,
.bje-pas:focus-visible,
.bje-submit:focus-visible,
.bje-formulaire__champ:focus-within {
	outline: 2px solid var(--bje-accent-fonce);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.bje-card .inner-box,
	.bje-filtre,
	.bje-pas {
		transition: none;
	}

	.bje-card:hover .inner-box {
		transform: none;
	}
}
