/* ==========================================================================
   M'Road Solution — véhicules : listes, cartes, filtres, fiche, visionneuse
   (chargé uniquement sur les pages qui affichent des véhicules)
   ========================================================================== */

/* Listes */
.vlist { padding-top: clamp(40px, 6vw, 72px); }
.vlist__intro { max-width: 820px; margin-bottom: 40px; }
.vlist--sold .vlist__intro { color: var(--c-muted-light); }

.vgrid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(18px, 2.4vw, 32px);
}

@media (max-width: 1100px) { .vgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px) { .vgrid { grid-template-columns: 1fr; } }

/* Carte */
.vcard {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-radius: var(--radius-lg);
	background: var(--c-white);
	box-shadow: var(--shadow-card);
	transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease);
}

.vcard::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 3px;
	background: var(--c-yellow);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--t) var(--ease);
}

.vcard:hover { transform: translateY(-6px); box-shadow: var(--shadow-lift); }
.vcard:hover::after { transform: scaleX(1); }

.vcard__media {
	position: relative;
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: linear-gradient(135deg, var(--c-night-2), var(--c-night));
}

.vcard__img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
.vcard:hover .vcard__img { transform: scale(1.06); }

.vcard__media::after {
	content: "";
	position: absolute;
	inset: 55% 0 0;
	background: linear-gradient(0deg, rgba(2, 11, 28, 0.7), transparent);
	pointer-events: none;
}

.vcard__noimg { display: grid; place-items: center; align-content: center; gap: 8px; height: 100%; color: var(--c-muted-light); font-family: var(--f-display); letter-spacing: 0.14em; text-transform: uppercase; }

.vcard__price {
	position: absolute;
	right: 0;
	bottom: 16px;
	z-index: 2;
	padding: 8px 16px 8px 22px;
	background: var(--c-yellow);
	color: var(--c-night);
	font-family: var(--f-display);
	font-size: 24px;
	font-style: italic;
	font-weight: 800;
	line-height: 1;
	clip-path: polygon(12px 0, 100% 0, 100% 100%, 0 100%);
}

.vcard__badge,
.vcard__count {
	position: absolute;
	top: 14px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 10px;
	border-radius: var(--radius);
	font-family: var(--f-display);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.vcard__badge { left: 14px; background: var(--c-night); color: var(--c-yellow); }
.vcard__count { right: 14px; background: rgba(2, 11, 28, 0.7); color: var(--c-white); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }

.vcard__demo {
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	z-index: 3;
	padding: 6px 10px;
	background: rgba(185, 28, 28, 0.92);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-align: center;
	text-transform: uppercase;
	transform: translateY(-50%);
}

/* Bandeau « VENDU » */
.vcard__sold {
	position: absolute;
	top: 26px;
	left: -52px;
	z-index: 3;
	width: 220px;
	padding: 8px 0;
	background: var(--c-yellow);
	color: var(--c-night);
	font-family: var(--f-display);
	font-size: 18px;
	font-style: italic;
	font-weight: 800;
	letter-spacing: 0.3em;
	text-align: center;
	text-transform: uppercase;
	transform: rotate(-35deg);
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}

.vcard--sold .vcard__img { filter: grayscale(0.25) brightness(0.92); }

.vcard__body { display: flex; flex: 1; flex-direction: column; padding: 22px 24px 24px; }

.vcard__title {
	margin: 0;
	font-size: 26px;
	font-style: italic;
	font-weight: 800;
	line-height: 1.05;
}

.vcard__title a { background: linear-gradient(var(--c-yellow), var(--c-yellow)) 0 100% / 0 3px no-repeat; transition: background-size var(--t) var(--ease); }
.vcard:hover .vcard__title a { background-size: 100% 3px; }

/* La carte entière est cliquable (lien étendu sur le titre) */
.vcard__title a::before { content: ""; position: absolute; inset: 0; z-index: 1; }

.vcard__version { margin: 6px 0 0; color: var(--c-muted); font-size: 15px; line-height: 1.4; }

.vcard__specs {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px 14px;
	margin: 18px 0 0;
	padding: 16px 0 0;
	border-top: 1px solid var(--c-line-light);
	list-style: none;
	font-size: 14.5px;
	color: var(--c-text);
}

.vcard__specs li { display: flex; align-items: center; gap: 8px; min-width: 0; }
.vcard__specs span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vcard__specs .icon { flex: none; color: var(--c-yellow-deep); }

.vcard__cta {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: auto;
	padding-top: 22px;
	color: var(--c-night);
	font-family: var(--f-display);
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.vcard__cta .icon { width: 40px; height: 40px; padding: 10px; border-radius: 50%; background: var(--c-night); color: var(--c-yellow); transition: transform var(--t) var(--ease), background-color var(--t) var(--ease), color var(--t) var(--ease); }
.vcard:hover .vcard__cta .icon { transform: translateX(4px); background: var(--c-yellow); color: var(--c-night); }

/* Cartes sur fond sombre (vendus) */
.vlist--sold .vcard { background: var(--c-night-2); color: var(--c-white); box-shadow: 0 0 0 1px var(--c-line-dark); }
.vlist--sold .vcard__version { color: var(--c-muted-light); }
.vlist--sold .vcard__specs { border-top-color: var(--c-line-dark); color: var(--c-muted-light); }
.vlist--sold .actions-row { margin-top: clamp(40px, 5vw, 60px); }

/* Filtres */
.vfilters {
	position: relative;
	margin-bottom: clamp(28px, 4vw, 44px);
	padding: 18px 20px;
	border-radius: var(--radius-lg);
	background: var(--c-white);
	box-shadow: var(--shadow-card);
}

.vfilters__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.vfilters__count { margin: 0; font-family: var(--f-display); font-size: 18px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.vfilters__count strong { color: var(--c-yellow-deep); font-size: 26px; font-style: italic; }

.vfilters__toggle { display: none; align-items: center; gap: 8px; height: 44px; padding: 0 16px; border: 1.5px solid var(--c-night); border-radius: var(--radius); background: transparent; font-family: var(--f-display); font-size: 15px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; }

.vfilters__fields {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr)) auto;
	align-items: end;
	gap: 14px;
	margin-top: 14px;
}

.vfilters__field { display: grid; gap: 6px; }
.vfilters__label { font-family: var(--f-display); font-size: 13px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-muted); }

