:root{
	--bar-height: 36px;
	--bar-radius: 10px;
	--separator-color: #111;
	--bar-fill: #4aa3ff;
}

.wrap{
	max-width:1200px;
	margin:0 auto;
	min-width: 500px;
	padding: 0px 42px;
}

@media (max-width: 768px) {
  .wrap {
    min-width: 0;
  }
}

.milestone-bar{position:relative;padding:110px 12px}

.track{
	position:relative;
	height:var(--bar-height);
	border-radius:var(--bar-radius);
	background:#e6e6e6;
	overflow:visible;
}

.fill{
	position:absolute;left:0;top:0;height:100%;border-radius:var(--bar-radius) 0 0 var(--bar-radius);
	background:linear-gradient(90deg,var(--bar-fill),#2a85e6);
	width:0%;
	transition:width .8s ease;
}

.markers{position:absolute;left:12px;right:12px;top:0;bottom:0;pointer-events:none}

.marker{position:absolute;top:50%;transform:translateY(-50%);opacity:0;animation:fadeIn .6s ease forwards}

.marker-line{
	width:2px;
	background:var(--separator-color);
	position:absolute;
	left:50%;transform:translateX(-50%);
}

.marker.above .marker-line{top:calc(-1.5 * var(--bar-height));height:calc(var(--bar-height) * 2)}
.marker.below .marker-line{top:calc(-2.5 * var(--bar-height));height:calc(var(--bar-height) * 3)}

.marker-label{
	position:absolute;white-space:nowrap;left:50%;transform:translateX(-50%);
	font-size:15px;padding:6px 8px;border-radius:6px;
	background:rgba(200,200,200,1);
	color:var(#111);
	box-shadow:0 1px 4px rgba(0,0,0,0.08);
	transition:color .3s ease, background .3s ease;
	text-align: center;
}

.marker.above .marker-label{top:calc(100% + -80px)}
/*.marker.below .marker-label{top:calc(100% + 80px - var(--bar-height))}*/
.marker.below .marker-label{top:calc(100% + -80px + -50px)}

.marker-dot{
	position:absolute;left:50%;transform:translate(-50%,-50%);
	top:50%;width:12px;height:12px;border-radius:50%;background:#fff;border:2px solid var(--separator-color);
	z-index:2;transition:background .3s ease;
}

.reached .marker-dot{background:var(--bar-fill) !important;}
.reached .marker-label{background-color:var(--bar-fill);font-weight:600}

.current-marker {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	pointer-events: none;
	z-index: 5;
}

.current-line {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	width: 2px;
	height: calc(var(--bar-height) * 2);
	top: calc(-0.5 * var(--bar-height));
	background: var(--bar-fill);
}

.current-label {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	top: calc(-1 * var(--bar-height) - 40px); /* au-dessus de la barre */
	background: var(--bar-fill);
	color: #fff;
	font-size: 2em;
	padding: 4px 8px;
	border-radius: 6px;
	white-space: nowrap;
	box-shadow: 0 1px 4px rgba(0,0,0,0.15);
}

.amount {
	position: absolute;
	right: 0px;
	bottom: -20px;
	font-weight: bolder;
	padding-right: 2px;
	border-right: 2px solid #2a85e6;
	text-align: center;
	color: white;
}

@keyframes fadeIn{from{opacity:0;transform:translateY(-50%) scale(0.9)}to{opacity:1;transform:translateY(-50%) scale(1)}}