/* Litrimarché — affichage boutique + système de design partagé */

/* ---------------------------------------------------------------
   Tokens (chargés sur toutes les pages : les autres feuilles du
   plugin s'appuient dessus). Bleu = action / identité, jaune =
   étiquette prix / « vous êtes ici », neutres teintés de bleu.
   --------------------------------------------------------------- */

:root {
	--lm-blue: #0c3183;
	--lm-blue-hover: #0a2869;
	--lm-blue-deep: #071e52;
	--lm-blue-tint: #eef2fa;
	--lm-blue-tint-2: #dfe7f6;

	--lm-yellow: #ffed00;
	--lm-yellow-press: #f2e000;
	--lm-yellow-tint: #fffbd9;

	--lm-ink: #17223b;
	--lm-muted: #5c677d;
	--lm-line: #dfe4f0;
	--lm-line-strong: #b9c4de;
	--lm-bg-soft: #f6f8fc;

	--lm-success: #1e8a3c;
	--lm-success-bg: #e9f7ee;
	/* Rouge officiel du kit intégrateur (--c-red de la démo) */
	--lm-danger: #d00814;
	--lm-danger-bg: #fcebea;
	/* Gris de fond des visuels produits (--c-alabaster de la démo) */
	--lm-alabaster: #fafafa;

	--lm-radius: 12px;
	--lm-radius-s: 8px;

	--lm-shadow: 0 1px 2px rgba(12, 49, 131, 0.06), 0 4px 16px rgba(12, 49, 131, 0.07);
	--lm-shadow-lift: 0 8px 28px rgba(12, 49, 131, 0.14);

	--lm-transition: 0.15s ease;
}

@media (prefers-reduced-motion: reduce) {
	[class*='lm-'],
	[class*='lm-']::before,
	[class*='lm-']::after {
		transition: none !important;
		animation: none !important;
	}
}

/* Focus clavier visible sur tous les contrôles du plugin */

[class*='lm-']:focus-visible {
	outline: 3px solid rgba(12, 49, 131, 0.4);
	outline-offset: 2px;
	border-radius: var(--lm-radius-s);
}

/* ---------------------------------------------------------------
   Boutons génériques du plugin
   (déplacés ici depuis store-selector.css : utilisés partout)
   --------------------------------------------------------------- */

.lm-btn,
.lm-btn:visited {
	display: inline-block;
	padding: 10px 18px;
	border-radius: var(--lm-radius-s);
	border: 1px solid var(--lm-blue);
	background: var(--lm-blue);
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	text-decoration: none;
	transition: background var(--lm-transition), border-color var(--lm-transition),
		box-shadow var(--lm-transition);
}

.lm-btn:hover,
.lm-btn:focus {
	background: var(--lm-blue-hover);
	border-color: var(--lm-blue-hover);
	color: #fff;
	text-decoration: none;
}

.lm-btn--ghost,
.lm-btn--ghost:visited {
	background: transparent;
	color: var(--lm-blue);
}

.lm-btn--ghost:hover,
.lm-btn--ghost:focus {
	background: var(--lm-blue-tint);
	border-color: var(--lm-blue);
	color: var(--lm-blue-hover);
}

/* Jaune = action « magasin » (choisir / sélectionner) */

.lm-btn--yellow,
.lm-btn--yellow:visited {
	background: var(--lm-yellow);
	border-color: var(--lm-yellow);
	color: var(--lm-blue);
}

.lm-btn--yellow:hover,
.lm-btn--yellow:focus {
	background: var(--lm-yellow-press);
	border-color: var(--lm-yellow-press);
	color: var(--lm-blue-deep);
}

.lm-btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/* ---------------------------------------------------------------
   Prix — l'étiquette jaune, signature visuelle de l'enseigne
   --------------------------------------------------------------- */