.vfilters select {
	width: 100%;
	height: 48px;
	padding: 0 38px 0 14px;
	border: 1.5px solid var(--c-paper-2);
	border-radius: var(--radius);
	background-color: var(--c-paper);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23020b1c' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	font-size: 15px;
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
	transition: border-color var(--t-fast) ease, background-color var(--t-fast) ease;
}

.vfilters select:hover,
.vfilters select:focus-visible { border-color: var(--c-yellow); background-color: var(--c-white); }

.vfilters__actions { display: flex; align-items: center; gap: 14px; }
.vfilters__reset { font-size: 14px; text-decoration: underline; text-decoration-color: var(--c-yellow); text-underline-offset: 3px; white-space: nowrap; }
.vfilters.is-enhanced .vfilters__actions .btn { display: none; }
.vfilters.is-loading { opacity: 0.6; pointer-events: none; }

@media (max-width: 1100px) {
	.vfilters__fields { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
	.vfilters__toggle { display: inline-flex; }
	.vfilters.is-enhanced .vfilters__fields { display: none; }
	.vfilters.is-enhanced .vfilters__fields.is-open { display: grid; }
	.vfilters__fields { grid-template-columns: 1fr 1fr; }
	.vfilters__actions { grid-column: 1 / -1; }
}

/* Aucun résultat */
.vempty { max-width: 640px; margin: 40px auto; text-align: center; }
.vempty .icon { margin: 0 auto 16px; color: var(--c-yellow-deep); }
.vempty h2 { font-size: clamp(28px, 3.4vw, 40px); }
.vempty p { color: var(--c-muted); }
.vempty--dark p { color: var(--c-muted-light); }

/* Pagination */
.pagination { margin-top: clamp(36px, 5vw, 56px); }
.pagination ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0; padding: 0; list-style: none; }
.pagination a,
.pagination span.current,
.pagination span.dots {
	display: grid;
	place-items: center;
	min-width: 48px;
	height: 48px;
	padding: 0 12px;
	border-radius: var(--radius);
	background: var(--c-white);
	box-shadow: var(--shadow-card);
	font-family: var(--f-display);
	font-size: 18px;
	font-weight: 700;
	transition: background-color var(--t) var(--ease), color var(--t) var(--ease);
}
.pagination a:hover { background: var(--c-night); color: var(--c-yellow); }
.pagination span.current { background: var(--c-yellow); color: var(--c-night); }
.pagination span.dots { background: transparent; box-shadow: none; }
.vlist--sold .pagination a,
.vlist--sold .pagination span.dots { background: var(--c-night-2); color: var(--c-white); }

/* Bandeau boutique Leboncoin */
.lbc-band {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 20px 32px;
	margin-top: clamp(48px, 6vw, 72px);
	padding: clamp(24px, 3vw, 36px) clamp(24px, 4vw, 48px);
	border-left: 5px solid var(--c-yellow);
	border-radius: var(--radius-lg);
	background: var(--c-white);
	box-shadow: var(--shadow-card);
}
.lbc-band__kicker { margin: 0 0 4px; color: var(--c-yellow-deep); font-family: var(--f-display); font-size: 14px; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; }
.lbc-band__title { margin: 0; font-family: var(--f-display); font-size: clamp(24px, 2.6vw, 32px); font-style: italic; font-weight: 800; line-height: 1.1; text-transform: uppercase; }

