div#steps {

	padding: 0 1em;

	ol li {
		display: flex;
		flex-direction: column;

		margin: 25px 0;
		padding: 0.5ex;
		position: relative;
		border: 0;

		span.marker {
			justify-content: center;
			align-items: center;
			display: inline-flex;
			margin: 0 auto 0.3em auto;
			width: 4vw;
			height: 4vw;
			color: gray;
			position: relative;
			border: 1px solid gray;
			border-radius: 50%;
			background: transparent;
			font-size: calc(12px + 1.2vw);
			font-weight: bold;
			text-align: center;
			vertical-align: middle;
			max-width: 100%;
			max-height: 100%;

			&::before {
				display: block;
				content: ' ';
				border-radius: 50%;
				position: absolute;
				background: $button-background;
				z-index: -1;
				padding: 6px;
			}
		}

		span.label {
			margin: 0 -1em;
			text-align: center;
			vertical-align: middle;
		}

		&.current {
			background: transparent;
			font-weight: bold;

			span.label {
				color: $title-color;
			}

			span.marker {
				color: white;
				border-color: $primary-color;
				background: $primary-color;
			}
		}
	}
}
@media screen and ($max-mobile-viewport) {
	div#gauche div#steps {

		order: 2;
		padding: 0;

		ol {
			display: flex;
			flex-direction: row;
			flex-flow: nowrap;
			justify-content: center;
			align-items: center;

			li {
				padding: 0 0.6em 1ex 0;

				span.marker {
					padding: 0.3em;
					border-radius: 50%;
					width: 4rem; // reset size without vw
					height: 4rem;
				}

				span.label {
					display: none;
				}
			}
		}
	}
}