.lm-price-tag {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 6px;
	background: var(--lm-yellow);
	color: var(--lm-blue);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* CTA prix (listes et fiches sans magasin choisi) */

.lm-price-cta,
.lm-price-cta:visited {
	display: inline-block;
	padding: 6px 14px;
	border: 0;
	border-radius: 999px;
	background: var(--lm-yellow);
	color: var(--lm-blue);
	font-size: 13px;
	font-weight: 700;
	line-height: 1.4;
	text-decoration: none;
	transition: background var(--lm-transition);
}

.lm-price-cta:hover,
.lm-price-cta:focus {
	background: var(--lm-yellow-press);
	color: var(--lm-blue-deep);
	text-decoration: none;
}

/* Encart fiche produit sans magasin */

/* CTA « Voir les disponibilités et prix dans votre magasin » (démo
   product-location, fiche produit sans magasin) : jaune texte bleu au repos,
   inversé (bleu texte jaune) au survol/focus/actif. Ouvre le drawer. */
.lm-no-store-notice {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 16px !important;
	width: 100% !important;
	margin: 16px 0 !important;
	padding: 14px 20px !important;
	border: 0 !important;
	border-radius: var(--lm-radius) !important;
	background: var(--lm-yellow) !important;
	color: var(--lm-blue) !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	text-align: center !important;
	line-height: 1.4 !important;
	cursor: pointer !important;
	transition: background var(--lm-transition), color var(--lm-transition) !important;
}

.lm-no-store-notice:hover,
.lm-no-store-notice:focus-visible,
.lm-no-store-notice:active {
	background: var(--lm-blue) !important;
	color: var(--lm-yellow) !important;
}

.lm-no-store-notice svg {
	flex: none !important;
	color: currentColor !important;
	fill: currentColor !important;
}

/* Éco-participation et tarif VIP sous le prix */

.lm-eco-part {
	display: block;
	font-size: 13px;
	font-weight: 400;
	color: var(--lm-muted);
	margin-top: 2px;
}

.lm-vip-price {
	display: block;
	font-size: 14px;
	font-weight: 700;
	color: var(--lm-blue);
	margin-top: 4px;
}

/* Option carte VIP */

.lm-vip-optin {
	border: 1px solid var(--lm-line);
	border-radius: var(--lm-radius-s);
	padding: 12px 14px;
	margin: 14px 0;
	background: var(--lm-blue-tint);
}

.lm-vip-optin label {
	display: flex;
	align-items: baseline;
	gap: 10px;
	cursor: pointer;
	margin: 0;
	font-size: 14px;
	line-height: 1.5;
}

.lm-vip-optin input[type='checkbox'] {
	accent-color: var(--lm-blue);
	flex: none;
}

.lm-vip-active {
	display: inline-block;
	padding: 8px 14px;
	border-radius: 999px;
	background: var(--lm-blue);
	color: var(--lm-yellow);
	font-weight: 700;
	font-size: 14px;
	margin: 14px 0;
}

.lm-vip-active::before {
	content: '✓ ';
}

/* Mention légale du magasin vendeur */

.lm-mention-legale {
	margin-top: 16px;
	font-size: 12px;
	color: var(--lm-muted);
	line-height: 1.5;
}

.lm-order-store {
	font-size: 15px;
}

/* Bouton d'ajout au panier en cours */

.single_add_to_cart_button.loading {
	opacity: 0.6;
	pointer-events: none;
}

/* ---------------------------------------------------------------
   Composants partagés fiche magasin / fiche produit : surligneur
   jaune de titre, carrousel scroll-snap (JS magasin-single.js,
   [data-lm-carousel]), bande avantages (partial avantages.php).
   --------------------------------------------------------------- */

.lm-hl {
	background: linear-gradient(var(--lm-yellow), var(--lm-yellow)) no-repeat 0 18% / 100% 82% !important;
	padding: 0 6px 0 4px !important;
	margin-left: -4px !important;
}

.lm-carousel {
	position: relative !important;
}

.lm-carousel__track {
	display: flex !important;
	gap: 20px !important;
	overflow-x: auto !important;
	scroll-snap-type: x mandatory !important;
	scrollbar-width: none !important;
	padding: 6px !important;
}

.lm-carousel__track::-webkit-scrollbar {
	display: none !important;
}

.lm-carousel__track > * {
	flex: none !important;
	scroll-snap-align: start !important;
}

.lm-carousel__track .lm-pcard {
	width: 272px !important;
}

.lm-carousel .lm-carousel__btn {
	position: absolute !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
	width: 44px !important;
	height: 44px !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 50% !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	cursor: pointer !important;
	box-shadow: var(--lm-shadow-lift) !important;
	z-index: 2 !important;
	transition: opacity var(--lm-transition) !important;
}

.lm-carousel .lm-carousel__btn--prev {
	left: -8px !important;
	background: #fff !important;
	color: var(--lm-blue) !important;
}

.lm-carousel .lm-carousel__btn--next {
	right: -8px !important;
	background: var(--lm-yellow) !important;
	color: var(--lm-blue) !important;
}

.lm-carousel__btn svg {
	fill: currentColor !important;
}

/* Suggestions de la fiche produit : flèches dans une marge réservée de
   chaque côté, pour ne plus recouvrir le texte et le prix des cartes. Sous
   782px la place manque : flèches posées sur le bord, comme les autres
   carrousels. (Panier : flèches sur la ligne du titre, cf. cart.css.) */
@media (min-width: 783px) {
	.lm-fp-comp .lm-carousel {
		padding: 0 56px !important;
	}

	.lm-fp-comp .lm-carousel .lm-carousel__btn--prev {
		left: 0 !important;
	}

	.lm-fp-comp .lm-carousel .lm-carousel__btn--next {
		right: 0 !important;
	}
}

/* Tout tient dans la piste : le script masque les flèches (attribut hidden),
   que le display:flex ci-dessus rendait sans effet. */
.lm-carousel .lm-carousel__btn[hidden] {
	display: none !important;
}

.lm-carousel .lm-carousel__btn:disabled {
	opacity: 0.35 !important;
	cursor: default !important;
}

/* ---------------------------------------------------------------
   Bandes de section génériques réutilisables (partials marques.php,
   categories.php…) : titre centré ruban, chapô, grille de tuiles.
   --------------------------------------------------------------- */

.lm-band {
	clear: both !important;
	margin-top: 56px !important;
}

.lm-band .lm-band__title {
	margin: 0 0 16px !important;
	color: var(--lm-blue) !important;
	font-size: 26px !important;
	font-weight: 700 !important;
	text-align: center !important;
}

.lm-band__chapo {
	margin: 0 auto 32px !important;
	max-width: 720px !important;
	color: var(--lm-ink) !important;
	font-size: 15px !important;
	text-align: center !important;
	line-height: 1.6 !important;
}

.lm-band--marques .lm-carousel {
	margin-top: 24px !important;
}

/* Tuiles familles « Que recherchez-vous ? » */

.lm-cats {
	display: grid !important;
	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)) !important;
	gap: 16px !important;
	margin-top: 28px !important;
}

