/* COULEUR DU THEME */
/* COULEUR DU SOUS-MENU */
/* COULEUR DES ERREURS */
/* FORMULAIRES */
/* GESTION DES LONGUEURS */
#WRAPPER > #MENU-SIDE > span[data-link] {
  display: block;
  position: relative;
  width: calc( 4em - 2*.7em - 2*.55em - 2*.01em);
  height: calc( 4em - 2*.7em - 2*.55em - 2*.01em);
  margin: 2em .7em;
  padding: .55em;
  border: .01em solid transparent;
  border-radius: 2px;
  color: #a2a2a2;
  line-height: calc( 4em - 2*.7em - 2*.55em - 2*.01em);
  transition: color .3s, border .3s;
  cursor: pointer;
}

#WRAPPER > #MENU-SIDE > span[data-link].mt {
  margin-top: 3em;
}

#WRAPPER > #MENU-SIDE > span[data-link].mb {
  margin-bottom: 3em;
}

#WRAPPER > #MENU-SIDE > span[data-link] svg, #WRAPPER > #MENU-SIDE > span[data-link] svg * {
  width: calc( 4em / 2.5);
  height: calc( 4em / 2.5);
  transition: fill .3s, stroke .3s;
  pointer-events: none;
}

#WRAPPER > #MENU-SIDE > span[data-link] svg #stylisable, #WRAPPER > #MENU-SIDE > span[data-link] svg * #stylisable {
  fill: #a2a2a2 !important;
}

#WRAPPER > #MENU-SIDE > span[data-link] svg #stroke-stylisable, #WRAPPER > #MENU-SIDE > span[data-link] svg * #stroke-stylisable {
  stroke: #a2a2a2 !important;
}

#WRAPPER > #MENU-SIDE > span[data-link][data-desc]:after {
  content: attr(data-desc);
  display: block;
  position: absolute;
  top: calc( 4em / 4 - 2*.3em);
  left: calc( 4em * 1.15 - 2*.3em);
  padding: .3em;
  border-radius: 3px;
  background-color: #2a2a2a;
  color: #e2e2e2;
  white-space: nowrap;
  transition: transform .1s;
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
}

#WRAPPER > #MENU-SIDE > span[data-link]:hover, #WRAPPER > #MENU-SIDE > span[data-link].active {
  color: #f44f06;
  border-color: #e6e6e6;
  box-shadow: inset 0 0 .5em #eee;
}

#WRAPPER > #MENU-SIDE > span[data-link]:hover:hover:after, #WRAPPER > #MENU-SIDE > span[data-link].active:hover:after {
  transform: scaleX(1);
  color: #fff;
}

#WRAPPER > #MENU-SIDE > span[data-link]:hover svg #stylisable, #WRAPPER > #MENU-SIDE > span[data-link].active svg #stylisable {
  fill: #000 !important;
}

#WRAPPER > #MENU-SIDE > span[data-link]:hover svg #stroke-stylisable, #WRAPPER > #MENU-SIDE > span[data-link].active svg #stroke-stylisable {
  stroke: #000 !important;
}
 

 /*# sourceMappingURL= menu-side.css.map */