/* ==========================================================================
   vendsmonentreprise.fr — Composants métier
   Badges « Dirigeant vérifié » / « À la une », fourchette de prix,
   bloc de valorisation calculée par la plateforme.
   Dépend des variables --vme- déclarées dans style.css du thème enfant.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Badge « Dirigeant vérifié » (vert)
   Usage : <span class="vme-badge-verifie">Dirigeant vérifié</span>
   -------------------------------------------------------------------------- */

.vme-badge-verifie {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 10px 4px 26px;
	background-color: var(--vme-vert-fond, #E6F4EC);
	color: var(--vme-vert, #1B8A5A);
	font-family: var(--vme-police, 'Inter', system-ui, sans-serif);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
	border-radius: 999px;
	white-space: nowrap;
	/* Coche SVG inline (couleur #1B8A5A encodée %231B8A5A) */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M13.5 4.5L6.5 11.5L3 8' stroke='%231B8A5A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: 8px center;
	background-size: 13px 13px;
}

/* --------------------------------------------------------------------------
   Badge « À la une » (or) — annonces payantes mises en avant
   Usage : <span class="vme-badge-alaune">À la une</span>
   -------------------------------------------------------------------------- */

.vme-badge-alaune {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 10px;
	background-color: var(--vme-or-fond, #FDF3E0);
	color: var(--vme-or, #B97A0F);
	font-family: var(--vme-police, 'Inter', system-ui, sans-serif);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
	border-radius: 999px;
	white-space: nowrap;
}

/* Petite étoile décorative devant le libellé « À la une » */
.vme-badge-alaune::before {
	content: "★";
	font-size: 11px;
	line-height: 1;
}

/* --------------------------------------------------------------------------
   Fourchette de prix (ex. : 280 – 350 k€)
   Usage : <span class="vme-fourchette-prix">280 – 350 k€</span>
   -------------------------------------------------------------------------- */

.vme-fourchette-prix {
	color: var(--vme-bleu, #1F4DBF);
	font-family: var(--vme-police, 'Inter', system-ui, sans-serif);
	font-size: 20px;
	font-weight: 700;
	white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Bloc de valorisation neutre calculée par la plateforme
   Usage :
   <div class="vme-valorisation">
       <p class="vme-valorisation__titre">Valorisation indicative</p>
       <p class="vme-valorisation__fourchette">310 – 380 k€</p>
       <p class="vme-valorisation__mention">Valorisation calculée par la
          plateforme — non modifiable par le vendeur</p>
   </div>
   -------------------------------------------------------------------------- */

.vme-valorisation {
	background-color: var(--vme-blanc, #FFFFFF);
	border: 1px solid var(--vme-bleu, #1F4DBF);
	border-left-width: 4px;
	border-radius: var(--vme-rayon-carte, 12px);
	box-shadow: var(--vme-ombre, 0 1px 3px rgba(15, 36, 86, .08));
	padding: 20px 24px;
	margin: 16px 0;
	font-family: var(--vme-police, 'Inter', system-ui, sans-serif);
}

.vme-valorisation__titre {
	margin: 0 0 4px;
	color: var(--vme-texte, #1B2334);
	font-size: 14px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .04em;
}

/* Fourchette de valorisation affichée en grand */
.vme-valorisation__fourchette {
	margin: 0 0 8px;
	color: var(--vme-bleu, #1F4DBF);
	font-size: 32px;
	font-weight: 700;
	line-height: 1.2;
}

/* Mention légale : italique, gris secondaire */
.vme-valorisation__mention {
	margin: 0;
	color: var(--vme-texte-secondaire, #5B6472);
	font-size: 13px;
	font-style: italic;
	line-height: 1.5;
}

/* ==========================================================================
   Responsive — breakpoint 768px
   ========================================================================== */

@media (max-width: 768px) {

	.vme-badge-verifie,
	.vme-badge-alaune {
		font-size: 12px;
		padding-top: 3px;
		padding-bottom: 3px;
	}

	.vme-fourchette-prix {
		font-size: 17px;
	}

	.vme-valorisation {
		padding: 16px;
	}

	.vme-valorisation__fourchette {
		font-size: 24px;
	}
}