.lm-cats__tile {
	position: relative !important;
	display: flex !important;
	align-items: flex-end !important;
	min-height: 150px !important;
	border-radius: var(--lm-radius) !important;
	overflow: hidden !important;
	background: var(--lm-blue) !important;
	text-decoration: none !important;
	box-shadow: var(--lm-shadow) !important;
	transition: box-shadow var(--lm-transition), transform var(--lm-transition) !important;
}

.lm-cats__tile:hover {
	box-shadow: var(--lm-shadow-lift) !important;
	transform: translateY(-2px) !important;
}

.lm-cats__tile img {
	position: absolute !important;
	inset: 0 !important;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
}

.lm-cats__name {
	position: relative !important;
	z-index: 1 !important;
	width: 100% !important;
	padding: 10px 12px !important;
	background: rgba(12, 49, 131, 0.88) !important;
	color: #fff !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	text-align: center !important;
}

.lm-cats__tile--sans-photo .lm-cats__name {
	background: transparent !important;
}

.lm-cats__tile--sans-photo {
	align-items: center !important;
	justify-content: center !important;
}

/* Cartes guides & conseils (partial guides.php) */

.lm-guides {
	display: grid !important;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
	gap: 20px !important;
	margin-top: 28px !important;
}

.lm-guides__card {
	display: flex !important;
	flex-direction: column !important;
	border: 1px solid var(--lm-line) !important;
	border-radius: var(--lm-radius) !important;
	overflow: hidden !important;
	background: #fff !important;
	box-shadow: var(--lm-shadow) !important;
	text-decoration: none !important;
	transition: box-shadow var(--lm-transition), transform var(--lm-transition) !important;
}

.lm-guides__card:hover {
	box-shadow: var(--lm-shadow-lift) !important;
	transform: translateY(-2px) !important;
}

.lm-guides__media {
	display: block !important;
	height: 170px !important;
	background: var(--lm-alabaster) !important;
}

.lm-guides__media img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
}

.lm-guides__body {
	display: flex !important;
	flex-direction: column !important;
	gap: 10px !important;
	padding: 18px 20px 20px !important;
}

.lm-guides__card .lm-guides__title {
	margin: 0 !important;
	color: var(--lm-blue) !important;
	font-size: 17px !important;
	font-weight: 700 !important;
}

.lm-guides__excerpt {
	color: var(--lm-ink) !important;
	font-size: 14px !important;
	line-height: 1.55 !important;
}

.lm-guides__more {
	margin-top: auto !important;
	align-self: flex-start !important;
	padding: 9px 22px !important;
	border-radius: 999px !important;
	background: var(--lm-yellow) !important;
	color: var(--lm-blue) !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	text-transform: uppercase !important;
}

.lm-band__cta-row {
	margin: 28px 0 0 !important;
	text-align: center !important;
}

.lm-band__cta {
	display: inline-block !important;
	padding: 13px 30px !important;
	border-radius: 999px !important;
	background: var(--lm-blue) !important;
	color: #fff !important;
	font-size: 13.5px !important;
	font-weight: 700 !important;
	text-transform: uppercase !important;
	text-decoration: none !important;
	transition: background var(--lm-transition) !important;
}

.lm-band__cta:hover {
	background: var(--lm-blue-hover) !important;
	color: #fff !important;
}

/* Bandeau « Venez nous rencontrer » (partial rencontrer.php) */

.lm-rencontrer {
	clear: both !important;
	display: grid !important;
	grid-template-columns: minmax(280px, 420px) minmax(0, 1fr) !important;
	margin-top: 56px !important;
	border-radius: var(--lm-radius) !important;
	overflow: hidden !important;
	background: var(--lm-alabaster) !important;
}

.lm-rencontrer__content {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 24px !important;
	padding: 44px 32px !important;
	text-align: center !important;
}

.lm-rencontrer__icon {
	color: var(--lm-blue) !important;
	fill: currentColor !important;
}

.lm-rencontrer .lm-rencontrer__title {
	margin: 0 !important;
	color: var(--lm-blue) !important;
	font-size: 24px !important;
	font-weight: 600 !important;
}

.lm-rencontrer__cta {
	display: inline-flex !important;
	align-items: center !important;
	gap: 10px !important;
	padding: 13px 28px !important;
	border-radius: 999px !important;
	background: var(--lm-yellow) !important;
	color: var(--lm-blue) !important;
	font-size: 13.5px !important;
	font-weight: 700 !important;
	text-transform: uppercase !important;
	text-decoration: none !important;
	transition: background var(--lm-transition) !important;
}

.lm-rencontrer__cta:hover {
	background: var(--lm-yellow-press) !important;
	color: var(--lm-blue) !important;
}

.lm-rencontrer__cta svg {
	fill: currentColor !important;
}

.lm-rencontrer__image img {
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
}

@media (max-width: 782px) {
	.lm-rencontrer {
		grid-template-columns: 1fr !important;
	}

	.lm-rencontrer__image {
		order: -1 !important;
		max-height: 220px !important;
	}
}

/* Section « 100% satisfaction client » (partial satisfaction.php) */

.lm-satisfaction {
	clear: both !important;
	width: 100vw !important;
	margin: 64px calc(50% - 50vw) 0 !important;
	padding: 56px 24px !important;
	background: var(--lm-alabaster) !important;
}

