/**
 * DS Artefact Map Employees - styles publics.
 * Toutes les couleurs sont pilotées par des CSS custom properties surchargeables :
 * --dsame-bg, --dsame-text, --dsame-bar, --dsame-bar-start, --dsame-bar-end,
 * --dsame-bars-duration, --dsame-bg-image.
 */

.dsame-wrap {
	--dsame-bg: #0D1634;
	--dsame-bg-mid: #273275;
	--dsame-bg-end: #FF0066;
	--dsame-text: #FFFFFF;
	--dsame-bar: #FFFFFF;
	--dsame-bar-start: #FF0066;
	--dsame-bar-end: #1F65FF;
	--dsame-bars-duration: 1400ms;
	--dsame-chart-height: 300px;
	--dsame-bar-gap: clamp(10px, 2.2vw, 30px);
	--dsame-bar-width: 62%;
	--dsame-axis-width: 2px;
	--dsame-axis-offset: 0px;
	--dsame-value-space: 62px;
	--dsame-value-gap: 12px;
	--dsame-cta-gap: 40px;
	--dsame-cta-bg: var(--dsame-bar-start);
	--dsame-cta-text: #FFFFFF;
	--dsame-cta-radius: 4px;

	display: grid;
	grid-template-columns: minmax(220px, 32%) 1fr;
	gap: 32px;
	align-items: center;
	box-sizing: border-box;
	padding: 40px clamp(20px, 4vw, 56px);
	background-color: var(--dsame-bg);
	background-image: linear-gradient(115deg, var(--dsame-bg) 0%, var(--dsame-bg-mid) 48%, var(--dsame-bg-end) 100%);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	color: var(--dsame-text);
	overflow: hidden;
}

.dsame-wrap--has-bg {
	background-image: var(--dsame-bg-image);
}

.dsame-wrap * {
	box-sizing: border-box;
}

/* ---------- Barres ---------- */

.dsame-bars {
	order: 1;
	min-width: 0;
}

.dsame-bars__title {
	margin: 0 0 clamp(14px, 2vw, 28px) !important;
	font-size: clamp(22px, 2.4vw, 36px) !important;
	font-weight: 700 !important;
	letter-spacing: -0.01em;
	line-height: 1.05 !important;
	/* Avada impose une couleur de titre globale : override explicite. */
	color: var(--dsame-text) !important;
	text-transform: none !important;
}

.dsame-bars__chart {
	display: block;
}

.dsame-bars__plot {
	display: flex;
	align-items: flex-end;
	gap: var(--dsame-bar-gap);
	height: var(--dsame-chart-height);
	/* Réserve l'espace des valeurs chiffrées au-dessus de la barre la plus haute. */
	padding-top: var(--dsame-value-space);
	padding-left: var(--dsame-axis-offset);
}

.dsame-bars__axis {
	display: block;
	width: 100%;
	height: var(--dsame-axis-width);
	background-color: var(--dsame-text);
}

.dsame-bars__labels {
	display: flex;
	gap: var(--dsame-bar-gap);
	margin-top: 12px;
	padding-left: var(--dsame-axis-offset);
}

.dsame-bar {
	display: flex;
	align-items: flex-end;
	flex: 1 1 0;
	min-width: 0;
	height: 100%;
}

.dsame-bar__track {
	position: relative;
	display: block;
	width: var(--dsame-bar-width);
	height: 100%;
	margin: 0 auto;
}

.dsame-bar__fill {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	display: block;
	height: 0;
	background-color: var(--dsame-bar);
	transition: height var(--dsame-bars-duration) cubic-bezier(0.22, 0.61, 0.36, 1);
	transition-delay: var(--dsame-bar-delay, 0ms);
}

.dsame-bar__value {
	position: absolute;
	left: 50%;
	bottom: 0;
	margin-bottom: var(--dsame-value-gap);
	writing-mode: vertical-rl;
	transform: translateX(-50%) rotate(180deg);
	font-weight: 700 !important;
	font-size: clamp(13px, 1.2vw, 19px);
	line-height: 1;
	color: var(--dsame-text) !important;
	white-space: nowrap;
}

.dsame-bar__label {
	/* Le conteneur reste en écriture horizontale : justify-content centre alors
	   bien le texte sur la largeur de la colonne, donc sur celle de la barre. */
	display: flex;
	justify-content: center;
	align-items: flex-start;
	flex: 1 1 0;
	min-width: 0;
	writing-mode: horizontal-tb;
}

.dsame-bar__label-text {
	writing-mode: vertical-rl;
	transform: rotate(180deg);
	font-weight: 700 !important;
	font-size: clamp(13px, 1.2vw, 19px);
	line-height: 1;
	color: var(--dsame-text) !important;
	white-space: nowrap;
}

.dsame-bar--highlight .dsame-bar__fill {
	background-color: transparent;
	background-image: linear-gradient(180deg, var(--dsame-bar-start) 0%, var(--dsame-bar-end) 100%);
}



.dsame-wrap.is-animated .dsame-bar__fill {
	height: var(--dsame-fill, 0%);
}


.dsame-wrap .dsame-cta {
	margin-top: var(--dsame-cta-gap) !important;
}

.dsame-wrap .dsame-cta__link {
	display: inline-block;
	padding: 14px 28px;
	border: 0;
	border-radius: var(--dsame-cta-radius);
	background-color: var(--dsame-cta-bg) !important;
	color: var(--dsame-cta-text) !important;
	font-size: clamp(13px, 1.1vw, 16px);
	font-weight: 700 !important;
	line-height: 1.2;
	text-align: center;
	text-decoration: none !important;
	transition: opacity 200ms ease, transform 200ms ease;
}

.dsame-wrap .dsame-cta__link:hover,
.dsame-wrap .dsame-cta__link:focus {
	opacity: 0.88;
	transform: translateY(-1px);
	color: var(--dsame-cta-text) !important;
	text-decoration: none !important;
}

/* ---------- Colonne compteurs + carte ---------- */

.dsame-main {
	order: 2;
	display: flex;
	flex-direction: column;
	gap: 16px;
	min-width: 0;
}

.dsame-counters {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: clamp(24px, 6vw, 90px);
}

.dsame-counter {
	display: flex;
	flex-direction: column;
	align-items: center;
	line-height: 1;
}

.dsame-counter__number {
	display: flex;
	align-items: baseline;
	justify-content: center;
	white-space: nowrap;
}

.dsame-counter__value,
.dsame-counter__suffix {
	font-size: clamp(34px, 4.4vw, 68px);
	font-weight: 500 !important;
	color: var(--dsame-text) !important;
	font-variant-numeric: tabular-nums;
}

.dsame-counter__label {
	margin-top: 8px;
	font-size: clamp(13px, 1.2vw, 20px);
	font-weight: 400;
	color: var(--dsame-text) !important;
}

.dsame-map {
	display: flex;
	justify-content: center;
	min-width: 0;
}

.dsame-map__img {
	display: block;
	max-width: 100%;
	height: auto;
}

/* ---------- Mobile : compteurs, carte, barres ---------- */

@media (max-width: 900px) {
	.dsame-wrap {
		grid-template-columns: 1fr;
		gap: 28px;
		padding: 28px 18px;
	}

	.dsame-main {
		order: 1;
	}

	.dsame-bars {
		order: 2;
	}

	.dsame-counters {
		justify-content: space-around;
		gap: 18px;
	}

	.dsame-cta {
		text-align: center;
	}

	.dsame-bars__plot {
		height: 260px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.dsame-bar__fill {
		transition: none;
	}
}