/* E42 Proximités — feuille de style (v1.1.2) */

.e42-prox {
	--e42-prox-icon-color: #9a8a73;
	--e42-prox-text-color: #9a8a73;
	--e42-prox-para-color: #7a7a7a;
	--e42-prox-icon-size: 40px;
	--e42-prox-stroke: 1.2;
	--e42-prox-icon-gap: 14px;
	--e42-prox-para-gap: 10px;
	--e42-prox-sep-color: #a99884;
	--e42-prox-sep-stroke: 1;
	--e42-prox-col-gap: 16px;
	--e42-prox-row-gap: 32px;
	--e42-prox-slide-width: 62%;
	--e42-prox-progress-width: 180px;
	--e42-prox-progress-height: 4px;
	--e42-prox-progress-track: #e7e1d8;
	--e42-prox-progress-fill: #9a8a73;
	--e42-prox-progress-gap: 24px;
	width: 100%;
}

.e42-prox__track {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	flex-wrap: wrap;
	gap: var(--e42-prox-row-gap) var(--e42-prox-col-gap);
}

.e42-prox__item {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: var(--e42-prox-icon-gap);
}

.e42-prox__icon {
	color: var(--e42-prox-icon-color);
	width: var(--e42-prox-icon-size);
	height: var(--e42-prox-icon-size);
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}

.e42-prox__icon svg {
	width: 100%;
	height: 100%;
	display: block;
	stroke-width: var(--e42-prox-stroke);
}

/* Icône Elementor (font / SVG uploadé) */
.e42-prox__icon i,
.e42-prox__icon svg:not([viewBox="0 0 48 48"]) {
	font-size: var(--e42-prox-icon-size);
}

.e42-prox__label {
	color: var(--e42-prox-text-color);
	font-size: 12px;
	letter-spacing: 0.5px;
	line-height: 1.4;
	margin: 0;
}

/* Paragraphe optionnel sous le titre (contenu WYSIWYG) */
.e42-prox__text {
	color: var(--e42-prox-para-color);
	font-size: 13px;
	line-height: 1.6;
	margin: calc(var(--e42-prox-para-gap) - var(--e42-prox-icon-gap)) 0 0;
	max-width: var(--e42-prox-para-maxw, none);
}

/* Normalise les marges du contenu de l'éditeur (p, listes, etc.). */
.e42-prox__text > :first-child {
	margin-top: 0;
}
.e42-prox__text > :last-child {
	margin-bottom: 0;
}
.e42-prox__text p {
	margin: 0 0 0.6em;
}
.e42-prox__text ul,
.e42-prox__text ol {
	margin: 0 0 0.6em;
	padding-left: 1.2em;
	text-align: left;
}
.e42-prox__text a {
	color: inherit;
	text-decoration: underline;
}

/* Séparateur : trait vertical + losange (SVG administrable), entièrement réglable.
   Par défaut : pleine hauteur de la rangée, ratio conservé, losange centré. */
.e42-prox__sep {
	flex: 0 0 auto;
	align-self: var(--e42-prox-sep-align, stretch);
	color: var(--e42-prox-sep-color);
	display: flex;
	align-items: center;
	justify-content: center;
	/* Séparateur strictement droit (vertical). On neutralise toute transform
	   (rotation/skew) héritée du thème ou d'un réglage global Elementor. */
	transform: none !important;
	rotate: none !important;
}

.e42-prox__sep svg {
	height: var(--e42-prox-sep-height, 100%);
	width: var(--e42-prox-sep-width, auto);
	max-width: 100%;
	display: block;
	fill: currentColor;
	stroke-width: var(--e42-prox-sep-stroke);
	transform: none !important;
	rotate: none !important;
}

/* Séparateur par défaut (trait) : pas de remplissage */
.e42-prox__sep svg[viewBox="0 0 30 119"] {
	fill: none;
	stroke: currentColor;
}

/* Barre de progression (mode slide uniquement, masquée par défaut) */
.e42-prox__progress {
	display: none;
	width: var(--e42-prox-progress-width);
	max-width: 100%;
	height: var(--e42-prox-progress-height);
	margin: var(--e42-prox-progress-gap) auto 0;
	background: var(--e42-prox-progress-track);
	border-radius: 99px;
	position: relative;
	overflow: hidden;
}

.e42-prox__progress-bar {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 35%;
	border-radius: 99px;
	background: var(--e42-prox-progress-fill);
	will-change: transform, width;
}

/* ===================================================================
   RESPONSIVE — apparence mobile pilotée par le sélecteur Elementor.
   Bascule à 1024px (tablette + mobile).
   =================================================================== */
@media (max-width: 1024px) {

	/* ---------- COLONNE : items empilés verticalement ---------- */
	.e42-prox--mobile-column .e42-prox__track {
		display: flex !important;
		flex-direction: column;
		align-items: center;
		flex-wrap: nowrap;
		gap: var(--e42-prox-row-gap);
	}

	.e42-prox--mobile-column .e42-prox__item {
		flex: 0 0 auto;
		width: 100%;
		max-width: var(--e42-prox-col-maxw, 460px);
	}

	/* Le séparateur vertical n'a pas de sens dans une pile : on le masque. */
	.e42-prox--mobile-column .e42-prox__sep {
		display: none !important;
	}

	/* ---------- SLIDE : carrousel horizontal scroll-snap ---------- */
	.e42-prox--mobile-slide .e42-prox__track {
		display: flex !important;
		flex-direction: row;
		flex-wrap: nowrap;
		align-items: stretch;
		justify-content: flex-start;
		gap: var(--e42-prox-col-gap);
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;             /* Firefox */
		-ms-overflow-style: none;          /* IE/Edge */
		padding-bottom: 2px;
	}

	.e42-prox--mobile-slide .e42-prox__track::-webkit-scrollbar {
		display: none;                     /* Chrome/Safari */
	}

	.e42-prox--mobile-slide .e42-prox__item {
		flex: 0 0 auto;
		width: var(--e42-prox-slide-width);
		scroll-snap-align: center;
		justify-content: flex-start;
	}

	.e42-prox--mobile-slide .e42-prox__sep {
		flex: 0 0 auto;
	}

	/* Cartes compactes : on masque le paragraphe dans le carrousel. */
	.e42-prox--slide-hide-text .e42-prox__text {
		display: none !important;
	}

	/* La barre n'apparaît qu'en mode slide. */
	.e42-prox--mobile-slide .e42-prox__progress {
		display: block;
	}
}