/****
* Menu icône animée
* 14/03/2021
****/

.menu-icon {
	margin: 0 auto ;
	position: relative ;
	width: 54px ;
	height: 54px ;
}
.menu-icon span {
	display: block ;
	width: 22px ;
	height: 2px ;
	background-color: #285b5a ; /* Couleur trait milieu */
	position: absolute ;
	top: 50% ;
	left: 50% ;
	transform: translateX( -50% ) translateY( -50% ) ;
}
.menu-icon span::before, span::after {
	content: '' ;
	background-color: #285b5a ; /* Couleur trait supérieur et inférieur */
	display: block ;
	width: 22px ;
	height: 2px ;
	position: absolute ;
	top: 0 ;
	left: 0 ;
	transform: translateY( -6px ) ;
	transition: transform 0.5s ;
}
.menu-icon span::after {
	transform: translateY( 6px ) ;
}
.menu-icon span:hover::before {
	transform: translateY( -8px ) ;
}
.menu-icon span:hover::after {
	transform: translateY( 8px ) ;
}
/* icon-cross */
.menu-icon-cross {
	transition: transform 0.5s ;
}
.menu-icon-cross span {
	z-index: 2 ;
	transition: background 0.5s, transform 0.5s ;
}
.menu-icon-cross span::before, .menu-icon-cross span::after {
	transform-origin: 50% 50% ;
}
.menu-icon-cross.is-opened {
	transform: rotate( 180deg ) ;
}
.menu-icon-cross.is-opened span {
	background: transparent ;
}
.menu-icon-cross.is-opened span::before {
	transform: translateY( 0 ) rotate( 45deg ) ;
}
.menu-icon-cross.is-opened span::after {
	transform: translateY( 0 ) rotate( -45deg ) ;
}
.menu-icon-cross svg {
	fill: transparent ; /* fond du cercle */
	position: relative ;
	z-index: 1 ;
	stroke: #285b5a ; /* couleur bordure cercle */
	stroke-width: 2 ;
	stroke-dasharray: 173 ;
	stroke-dashoffset: 173 ;
	transition: stroke-dashoffset 0.5s , tranform 0.5s ;
}
.menu-icon-cross.is-opened svg {
	transform: rotate( -180deg ) ;
	stroke-dashoffset: 0 ;
}