/**
 * Curseurs de calcul [ae_cout].
 *
 * Deux habillages : clair (par défaut, palette du site) et sombre, à poser
 * sur une bande foncée ou une photo.
 *
 * Le plugin fonctionne sans le thème AlterEgo : chaque variable de couleur a
 * une valeur de repli.
 */

.aeb-cout {
	--aeb-encre: var(--wp--preset--color--ink, #101010);
	--aeb-papier: var(--wp--preset--color--paper, #ffffff);
	--aeb-sable: var(--wp--preset--color--sand, #f5f2ed);
	--aeb-trait: var(--wp--preset--color--line, #e2ddd4);
	--aeb-bronze: var(--wp--preset--color--bronze, #9c7c4f);

	--aeb-fond: var(--aeb-sable);
	--aeb-texte: var(--aeb-encre);
	--aeb-discret: color-mix(in srgb, var(--aeb-encre) 62%, transparent);
	--aeb-bordure: var(--aeb-trait);
	--aeb-carte: var(--aeb-papier);
	--aeb-accent: var(--aeb-bronze);

	max-width: 760px;
	margin-inline: auto;
	padding: clamp(1.5rem, 4vw, 2.25rem) clamp(1.25rem, 4vw, 2.5rem) clamp(1.5rem, 4vw, 2rem);
	background: var(--aeb-fond);
	color: var(--aeb-texte);
	border: 1px solid var(--aeb-bordure);
	border-radius: 20px;
}

/* -- Habillage sombre ---------------------------------------------------- */

.aeb-cout--sombre {
	--aeb-fond: rgba(16, 16, 16, .82);
	--aeb-texte: #ffffff;
	--aeb-discret: rgba(255, 255, 255, .68);
	--aeb-bordure: rgba(255, 255, 255, .14);
	--aeb-carte: rgba(255, 255, 255, .07);
	--aeb-accent: #c9a870;

	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	box-shadow: 0 12px 34px rgba(0, 0, 0, .28);
}

/* -- Titre et chapô ------------------------------------------------------ */

.aeb-cout-titre {
	margin: 0 0 .5rem;
	font-size: clamp(1.25rem, 2.6vw, 1.5rem);
	line-height: 1.25;
	text-align: center;
	color: inherit;
}

.aeb-cout-chapo {
	margin: 0 auto 2rem;
	max-width: 46ch;
	font-size: .9375rem;
	line-height: 1.55;
	text-align: center;
	color: var(--aeb-discret);
}

/* -- Curseur ------------------------------------------------------------- */

.aeb-cout-label {
	display: block;
	margin-bottom: .75rem;
	font-size: .8125rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--aeb-discret);
}

.aeb-cout-range {
	display: block;
	width: 100%;
	height: 1.75rem;
	margin: 0;
	background: transparent;
	accent-color: var(--aeb-accent);
	cursor: pointer;
}

.aeb-cout-range:focus-visible {
	outline: 2px solid var(--aeb-accent);
	outline-offset: 4px;
	border-radius: 4px;
}

.aeb-cout-valeur {
	margin: .75rem 0 0;
	font-size: clamp(1.5rem, 4vw, 1.875rem);
	font-weight: 600;
	text-align: center;
	font-variant-numeric: tabular-nums;
}

/* -- Résultat ------------------------------------------------------------ */

.aeb-cout-resultat {
	display: grid;
	gap: 1.5rem;
	margin-top: 1.75rem;
	padding-top: 1.75rem;
	border-top: 1px solid var(--aeb-bordure);
}

@media (min-width: 620px) {
	.aeb-cout-resultat {
		grid-template-columns: 1fr minmax(min(100%, 230px), .8fr);
		align-items: stretch;
		gap: 2rem;
	}
}

.aeb-cout-sous-titre {
	margin: 0 0 .75rem;
	font-size: .8125rem;
	font-weight: 500;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--aeb-discret);
}

.aeb-cout-ligne {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding: .5rem 0;
	font-size: .9375rem;
	border-bottom: 1px solid var(--aeb-bordure);
}

.aeb-cout-ligne:last-child {
	border-bottom: 0;
}

.aeb-cout-ligne span:last-child {
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.aeb-cout-total {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 1.25rem 1.5rem;
	text-align: center;
	background: var(--aeb-carte);
	border: 1px solid var(--aeb-bordure);
	border-radius: 14px;
}

.aeb-cout-total p {
	margin: 0;
}

.aeb-cout-total-libelle {
	font-size: .8125rem;
	color: var(--aeb-discret);
}

.aeb-cout-total-montant {
	margin-top: .25rem !important;
	font-size: clamp(1.625rem, 4.5vw, 2rem);
	font-weight: 700;
	line-height: 1.15;
	font-variant-numeric: tabular-nums;
}

.aeb-cout-total-ht,
.aeb-cout-total-second {
	margin-top: .25rem !important;
	font-size: .8125rem;
	color: var(--aeb-discret);
	font-variant-numeric: tabular-nums;
}

/* -- Mention ------------------------------------------------------------- */

.aeb-cout-note {
	margin: 1.5rem 0 0;
	font-size: .8125rem;
	line-height: 1.5;
	color: var(--aeb-discret);
}

.aeb-cout-note a {
	color: inherit;
	text-underline-offset: 2px;
}

.aeb-cout-note a:hover {
	color: var(--aeb-accent);
}