/*
// ===============================================
// ###############################################
// ### CSS - cycle.css ###########################
// ###############################################
// ===============================================
// ### HISTORIQUE DE VERSION #####################
// ===============================================
// 22/05/2026 : Ajustement cycle de commande
// 03/04/2026 : Création
// ===============================================
*/
.commande-cycle {
	font-family: var(--theme_police);
	display: flex;
	float: none;
	position: relative;
	justify-content: center;
}
.commande-cycle-menu {
	display: flex;
	float: none;
	position: relative;
	justify-content: center;
	padding-top: 20px;
	padding-bottom: 20px;
	padding-left: 160px;
	padding-right: 160px;
	flex-grow:1;
	transition: padding var(--theme_transition);
}
@media screen and (max-width: 1440px) {
	.commande-cycle-menu {
		padding-left: 80px;
		padding-right: 80px;
	}
}
@media screen and (max-width: 1024px) {
	.commande-cycle-menu {
		padding-left: 40px;
		padding-right: 40px;
	}
}
@media screen and (max-width: 640px) {
	.commande-cycle-menu {
		padding-top: 20px;
		padding-bottom: 20px;
	}
}
.commande-cycle-menu ul {
	display: flex;
	float: none;
	position: relative;
	justify-content: space-around;
	margin: 0px;
	padding: 0px;
	list-style-type: none;
	flex-grow:1;
}
.commande-cycle-menu ul li {
	display: flex;
	float: none;
	position: relative;
	flex-direction: column;
	align-items: center;
	flex-grow: 1;
}
.commande-cycle-menu ul li div.nom {
	display: flex;
	float: none;
	position: relative;
}
.commande-cycle-menu ul li div.etape {
	display: flex;
	float: none;
	position: relative;
	width: 100%;
	justify-content: center;
}
.commande-cycle-menu ul li div.etape div{
	display: flex;
	float: none;
	position: relative;
	flex-grow: 1;
	background-image: linear-gradient(#999, #999);
	background-repeat: repeat-x;
	background-position: left 16px;
	background-size: 100% 1px;
}
.commande-cycle-menu ul li:first-of-type div div:first-of-type{
	background-image: none;
}
.commande-cycle-menu ul li:last-of-type div div:last-of-type{
	background-image: none;
}
.commande-cycle-menu ul li div.etape div:nth-of-type(2) {
	display: flex;
	float: none;
	position: relative;
	background-color: rgb(var(--theme_couleur_blanc));
	height: 32px;
	width: 32px;
	max-width: 32px;
	margin-left: 20px;
	margin-right: 20px;
	border-radius: 40px;
	justify-content: center;
	align-items: center;
	border: 1px solid rgb(var(--theme_couleur_gris_clair));
	background-image: none;
	transition: margin var(--theme_transition);
}
@media screen and (max-width: 640px) {
	.commande-cycle-menu ul li div.etape div:nth-of-type(2) {
		margin-left: 10px;
		margin-right: 10px;
	}
}
@media screen and (max-width: 480px) {
	.commande-cycle-menu ul li div.etape div:nth-of-type(2) {
		margin-left: 10px;
		margin-right: 10px;
	}
	.commande-cycle-menu ul li div.etape div:nth-of-type(1) {
		display:none;
	}
	.commande-cycle-menu ul li div.etape div:nth-of-type(3) {
		display:none;
	}
}
.commande-cycle-menu ul li div.etape div:nth-of-type(2) span {
	font-size: 14px;
	font-weight: 500;
	user-select: none;
	-webkit-user-select: none;
}
.commande-cycle-menu ul li div.nom {
	display: block;
	float: none;
	position: relative;
	font-size: 13px;
	font-weight: 400;
	padding-top: 6px;
	user-select: none;
	transition: font-size 0.1s ease-in-out;
}
@media screen and (max-width: 640px) {
	.commande-cycle-menu ul li div:last-of-type {
	font-size: 0px;
	}
}
.commande-cycle-menu ul li.fin div.etape div:nth-of-type(2){
	color: rgb(var(--theme_couleur_blanc));
	border: 1px solid rgb(var(--theme_couleur_gris_moyen));
	background-color: rgb(var(--theme_couleur_gris_moyen));
}
.commande-cycle-menu ul li.courant div.etape div:nth-of-type(2){
	color: rgb(var(--theme_couleur_blanc));
	border: 1px solid rgb(var(--theme_couleur_1));
	background-color: rgb(var(--theme_couleur_1));
}
.commande-cycle-menu ul li.avenir div.etape div:nth-of-type(2){
	color: rgb(var(--theme_couleur_noir));
}