/* Fiche : en-tête */
.vhead {
	padding: calc(var(--header-h) + 28px) 0 34px;
	background:
		linear-gradient(115deg, transparent 70%, rgba(246, 196, 49, 0.07) 70% 72%, transparent 72%),
		radial-gradient(120% 140% at 100% 0%, var(--c-night-3) 0%, var(--c-night) 60%);
	color: var(--c-white);
}

.breadcrumb ol { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 26px; padding: 0; list-style: none; font-size: 14px; color: var(--c-muted-light); }
.breadcrumb li + li::before { content: "/"; margin-right: 6px; color: var(--c-yellow); }
.breadcrumb a:hover { color: var(--c-white); }

.vhead__row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 18px 40px; }
.vhead .kicker { margin-bottom: 10px; }
.vhead__title { margin: 0; font-size: clamp(38px, 5.4vw, 72px); }
.vhead__version { margin: 10px 0 0; color: var(--c-muted-light); font-size: 18px; }
.vhead__price { margin: 0; padding: 10px 22px 10px 30px; background: var(--c-yellow); color: var(--c-night); font-family: var(--f-display); font-size: clamp(32px, 4vw, 48px); font-style: italic; font-weight: 800; line-height: 1; clip-path: polygon(16px 0, 100% 0, 100% 100%, 0 100%); }
.vhead__sold { margin: 0; padding: 10px 24px; border: 2px solid var(--c-yellow); color: var(--c-yellow); font-family: var(--f-display); font-size: 28px; font-style: italic; font-weight: 800; letter-spacing: 0.3em; text-transform: uppercase; }
.vhead__demo { display: inline-block; margin: 0 0 14px; padding: 6px 12px; background: #b91c1c; color: #fff; font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }

/* Fiche : contenu */
.vsingle { padding: clamp(32px, 5vw, 56px) 0 var(--section-y); background: var(--c-paper); }
.vsingle__grid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: clamp(24px, 3vw, 44px); align-items: start; }
.vsingle__aside { position: sticky; top: calc(var(--header-h) + 20px); }

@media (max-width: 1000px) {
	.vsingle__grid { grid-template-columns: 1fr; }
	.vsingle__aside { position: static; }
}

/* Galerie */
.vgallery__main { position: relative; display: block; overflow: hidden; border-radius: var(--radius-lg); background: var(--c-night); box-shadow: var(--shadow-card); cursor: zoom-in; }
.vgallery__main-img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; transition: transform 1.2s var(--ease); }
.vgallery__main:hover .vgallery__main-img { transform: scale(1.03); }
.vgallery__zoom { position: absolute; right: 14px; bottom: 14px; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: rgba(2, 11, 28, 0.78); color: var(--c-white); font-size: 14px; font-weight: 600; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.vgallery__thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 10px; margin: 12px 0 0; padding: 0; list-style: none; }
.vgallery__thumbs a { display: block; overflow: hidden; border: 2px solid transparent; border-radius: var(--radius); transition: border-color var(--t-fast) ease, transform var(--t) var(--ease); }
.vgallery__thumbs a:hover { border-color: var(--c-yellow); transform: translateY(-2px); }
.vgallery__thumbs img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.vgallery__empty { display: grid; place-items: center; align-content: center; gap: 10px; aspect-ratio: 16 / 10; border-radius: var(--radius-lg); background: linear-gradient(135deg, var(--c-night-2), var(--c-night)); color: var(--c-muted-light); font-family: var(--f-display); letter-spacing: 0.14em; text-transform: uppercase; }

/* Informations clés */
.vkey { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin: 24px 0 0; padding: 0; overflow: hidden; border-radius: var(--radius-lg); background: var(--c-paper-2); list-style: none; box-shadow: var(--shadow-card); }
.vkey li { display: grid; gap: 2px; padding: 18px 20px; background: var(--c-white); }
.vkey .icon { margin-bottom: 6px; color: var(--c-yellow-deep); }
.vkey__label { color: var(--c-muted); font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; }
.vkey strong { font-family: var(--f-display); font-size: 22px; font-weight: 700; }
@media (max-width: 640px) { .vkey { grid-template-columns: 1fr 1fr; } }