.lm-satisfaction__slogan {
	max-width: 1200px !important;
	margin: 0 auto 24px !important;
	color: var(--lm-blue) !important;
	font-size: 28px !important;
	font-weight: 600 !important;
}

.lm-satisfaction__grid {
	display: grid !important;
	grid-template-columns: minmax(0, 1fr) minmax(280px, 46%) !important;
	gap: 40px !important;
	align-items: center !important;
	max-width: 1200px !important;
	margin: 0 auto !important;
}

.lm-satisfaction .lm-satisfaction__title {
	margin: 0 0 16px !important;
	color: var(--lm-blue) !important;
	font-size: 28px !important;
	font-weight: 700 !important;
}

.lm-satisfaction__text {
	margin: 0 0 24px !important;
	color: var(--lm-ink) !important;
	font-size: 15px !important;
	line-height: 1.7 !important;
}

.lm-satisfaction__cta {
	display: inline-block !important;
	padding: 13px 30px !important;
	border-radius: 999px !important;
	background: var(--lm-blue) !important;
	color: #fff !important;
	font-size: 13.5px !important;
	font-weight: 700 !important;
	text-transform: uppercase !important;
	text-decoration: none !important;
}

.lm-satisfaction__photo {
	height: 320px !important;
	width: auto !important;
	border-radius: var(--lm-radius) !important;
	object-fit: cover !important;
}

@media (max-width: 900px) {
	.lm-satisfaction__grid {
		grid-template-columns: 1fr !important;
	}
}

/* Cartes de marque (fiche magasin + carrousel boutique) */

.lm-marques__card {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	min-width: 220px !important;
	height: 110px !important;
	padding: 0 26px !important;
	background: #fff !important;
	border: 1px solid var(--lm-line) !important;
	border-radius: var(--lm-radius) !important;
	box-shadow: var(--lm-shadow) !important;
}

.lm-marques__card img {
	display: block !important;
	max-width: 168px !important;
	max-height: 82px !important;
	width: auto !important;
	height: auto !important;
	object-fit: contain !important;
}

.lm-marques__card span {
	color: var(--lm-blue) !important;
	font-size: 20px !important;
	font-weight: 800 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.5px !important;
}

/* Carrousel d'avis clients (partial templates/parts/avis.php) */

.lm-avis {
	clear: both !important;
	margin-top: 64px !important;
}

.lm-avis .lm-avis__title {
	margin: 0 0 28px !important;
	color: var(--lm-blue) !important;
	font-size: 28px !important;
	font-weight: 700 !important;
	text-align: center !important;
}

.lm-avis__card {
	display: flex !important;
	flex-direction: column !important;
	width: 340px !important;
	padding: 24px 26px !important;
	border-radius: var(--lm-radius) !important;
	background: var(--lm-alabaster) !important;
}

.lm-avis__note {
	display: flex !important;
	align-items: center !important;
	gap: 3px !important;
	margin: 0 0 12px !important;
}

.lm-avis__note-chiffre {
	margin-right: 8px !important;
	color: var(--lm-blue) !important;
	font-size: 16px !important;
	font-weight: 700 !important;
}

.lm-avis__etoile {
	fill: var(--lm-line-strong) !important;
}

.lm-avis__etoile.is-pleine {
	fill: var(--lm-yellow) !important;
	stroke: #e3d200 !important;
	stroke-width: 1 !important;
}

.lm-avis .lm-avis__nom {
	margin: 0 0 8px !important;
	color: var(--lm-blue) !important;
	font-size: 18px !important;
	font-weight: 700 !important;
}

.lm-avis__texte {
	margin: 0 !important;
	color: var(--lm-blue) !important;
	font-size: 14px !important;
	line-height: 1.6 !important;
}

.lm-avis__date {
	margin: 12px 0 0 !important;
	color: var(--lm-muted) !important;
	font-size: 13px !important;
	text-align: right !important;
}

/* FAQ (partial templates/parts/faq.php) */

.lm-faq {
	clear: both !important;
	margin-top: 64px !important;
}

.lm-faq .lm-faq__title {
	margin: 0 0 28px !important;
	color: var(--lm-blue) !important;
	font-size: 28px !important;
	font-weight: 700 !important;
	text-align: center !important;
}

.lm-faq__grid {
	display: grid !important;
	grid-template-columns: 340px minmax(0, 1fr) !important;
	gap: 36px !important;
	align-items: start !important;
}

.lm-faq__banner img {
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	min-height: 280px !important;
	object-fit: cover !important;
	border-radius: var(--lm-radius) !important;
}

.lm-faq__item {
	border-bottom: 1px solid var(--lm-line) !important;
}

.lm-faq__item summary {
	display: flex !important;
	align-items: center !important;
	gap: 14px !important;
	padding: 16px 2px !important;
	color: var(--lm-blue) !important;
	font-size: 16px !important;
	font-weight: 600 !important;
	cursor: pointer !important;
	list-style: none !important;
}

.lm-faq__item summary::-webkit-details-marker {
	display: none !important;
}

.lm-faq__item summary:focus:not(:focus-visible) {
	outline: none !important;
}

.lm-faq__chevron {
	flex: none !important;
	width: 9px !important;
	height: 9px !important;
	border-right: 2.5px solid var(--lm-yellow) !important;
	border-bottom: 2.5px solid var(--lm-yellow) !important;
	transform: rotate(-45deg) !important;
	transition: transform var(--lm-transition) !important;
}

