/* Menu */
@import url('https://fonts.googleapis.com/css2?family=Sofia+Sans+Semi+Condensed:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap');
* {
  box-sizing: border-box;
}

.menu {
	list-style: none;
	margin: 0;
	padding: 0;
	width: 100%;
	height: 40px;
	margin-top: -60px;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: auto;
	position: relative;
/*	background-color: black;*/
	z-index: 7;
    justify-content: center;
}
.menu li {
  float: left;
  width: 25%;
  height: 100%;
  margin: 0;
  padding: 0;
}
.menu a {
  display: flex;
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
  color: #fff;
  text-decoration: none;
  position: relative;
  font-size: 16pt;
  z-index: 50;
  font-family:  "Ubuntu", sans-serif;
}

#toggle {	
  margin-top: 0px;
  visibility: hidden;	
}

/* Effet rollover du menu */
nav.fill a {
  position: relative;
}
nav.fill a:after {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 0%;
  content: '.';
  color: transparent;
  height: 1px;
}
nav.fill .menu:after {
  background: #fff;
}


nav.fill a {
  transition: all 0.8s;
}

nav.fill ul li a:after {
  text-align: left;
  content: '.';
  margin: 0;
  opacity: 0;
}
nav.fill ul li a:hover {
  color: #e42586;
  z-index: 1;
}
nav.fill ul li a:hover:after {
  z-index: -10;
  animation: fill 0.8s forwards;
  -webkit-animation: fill 0.8s forwards;
  -moz-animation: fill 0.8s forwards;
  opacity: 1;
}
/* Keyframes */
@-webkit-keyframes fill {
  0% {
    width: 0%;
    height: 2px;
  }
  50% {
    width: 100%;
    height: 2px;
  }
  100% {
    width: 100%;
    height: 100%;
	border-radius: 10px 10px 0px 0px;
  }
}

@media (max-width : 1020px ){
.menu a {
  font-size: 12pt;
 }		
}

@media (max-width : 768px) {
.menu {
  width: 100%;
  visibility: hidden;
	margin-top: -70px;

}
.menu a {
  font-size: 14pt;
 }

.menu li {
  float: left;
  width: 500%;
  background-color: #000;
  color: #fff;
 }
nav.fill {
	z-index: 50;
	}
#toggle {	
  visibility : visible;
 }

	
nav.fill ul li a {
  transition: all 0s;
}
nav.fill ul li a:hover {
  color: #e42586;
  z-index: 1;
}
nav.fill ul li a:hover:after {
  z-index: -10;
  animation: fill 0.1s forwards;
  -webkit-animation: fill 0.1s forwards;
  -moz-animation: fill 0.1s forwards;
  opacity: 1;
}
	nav.fill {
		width: 20%;
		float: right;

	}
}

/*
// Effet changement d'état du menu au scrolling //
   lié au fichier effet-scroll.js //
*/

header nav.fill a:hover,
header nav.fill a.active {
  color: #e42586;
  transition: 0.5s ease-out;
  letter-spacing: 2px;
}

/*// effet d'arrivée des éléments section au scrolling lié au fichier effet-scroll.js //*/

.reveal {
  position: relative;
  transform: translateY(150px);
  opacity: 0;
  transition: 2s all ease;
}

.reveal.active {
  transform: translateY(0);
  opacity: 1;
}