/* ░▒▓ ANIMATIONS.CSS - Anime les éléments ▓▒░ */
/*
/* ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓ */
/* ▓▓ RÈGLES DE BASE (mobile first) ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓ */
/* ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓ */
/*
/* ▒▒▒▒▒▒▒▒▒▒▒ */
/* Généralités */
/* ▒▒▒▒▒▒▒▒▒▒▒ */
.button,
.button-inverted {
  transition: background 0.25s ease;
}

/* ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒ */
/* Menu de navigation */
/* ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒ */
#mainMenu li polyline {
  stroke-dashoffset: 1000px;
  stroke-dasharray: 2000px;
  transition: stroke-dashoffset 0.4s ease;
}

#mainMenu li a {
  transition: filter 0.25s ease;
}

#mainMenu li a:hover:before,
#mainMenu li a:focus:before {
  transition: opacity 0.25s ease 0.4s;
}

#mainMenu li a:hover polyline,
#mainMenu li a:focus polyline {
  stroke-dashoffset: 2000px;
}

/* ▒▒▒▒▒▒▒▒▒▒▒▒ */
/* Arrière-plan */
/* ▒▒▒▒▒▒▒▒▒▒▒▒ */
html.animateIntro #lines {
  animation: 0.25s 2.5s weakenLines forwards ease-out;
}

@keyframes weakenLines {
  to {
    opacity: 0.4;
  }
}

html.animateIntro #lines g>* {
  animation: 0.66s 0.5s showLines forwards ease-out;
}

@keyframes showLines {
  to {
    -webkit-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
  }
}