/*
 * Jauge « frais de port offerts » du panier (inc/port-offert.php).
 *
 * Tunnel d'achat, register produit : la forme s'efface derrière la tâche.
 * Un pictogramme, une phrase qui porte le montant restant, une barre avec
 * ses deux bornes. Contrastes mesurés sur --jmg-fond-carte : texte 15.9:1,
 * or (remplissage et pictogramme) 6.55:1, succès 6.06:1. Le texte reste à
 * l'encre dans les deux états, seuls le pictogramme, la barre et le fond
 * changent, pour tenir l'AAA sur la phrase.
 */
.jmg-port-offert {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 1.25rem;
	align-items: start;
	margin: 0 0 1.5rem;
	padding: 1.25rem 1.5rem;
	background: var(--jmg-fond-carte);
	border: 1px solid var(--jmg-bordure);
	border-radius: 4px;
}

.jmg-port-offert[hidden] {
	display: none;
}

/* Pictogramme : colis en cours, coche une fois la livraison offerte. */
.jmg-port-offert__icone {
	display: grid;
	place-items: center;
	width: 3.25rem;
	height: 3.25rem;
	color: var(--jmg-or);
	background: var(--jmg-fond-bande);
	border: 1px solid var(--jmg-bordure-forte);
	border-radius: 50%;
}

.jmg-port-offert__icone svg {
	width: 1.75rem;
	height: 1.75rem;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.75;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.jmg-port-offert__icone .jmg-port-offert__coche {
	display: none;
}

.jmg-port-offert p.jmg-port-offert__titre {
	margin: 0;
	font-family: var(--jmg-corps);
	font-size: var(--jmg-t-sm);
	font-weight: 600;
	line-height: 1.4;
	max-width: none;
	color: var(--jmg-texte-doux);
}

.jmg-port-offert p.jmg-port-offert__message {
	margin: 0.25rem 0 0.875rem;
	max-width: none;
	font-size: var(--jmg-t-base);
	line-height: 1.4;
	color: var(--jmg-texte);
}

.jmg-port-offert__message strong {
	font-weight: 700;
	white-space: nowrap;
}

/* Barre : le remplissage est une pleine largeur mise à l'échelle, jamais un
   width animé (aucune propriété de mise en page n'est animée sur ce site). */
.jmg-port-offert__barre {
	height: 1rem;
	overflow: hidden;
	background: var(--jmg-fond-bande);
	border: 1px solid var(--jmg-bordure-forte);
	border-radius: 999px;
}

.jmg-port-offert__remplissage {
	display: block;
	width: 100%;
	height: 100%;
	background: var(--jmg-or);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 260ms cubic-bezier(0.25, 1, 0.5, 1);
}

/* Bornes de la barre : 0 et seuil, pour que la cible se lise d'un coup d'œil. */
.jmg-port-offert p.jmg-port-offert__echelle {
	display: flex;
	justify-content: space-between;
	margin: 0.375rem 0 0;
	max-width: none;
	font-size: var(--jmg-t-xs);
	font-weight: 600;
	line-height: 1.4;
	color: var(--jmg-texte-doux);
}

/* Seuil atteint : fond légèrement verdi, texte inchangé (encre). */
.jmg-port-offert.est-atteint {
	background: #eef4ec; /* 15.0:1 avec l'encre */
	border-color: var(--jmg-succes);
}

.jmg-port-offert.est-atteint .jmg-port-offert__icone {
	color: var(--jmg-succes);
	background: var(--jmg-fond-carte);
	border-color: var(--jmg-succes);
}

.jmg-port-offert.est-atteint .jmg-port-offert__colis {
	display: none;
}

.jmg-port-offert.est-atteint .jmg-port-offert__coche {
	display: block;
}

.jmg-port-offert.est-atteint p.jmg-port-offert__message {
	margin-bottom: 0;
	font-weight: 600;
}

.jmg-port-offert.est-atteint .jmg-port-offert__barre,
.jmg-port-offert.est-atteint p.jmg-port-offert__echelle {
	display: none;
}

/* Pays inconnu : l'offre est annoncée avec sa condition, sans barre. */
.jmg-port-offert.est-neutre p.jmg-port-offert__message {
	margin-bottom: 0;
}

.jmg-port-offert.est-neutre .jmg-port-offert__barre,
.jmg-port-offert.est-neutre p.jmg-port-offert__echelle {
	display: none;
}

@media (max-width: 600px) {
	.jmg-port-offert {
		grid-template-columns: 1fr;
		gap: 0.75rem;
		padding: 1rem;
	}

	.jmg-port-offert__icone {
		width: 2.75rem;
		height: 2.75rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.jmg-port-offert__remplissage {
		transition: none;
	}
}