.lm-faq__item[open] > summary .lm-faq__chevron {
	transform: rotate(45deg) !important;
}

.lm-faq__reponse {
	padding: 0 2px 18px 23px !important;
	color: var(--lm-blue) !important;
	font-size: 14px !important;
	line-height: 1.7 !important;
}

/* Réponses saisies dans l'admin : paragraphes, listes, liens. */
.lm-faq__reponse p,
.lm-faq__reponse ul,
.lm-faq__reponse ol {
	margin: 0 0 0.8em !important;
}

.lm-faq__reponse > :last-child {
	margin-bottom: 0 !important;
}

.lm-faq__reponse ul,
.lm-faq__reponse ol {
	padding-left: 1.2em !important;
}

.lm-faq__reponse a {
	color: var(--lm-blue) !important;
	text-decoration: underline !important;
}

@media (max-width: 782px) {
	.lm-faq__grid {
		grid-template-columns: 1fr !important;
	}

	.lm-faq__banner img {
		min-height: 0 !important;
		max-height: 220px !important;
	}
}

/* Bande avantages (fond gris, icônes bleues) */

/* Bande bleue pleine largeur (démo) : le partial vit dans un conteneur
   centré, on déborde donc jusqu'aux bords de la fenêtre en calc 50vw.
   100vw inclut la barre de défilement : on coupe le débord horizontal
   uniquement sur les pages qui embarquent la bande. */
body:has(.lm-avantages),
body:has(.lm-fp-comp),
body:has(.lm-fp-bandeau),
body:has(.lm-satisfaction) {
	overflow-x: clip !important;
}

.lm-avantages {
	clear: both !important;
	width: 100vw !important;
	margin: 56px calc(50% - 50vw) 0 !important;
	padding: 56px 24px !important;
	border-radius: 0 !important;
	background: var(--lm-blue) !important;
	text-align: center !important;
}

.lm-avantages .lm-avantages__title {
	margin: 0 0 32px !important;
	color: #fff !important;
	font-size: 26px !important;
	font-weight: 700 !important;
}