.vblock { margin-top: 24px; padding: clamp(22px, 3vw, 34px); border-radius: var(--radius-lg); background: var(--c-white); box-shadow: var(--shadow-card); }
.vblock__title { margin-bottom: 18px; font-size: clamp(26px, 2.6vw, 34px); }
.vblock__title::after { content: ""; display: block; width: 48px; height: 3px; margin-top: 10px; background: var(--c-yellow); }

.vspecs { display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; margin: 0; }
.vspecs div { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--c-line-light); }
.vspecs dt { color: var(--c-muted); }
.vspecs dd { margin: 0; font-weight: 600; text-align: right; }
@media (max-width: 640px) { .vspecs { grid-template-columns: 1fr; } }

.vequip { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px 24px; margin: 0; padding: 0; list-style: none; }
.vequip li { display: flex; align-items: flex-start; gap: 10px; }
.vequip .icon { flex: none; margin-top: 4px; padding: 2px; border-radius: 50%; background: var(--c-yellow); color: var(--c-night); }

/* Encadré d'action */
.vbox { display: grid; gap: 12px; padding: 28px; border-radius: var(--radius-lg); background: var(--c-night); color: var(--c-white); box-shadow: var(--shadow-lift); }
.vbox__price { margin: 0; color: var(--c-yellow); font-family: var(--f-display); font-size: 46px; font-style: italic; font-weight: 800; line-height: 1; }
.vbox__title { margin: 0 0 4px; font-family: var(--f-display); font-size: 24px; font-weight: 700; line-height: 1.15; text-transform: uppercase; }
.vbox p { margin: 0; color: rgba(255, 255, 255, 0.8); }
.vbox__note { display: flex; align-items: center; gap: 8px; margin-bottom: 8px !important; font-size: 15px; }
.vbox__note .icon { color: var(--c-yellow); }
.vbox .btn--dark { --btn-bg: var(--c-night-3); --btn-bd: var(--c-night-3); }
.vbox .btn--outline { --btn-fg: var(--c-white); --btn-bd: rgba(255, 255, 255, 0.45); }
.vbox .btn--outline:hover { --btn-bg: var(--c-white); --btn-fg: var(--c-night); --btn-bd: var(--c-white); }
.vbox__lbc { display: inline-flex; align-items: center; justify-content: center; gap: 6px; margin-top: 4px; color: var(--c-yellow); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.vbox__ref { font-size: 13px; color: var(--c-muted-light) !important; text-align: center; }

/* Visionneuse */
.lightbox {
	width: 100vw;
	max-width: none;
	height: 100vh;
	max-height: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: rgba(2, 6, 14, 0.96);
	color: var(--c-white);
}
.lightbox[open] { display: grid; place-items: center; }
.lightbox::backdrop { background: rgba(2, 6, 14, 0.9); }
.lightbox__stage { display: grid; place-items: center; width: 100%; height: 100%; padding: 64px 72px; }
.lightbox__img { max-width: 100%; max-height: 100%; object-fit: contain; opacity: 0; transform: scale(0.98); transition: opacity 0.35s var(--ease), transform 0.35s var(--ease); }
.lightbox__img.is-ready { opacity: 1; transform: none; }
.lightbox__count { position: fixed; top: 22px; left: 50%; margin: 0; font-family: var(--f-display); font-size: 18px; font-weight: 700; letter-spacing: 0.2em; transform: translateX(-50%); }
.lightbox__btn { position: fixed; display: grid; place-items: center; width: 52px; height: 52px; border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 50%; background: rgba(255, 255, 255, 0.06); color: var(--c-white); cursor: pointer; transition: background-color var(--t-fast) ease, color var(--t-fast) ease; }
.lightbox__btn:hover { background: var(--c-yellow); border-color: var(--c-yellow); color: var(--c-night); }
.lightbox__close { top: 14px; right: 14px; }
.lightbox__prev { left: 14px; top: 50%; transform: translateY(-50%); }
.lightbox__next { right: 14px; top: 50%; transform: translateY(-50%); }

@media (max-width: 640px) {
	.lightbox__stage { padding: 64px 8px 90px; }
	.lightbox__prev,
	.lightbox__next { top: auto; bottom: 20px; transform: none; }
	.lightbox__prev { left: calc(50% - 64px); }
	.lightbox__next { right: calc(50% - 64px); }
}

/* Boutons des cartes : « Ce véhicule m'intéresse » + « Voir l'annonce » (Leboncoin) ou « Voir la fiche » */
.vcard__engine { grid-column: 1 / -1; }
.vcard__actions { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: auto; padding-top: 20px; }
.vcard__actions .btn { min-height: 46px; padding: 0 12px; font-size: 14px; letter-spacing: 0.05em; }
.vcard__actions .btn .icon { width: 15px; height: 15px; }
@media (max-width: 440px) { .vcard__actions { grid-template-columns: 1fr; } }