/**
 * Comparateur Motors — rendu mobile.
 * Un tableau unique remplace la structure en colonnes séparées : chaque
 * caractéristique est une vraie ligne (label + valeurs), donc l'alignement
 * est garanti par le navigateur, sans script de synchronisation.
 */

/* Bug plugin : entre 768px et 1023px les deux tables sont masquées. */
@media (max-width: 1023px) {
	body.ve-compare-page .ve-compare-root .compare-desctop-table,
	body.ve-compare-page .stm-compare-cars-module .compare-desctop-table {
		display: flex !important;
		flex-wrap: nowrap;
	}
}

.ve-compare-table-wrap {
	display: none;
}

@media (max-width: 767px) {
	/*
	 * La structure d'origine n'est masquée que si le tableau reconstruit existe
	 * (classe posée par le script), pour ne jamais aboutir à une page vide.
	 */
	body.ve-compare-mobile .ve-compare-root.ve-compare-ready .stm-car-compare-row,
	body.ve-compare-mobile .ve-compare-root.ve-compare-ready .stm-compare-row,
	body.ve-compare-mobile .ve-compare-root.ve-compare-ready .row-compare-features,
	body.ve-compare-mobile .ve-compare-root.ve-compare-ready .add-compare-mobile,
	body.ve-compare-mobile .ve-compare-scroll,
	body.ve-compare-mobile .ve-compare-scroll-hint {
		display: none !important;
	}

	body.ve-compare-mobile .ve-compare-root > .container {
		padding-left: 10px;
		padding-right: 10px;
	}

	body.ve-compare-mobile .ve-compare-root .compare-title {
		font-size: 14px !important;
		line-height: 1.3 !important;
		margin: 0 0 10px !important;
	}

	.ve-compare-table-wrap {
		display: block;
		margin: 0 0 18px;
	}

	.ve-compare-table {
		width: 100%;
		table-layout: fixed;
		border-collapse: collapse;
		background: #fff;
	}

	/* Colonne des libellés : 26% laisse la place aux deux véhicules. */
	.ve-compare-table th.ve-compare-corner,
	.ve-compare-table th.ve-compare-label {
		width: 26%;
	}

	.ve-compare-table th,
	.ve-compare-table td {
		vertical-align: top;
		border-bottom: 1px solid #ececec;
		padding: 6px 5px;
		word-break: break-word;
		overflow-wrap: anywhere;
		hyphens: auto;
	}

	/* En-tête : vignette + nom du véhicule */
	.ve-compare-table thead th {
		border-bottom: 2px solid #e0e0e0;
		padding: 0 5px 8px;
		text-align: center;
	}

	.ve-compare-head-inner {
		display: block;
		text-decoration: none;
	}

	.ve-compare-thumb {
		display: block;
		margin: 0 auto 4px;
	}

	.ve-compare-thumb img {
		display: block;
		width: 100%;
		height: 38px;
		object-fit: contain;
		margin: 0 auto;
	}

	.ve-compare-name {
		display: block;
		font-size: 8px;
		font-weight: 700;
		line-height: 1.25;
		text-transform: uppercase;
	}

	.ve-compare-price {
		display: block;
		margin-top: 3px;
		font-size: 9px;
		font-weight: 700;
		line-height: 1.2;
	}

	.ve-compare-price-old {
		display: block;
		font-size: 7px;
		font-weight: 400;
		opacity: 0.6;
	}

	/* Titres de section : pleine largeur */
	.ve-compare-table tr.ve-compare-section td {
		font-size: 10px;
		font-weight: 700;
		line-height: 1.2;
		text-transform: uppercase;
		padding: 9px 5px 6px;
		border-bottom: 1px solid #d8d8d8;
	}

	.ve-compare-table th.ve-compare-label {
		font-size: 8px;
		font-weight: 600;
		line-height: 1.2;
		text-align: left;
		text-transform: uppercase;
	}

	.ve-compare-table td.ve-compare-value {
		font-size: 8px;
		font-weight: 400;
		line-height: 1.25;
		text-align: left;
	}

	/* Trois véhicules : on resserre encore un peu. */
	.ve-compare-table-wrap[data-vehicles="3"] .ve-compare-table th.ve-compare-corner,
	.ve-compare-table-wrap[data-vehicles="3"] .ve-compare-table th.ve-compare-label {
		width: 22%;
	}

	.ve-compare-table-wrap[data-vehicles="3"] .ve-compare-table th.ve-compare-label,
	.ve-compare-table-wrap[data-vehicles="3"] .ve-compare-table td.ve-compare-value,
	.ve-compare-table-wrap[data-vehicles="3"] .ve-compare-name {
		font-size: 7px;
	}
}