.lm-avantages__list {
	display: flex !important;
	flex-wrap: wrap !important;
	justify-content: center !important;
	align-items: flex-start !important;
	gap: 28px 36px !important;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

.lm-avantages__list li {
	width: 140px !important;
	margin: 0 !important;
	color: #fff !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	line-height: 1.4 !important;
}

.lm-avantages__list svg {
	display: block !important;
	margin: 0 auto 12px !important;
	color: var(--lm-yellow) !important;
	fill: currentColor !important;
}

/* ---------------------------------------------------------------
   Pagination chiffrée partagée (recherche, boutique…) — composant
   assets/js/lm-pagination.js. Pastille jaune = page courante.
   --------------------------------------------------------------- */

.lm-pagination {
	display: flex !important;
	justify-content: center !important;
	align-items: center !important;
	gap: 8px !important;
	margin-top: 36px !important;
}

.lm-pagination[hidden] {
	display: none !important;
}

.lm-pagination .lm-pagination__btn {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	min-width: 36px !important;
	height: 36px !important;
	padding: 0 6px !important;
	border: 0 !important;
	border-radius: 50% !important;
	background: none !important;
	color: var(--lm-blue) !important;
	font-size: 16px !important;
	font-weight: 700 !important;
	cursor: pointer !important;
	transition: background var(--lm-transition) !important;
}

.lm-pagination .lm-pagination__btn:hover {
	background: var(--lm-blue-tint) !important;
}

.lm-pagination .lm-pagination__btn.is-current {
	background: var(--lm-yellow) !important;
	cursor: default !important;
}

.lm-pagination .lm-pagination__btn:disabled {
	opacity: 0.35 !important;
	cursor: default !important;
	background: none !important;
}

.lm-pagination__btn--arrow {
	font-size: 20px !important;
}

/* Variante liens serveur (paginate_links / templates PHP : actualités,
   commandes du compte…) — même rendu que les boutons JS. */

.lm-pagination .page-numbers {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	min-width: 36px !important;
	height: 36px !important;
	padding: 0 6px !important;
	border: 0 !important;
	border-radius: 50% !important;
	background: none !important;
	color: var(--lm-blue) !important;
	font-size: 16px !important;
	font-weight: 700 !important;
	text-decoration: none !important;
	transition: background var(--lm-transition) !important;
}

.lm-pagination a.page-numbers:hover {
	background: var(--lm-blue-tint) !important;
}

.lm-pagination .page-numbers.current {
	background: var(--lm-yellow) !important;
}

/* Confirmation d'ajout au panier + toasts partagés */

.lm-toast {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 100000;
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 14px 18px;
	border-radius: var(--lm-radius-s);
	border-left: 4px solid var(--lm-yellow);
	background: var(--lm-blue);
	color: #fff;
	font-size: 14px;
	box-shadow: var(--lm-shadow-lift);
	animation: lm-toast-in 0.25s ease;
	max-width: calc(100vw - 40px);
}

.lm-toast a,
.lm-toast a:visited {
	color: var(--lm-yellow);
	font-weight: 700;
	text-decoration: underline;
	white-space: nowrap;
}

.lm-toast--error {
	background: var(--lm-danger);
	border-left-color: #fff;
}

.lm-toast.is-leaving {
	opacity: 0;
	transform: translateY(8px);
	transition: opacity 0.3s ease, transform 0.3s ease;
}

@keyframes lm-toast-in {
	from {
		opacity: 0;
		transform: translateY(8px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

/* ---------------------------------------------------------------
   Carte produit maquette (.lm-pcard) — composant partagé : fiche
   magasin (sélection de l'expert, offre du moment) et boutique.
   Largeur fluide (grille boutique) ; largeur fixe posée par le
   contexte carrousel dans magasin-single.css. !important : Astra.
   --------------------------------------------------------------- */

.lm-pcard {
	position: relative !important;
	display: flex !important;
	flex-direction: column !important;
	background: #fff !important;
	border: 1px solid var(--lm-line) !important;
	border-radius: var(--lm-radius) !important;
	box-shadow: 0 1px 3px rgba(12, 49, 131, 0.05) !important;
	overflow: hidden !important;
}

/* Variante boutique : pas de bouton Acheter, la carte entière est cliquable
   (lien étendu depuis le titre). Le CTA magasin reste cliquable au-dessus. */

.lm-pcard--link .lm-pcard__name a::after {
	content: '' !important;
	position: absolute !important;
	inset: 0 !important;
	z-index: 0 !important;
}

.lm-pcard--link:hover {
	box-shadow: var(--lm-shadow-lift) !important;
	border-color: var(--lm-line-strong) !important;
	transform: translateY(-2px) !important;
	transition: box-shadow var(--lm-transition), transform var(--lm-transition), border-color var(--lm-transition) !important;
}

.lm-pcard--link:hover .lm-pcard__name a {
	text-decoration: none !important;
}

.lm-pcard__pricing--cta {
	position: relative !important;
	z-index: 1 !important;
}

.lm-pcard__badge {
	position: absolute !important;
	top: 12px !important;
	right: 12px !important;
	z-index: 1 !important;
	padding: 5px 10px !important;
	border-radius: 4px !important;
	background: var(--lm-blue) !important;
	color: #fff !important;
	font-size: 11px !important;
	font-weight: 700 !important;
	text-transform: uppercase !important;
}

.lm-pcard__media {
	display: block !important;
	position: relative !important; /* Repère de la pastille d'opération. */
}

/* Visuel : hauteur 178px de la démo, packshot entier (jamais recadré). */

.lm-pcard__media img {
	width: 100% !important;
	height: 178px !important;
	/* contain : photo entière, jamais recadrée (fond blanc comme les packshots). */
	object-fit: contain !important;
	padding: 0 !important;
	background: #fff !important;
}

/* Pastille d'opération commerciale (Op_Pastilles) : en bas à droite du
   visuel, le haut droit étant celui du badge de la carte et, sur la fiche,
   de la loupe de la galerie. Ne capte pas les clics (lien, zoom). */

.lm-op-pastille {
	position: absolute !important;
	right: 10px !important;
	bottom: 10px !important;
	z-index: 2 !important;
	width: 80px !important;
	height: 80px !important;
	pointer-events: none !important;
}

.lm-op-pastille[hidden] {
	display: none !important;
}

/* Sélecteur renforcé : les règles « .lm-xxx .lm-pcard__media img » des
   listes (hauteur 140 à 460 px, fond blanc) passeraient sinon devant. */
.lm-pcard__media .lm-op-pastille .lm-op-pastille__img,
.lm-op-pastille .lm-op-pastille__img {
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	object-fit: contain !important;
	padding: 0 !important;
	background: none !important;
	border-radius: 0 !important;
}

.lm-op-pastille--fiche {
	right: 16px !important;
	bottom: 16px !important;
	z-index: 9 !important;
	width: 140px !important;
	height: 140px !important;
}

@media (max-width: 600px) {
	.lm-op-pastille {
		width: 60px !important;
		height: 60px !important;
	}

	.lm-op-pastille--fiche {
		width: 100px !important;
		height: 100px !important;
	}
}

.lm-pcard__body {
	display: flex !important;
	flex-direction: column !important;
	flex: 1 !important;
	padding: 2px 16px 18px !important;
}

/* Marque et nom : même graisse et même taille, sur deux lignes (démo :
   un seul titre "Marque<br>Nom" en semibold). */

.lm-pcard__brand {
	margin: 0 !important;
	color: var(--lm-blue) !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	line-height: 1.35 !important;
}

.lm-pcard .lm-pcard__name {
	margin: 2px 0 0 !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	line-height: 1.35 !important;
}

.lm-pcard__name a {
	color: var(--lm-blue) !important;
	text-decoration: none !important;
}

.lm-pcard__name a:hover {
	text-decoration: underline !important;
}

.lm-pcard__desc,
.lm-pcard__cat {
	margin: 3px 0 0 !important;
	color: var(--lm-muted) !important;
	font-size: 13px !important;
	line-height: 1.5 !important;
}

.lm-pcard__dim {
	margin: 8px 0 0 !important;
	color: var(--lm-ink) !important;
	font-size: 14px !important;
	font-weight: 700 !important;
}

.lm-pcard__pricing {
	margin-top: auto !important;
	padding-top: 14px !important;
}

.lm-pcard__pricing--cta {
	display: flex !important;
	justify-content: center !important;
}

/* Prix « surligné au marqueur » (retour client 30/07/2026, 2e passe : les
   fonds pleins faisaient mal aux yeux) : plus aucun cadre ni fond — gros
   prix rouge posé sur un trait de marqueur jaune (le surlignage .lm-hl des
   titres), mention sous le prix, visuel carte/sticker à droite. */

.lm-pcard__pricebox {
	position: relative !important;
	display: flex !important;
	flex-direction: column !important;
	justify-content: center !important;
	align-items: flex-start !important;
	gap: 4px !important;
	min-height: 60px !important;
	margin-left: 0 !important;
	padding: 4px !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
}

.lm-pcard__pricebox::before,
.lm-pcard__pricebox::after {
	content: none !important;
}

/* Réserve la place du visuel : carte VIP sur le tarif membre, sticker
   « 100% prix bas » sur les produits sans tarif membre. */

.lm-pcard__pricebox--card {
	padding-right: 74px !important;
}

/* Sticker image officiel (assets/img/card-prixbas.png, fourni 27/07) */

.lm-pcard__flag {
	position: absolute !important;
	right: 8px !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
	z-index: 1 !important;
	width: 58px !important;
	height: auto !important;
}

/* Prix typographié comme la démo : entier en gros, décimales plus petites
   en maigre, "€*" en exposant. */

.lm-pcard__amount {
	color: var(--lm-danger) !important;
	font-size: 28px !important;
	font-weight: 800 !important;
	line-height: 1 !important;
}

.lm-pcard__amount em {
	font-size: 17px !important;
	font-style: normal !important;
	font-weight: 400 !important;
}

.lm-pcard__amount sup {
	font-size: 14px !important;
	font-weight: 700 !important;
	top: -0.55em !important;
	position: relative !important;
	line-height: 0 !important;
}

/* Visuel carte VIP CLUB officiel (assets/img/card-vipclub.png, fourni 27/07) */

.lm-pcard__vipimg {
	position: absolute !important;
	right: 10px !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
	z-index: 1 !important;
	width: 54px !important;
	height: auto !important;
	border-radius: 4px !important;
}

/* Mention sous le prix (« Avec la carte VIP Club », plus tard « Toutes
   remises incluses » pour les soldes) : petit texte rouge, sans fond. */

.lm-pcard__band {
	position: static !important;
	padding: 0 0 0 4px !important;
	background: transparent !important;
	color: var(--lm-danger) !important;
	font-size: 10px !important;
	font-weight: 700 !important;
	text-align: left !important;
	text-transform: uppercase !important;
	line-height: 1.25 !important;
}

/* Marqueur jaune derrière le montant (même trait que .lm-hl, posé sur la
   moitié basse des chiffres). */

.lm-pcard__pricebox .lm-pcard__amount {
	background: linear-gradient(var(--lm-yellow), var(--lm-yellow)) no-repeat 0 82% / 100% 42% !important;
	padding: 0 6px 2px 4px !important;
}

/* Promo de l'offre du moment : la pastille de remise prend la place du
   visuel (carte VIP / sticker), le prix habituel passe dessous, barré. */

.lm-pcard__pricebox--promo {
	padding-right: 74px !important;
}

.lm-pcard__pct {
	position: absolute !important;
	right: 8px !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
	padding: 6px 9px !important;
	border-radius: 4px !important;
	background: var(--lm-danger) !important;
	color: #fff !important;
	font-size: 15px !important;
	font-weight: 800 !important;
	line-height: 1 !important;
}

.lm-pcard__was {
	padding-left: 4px !important;
	color: var(--lm-muted) !important;
	font-size: 12px !important;
	line-height: 1.25 !important;
}

.lm-pcard__eco {
	margin: 5px 0 0 !important;
	color: var(--lm-muted) !important;
	font-size: 11px !important;
	text-align: right !important;
}

.lm-pcard__buy {
	display: block !important;
	margin-top: 14px !important;
	padding: 12px !important;
	border-radius: 30px !important;
	background: var(--lm-blue) !important;
	color: #fff !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	text-align: center !important;
	text-transform: uppercase !important;
	text-decoration: none !important;
	transition: background var(--lm-transition) !important;
}

.lm-pcard__buy:hover {
	background: var(--lm-blue-hover) !important;
	color: #fff !important;
}

/* ---------------------------------------------------------------
   Briques home [litrimarche_derniers_articles] (posées en widget
   Shortcode dans Elementor — module home-bricks).
   --------------------------------------------------------------- */

.lm-articles--grid {
	display: grid !important;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
	gap: 32px !important;
}

.lm-articles__title {
	margin: 0 !important;
	font-size: 18px !important;
	font-weight: 700 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.3px !important;
	line-height: 1.35 !important;
}

.lm-articles__title a {
	color: var(--lm-blue) !important;
	text-decoration: none !important;
}

/* .lm-articles__title a:hover {
	text-decoration: underline !important;
} */

.lm-articles__excerpt {
	margin: 8px 0 0 !important;
	color: var(--lm-blue) !important;
	font-size: 15px !important;
	line-height: 1.5 !important;
}

.lm-articles__more {
	display: inline-block !important;
	color: var(--lm-blue) !important;
	font-weight: 700 !important;
	font-size: 14px !important;
	text-transform: uppercase !important;
	text-decoration: none !important;
}

/* .lm-articles__more:hover {
	text-decoration: underline !important;
} */

/* ---------- Présentation d'un produit ([litrimarche_produit]) ----------
   Deux colonnes : visuel à gauche, identité et prix à droite. Rien à voir
   avec .lm-pcard, qui reste la carte de grille. */

.lm-hero {
	display: grid !important;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
	align-items: center !important;
	gap: 40px !important;
	max-width: 1000px !important;
	margin: 0 auto !important;
	padding: 28px !important;
	border-radius: 24px !important;
	background: var(--lm-alabaster) !important;
}

.lm-hero__media {
	position: relative !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	overflow: hidden !important;
	border-radius: 18px !important;
	background: #fff !important;
}

.lm-hero__media img {
	display: block !important;
	width: 100% !important;
	height: auto !important;
}

.lm-hero__badge {
	position: absolute !important;
	top: 16px !important;
	left: 16px !important;
	z-index: 1 !important;
	padding: 7px 16px !important;
	border-radius: 30px !important;
	background: var(--lm-yellow) !important;
	color: var(--lm-blue) !important;
	font-size: 12px !important;
	font-weight: 800 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.02em !important;
}

/* ---------- Colonne de droite ---------- */

.lm-hero__brand {
	margin: 0 0 4px !important;
	color: var(--lm-muted) !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.04em !important;
}

.lm-hero__name {
	margin: 0 !important;
	font-size: 30px !important;
	line-height: 1.15 !important;
}

.lm-hero__name a {
	color: var(--lm-blue) !important;
	font-weight: 800 !important;
	text-decoration: none !important;
}

.lm-hero__type {
	margin: 6px 0 0 !important;
	color: var(--lm-muted) !important;
	font-size: 14px !important;
}

.lm-hero__dim {
	margin: 4px 0 0 !important;
	color: var(--lm-ink) !important;
	font-size: 14px !important;
	font-weight: 700 !important;
}

.lm-hero__desc {
	margin: 14px 0 0 !important;
	color: var(--lm-ink) !important;
	font-size: 15px !important;
	line-height: 1.55 !important;
}

.lm-hero__caract {
	margin: 18px 0 0 !important;
	padding: 0 !important;
	border-top: 1px solid var(--lm-line) !important;
	list-style: none !important;
}

.lm-hero__caract li {
	display: flex !important;
	align-items: baseline !important;
	justify-content: space-between !important;
	gap: 16px !important;
	margin: 0 !important;
	padding: 9px 0 !important;
	border-bottom: 1px solid var(--lm-line) !important;
	font-size: 14px !important;
}

.lm-hero__caract span {
	color: var(--lm-muted) !important;
}

.lm-hero__caract strong {
	color: var(--lm-ink) !important;
	font-weight: 700 !important;
	text-align: right !important;
}

/* ---------- Prix : même langage que la fiche produit ---------- */

.lm-hero__price {
	margin-top: 22px !important;
}

.lm-hero__price-lead {
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: center !important;
	gap: 4px 14px !important;
}

.lm-hero__amount {
	padding: 0 6px 2px 4px !important;
	background: linear-gradient(var(--lm-yellow), var(--lm-yellow)) no-repeat 0 82% / 100% 42% !important;
	color: var(--lm-danger) !important;
	font-size: 34px !important;
	font-weight: 800 !important;
	line-height: 1 !important;
}

.lm-hero__amount em {
	font-size: 20px !important;
	font-style: normal !important;
	font-weight: 400 !important;
}

.lm-hero__amount sup {
	position: relative !important;
	top: -0.55em !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	line-height: 0 !important;
}

.lm-hero__vipimg,
.lm-hero__flag {
	width: 58px !important;
	height: auto !important;
	border-radius: 4px !important;
}

.lm-hero__flag {
	border-radius: 0 !important;
}

.lm-hero__band {
	flex-basis: 100% !important;
	padding-left: 4px !important;
	color: var(--lm-danger) !important;
	font-size: 11px !important;
	font-weight: 700 !important;
	text-transform: uppercase !important;
}

/* Second tarif : ligne compacte, jamais un second gros prix. */

.lm-hero__alt {
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
	margin: 8px 0 0 !important;
	padding-left: 4px !important;
	font-size: 12px !important;
}

.lm-hero__alt-label {
	color: var(--lm-muted) !important;
	font-weight: 700 !important;
	text-transform: uppercase !important;
}

.lm-hero__alt-amount {
	color: var(--lm-muted) !important;
	font-size: 16px !important;
	font-weight: 800 !important;
}

.lm-hero__eco {
	margin: 8px 0 0 !important;
	padding-left: 4px !important;
	color: var(--lm-muted) !important;
	font-size: 11.5px !important;
}

.lm-hero__cta {
	display: inline-block !important;
	margin-top: 22px !important;
	padding: 14px 34px !important;
	border-radius: 30px !important;
	background: var(--lm-blue) !important;
	color: #fff !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	text-transform: uppercase !important;
	text-decoration: none !important;
	transition: background var(--lm-transition) !important;
}

.lm-hero__cta:hover {
	background: var(--lm-ink) !important;
	color: #fff !important;
}

.lm-hero__nostore {
	margin: 20px 0 0 !important;
}

@media (max-width: 860px) {
	.lm-hero {
		grid-template-columns: minmax(0, 1fr) !important;
		gap: 24px !important;
		padding: 20px !important;
	}

	.lm-hero__name {
		font-size: 24px !important;
	}

	.lm-hero__amount {
		font-size: 28px !important;
	}
}

/* Retour en haut de la boutique après un changement de filtre ou de page :
   l'en-tête du site est collant et recouvrait les premiers résultats. La
   marge de défilement laisse sa hauteur libre, sans décaler quoi que ce soit
   en dehors du défilement. */

#lm-boutique {
	scroll-margin-top: 120px;
}