html {
	scroll-behavior: smooth;
}


#scroll-indicator ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
#scroll-indicator li {
	position: relative;
	line-height: 36px;
}
#scroll-indicator li.active:before {
	opacity: 0;
	visibility: hidden;
	transform: translate(-50% 0);
}
#scroll-indicator li.active a {
	height: 50px;
}

/* le nom des rubrique */
/* #scroll-indicator li:before {
	content: attr(data-title);
	position: absolute;
	bottom: -5px;
	left: 10em;
	font-weight: 700;
	font-size: 16px;
	line-height: 1;
	text-transform: lowercase;
	color: #F21F1F;
	opacity: 0;
	visibility: hidden;
	transition: left 0.25s cubic-bezier(0.455, 0.03, 0.515, 0.955), opacity 0.25s cubic-bezier(0.455, 0.03, 0.515, 0.955), visibility 0.25s cubic-bezier(0.455, 0.03, 0.515, 0.955);
} */

/* les tiret normal */
#scroll-indicator li:after {
	content: "";
	display: block;
	position: absolute;
	bottom: 0px;
	left: 2px;
	height: 7px;
	width: 3em;
	background: #F21F1F;
	pointer-events: none;
	transition: width 0.25s cubic-bezier(0.455, 0.03, 0.515, 0.955) 0.1s, height 0.25s cubic-bezier(0.455, 0.03, 0.515, 0.955) 0.1s, left 0.25s cubic-bezier(0.455, 0.03, 0.515, 0.955) 0.1s, bottom 0.25s cubic-bezier(0.455, 0.03, 0.515, 0.955) 0.1s;
}

/* les tiret avec la souris dessus */
#scroll-indicator li:hover:after {
	left: 0px;
	bottom: -1px;
	width: 3.5em;
	height: 7.5px;
	transition: width 0.15s cubic-bezier(0.455, 0.03, 0.515, 0.955), height 0.15s cubic-bezier(0.455, 0.03, 0.515, 0.955), left 0.15s cubic-bezier(0.455, 0.03, 0.515, 0.955), bottom 0.15s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}
#scroll-indicator li:hover:before {
	left: 5em;
	opacity: 1;
	visibility: visible;
}

/* les chiffre */
#scroll-indicator a {
	display: block;
	position: relative;
	height: 10px;
	margin: 4px 0 0 0;
	font-weight: bold;
	font-size: 40px;
	line-height: 36px;
	font-family: "Open Sans", sans-serif;
	text-decoration: none;
	color: #F21F1F;
	overflow: hidden;
	transition: height 0.25s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}