/* JSEM Comparateur — styles légers, surchargeables via les variables ci-dessous
   (par défaut alignées sur les couleurs globales Elementor). */
:root {
	--jsem-accent: var(--e-global-color-accent, #0b6bcb);
	--jsem-accent-contrast: #fff;
	--jsem-best: var(--e-global-color-secondary, #0f8a4b);
	--jsem-text: var(--e-global-color-text, #1d2327);
	--jsem-muted: #646970;
	--jsem-border: #e2e4e7;
	--jsem-bg: #fff;
	--jsem-bg-soft: #f6f7f7;
	--jsem-radius: 10px;
}

.jsem-comp { color: var(--jsem-text); margin: 1.5rem 0; }
.jsem-comp__titre { font-weight: 700; font-size: 1.15rem; margin: 0 0 .75rem; }
.jsem-comp__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }

.jsem-comp__offre {
	display: grid;
	grid-template-columns: minmax(110px, 1.2fr) 2fr auto auto;
	align-items: center;
	gap: .75rem 1rem;
	padding: .85rem 1rem;
	background: var(--jsem-bg);
	border: 1px solid var(--jsem-border);
	border-radius: var(--jsem-radius);
}
.jsem-comp__offre.is-best { border-color: var(--jsem-best); box-shadow: 0 0 0 1px var(--jsem-best) inset; }

.jsem-comp__marchand { display: flex; flex-direction: column; gap: .25rem; align-items: flex-start; }
.jsem-comp__marchand img { display: block; width: auto; max-width: 96px; height: 32px; object-fit: contain; }
.jsem-comp__nom { font-weight: 700; }
.jsem-comp__badge {
	font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
	color: var(--jsem-best); background: color-mix(in srgb, var(--jsem-best) 12%, transparent);
	padding: .15rem .45rem; border-radius: 999px;
}

.jsem-comp__infos { display: flex; flex-direction: column; gap: .15rem; font-size: .88rem; color: var(--jsem-muted); }
.jsem-comp__horodatage { font-size: .78rem; }

.jsem-comp__prix { text-align: right; white-space: nowrap; display: flex; flex-direction: column; align-items: flex-end; }
.jsem-comp__prix del { color: var(--jsem-muted); font-size: .85rem; }
.jsem-comp__prix strong { font-size: 1.3rem; line-height: 1.1; }

.jsem-comp__cta,
.jsem-best__cta {
	display: inline-flex; align-items: center; justify-content: center;
	min-height: 44px; padding: 0 1.1rem; border-radius: 8px;
	background: var(--jsem-accent); color: var(--jsem-accent-contrast) !important;
	font-weight: 700; text-decoration: none !important; white-space: nowrap;
	transition: filter .15s ease;
}
.jsem-comp__cta:hover, .jsem-best__cta:hover { filter: brightness(1.08); }
.jsem-comp__cta:focus-visible, .jsem-best__cta:focus-visible { outline: 3px solid var(--jsem-text); outline-offset: 2px; }

.jsem-comp__mention { font-size: .78rem; color: var(--jsem-muted); margin: .75rem 0 0; line-height: 1.45; }
.jsem-comp--vide { padding: 1rem; background: var(--jsem-bg-soft); border-radius: var(--jsem-radius); }

@media (max-width: 640px) {
	.jsem-comp__offre { grid-template-columns: 1fr auto; }
	.jsem-comp__infos { grid-column: 1 / -1; grid-row: 2; }
	.jsem-comp__cta { grid-column: 1 / -1; }
}

/* Meilleur prix (cartes Loop Grid, en-tête de fiche) */
.jsem-best { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .5rem; }
.jsem-best__label { width: 100%; font-size: .8rem; color: var(--jsem-muted); }
.jsem-best__prix { font-size: 1.6rem; font-weight: 800; line-height: 1.1; }
.jsem-best__marchand { color: var(--jsem-muted); font-size: .9rem; }
.jsem-best__horodatage { display: block; margin-top: 6px; color: var(--jsem-muted); font-size: .75rem; line-height: 1.4; }
.jsem-best__cta { margin-top: .5rem; width: 100%; }
.jsem-best--vide { color: var(--jsem-muted); }

/* Historique : hauteur réservée, aucun décalage de mise en page. */
.jsem-histo { margin: 1.5rem 0; }
.jsem-histo__resume { font-size: .95rem; margin-bottom: .75rem; }
.jsem-histo__canvas { position: relative; width: 100%; aspect-ratio: 16 / 7; min-height: 220px; }
.jsem-histo__canvas canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; }

.jsem-maj { font-size: .82rem; color: var(--jsem-muted); }