body{
 font-family: 'source code pro', Calibri,serif;
 margin: 0px;
 padding: 0px;
 border-radius: 10px 10px 10px 10px;
}
/* On ne cible que l'element ul contenu dans l'element nav*/
nav ul{
 margin: 0px;
 padding: 0px;
 overflow: hidden;
}
/* On enleve les puces devant tous les élé©emnts li
* appartenant à notre element nav et on affiche
* les elements lie´té à côté*/

nav li{
 list-style-type: none;
 float: left;
}
nav li:hover a{
 padding: 15px 30px 20px 30px;
}
nav {
 width: 100%;
 background-color: #004458;
}
nav a{
 display: inline-block;
 text-decoration: none;
 padding: 20px 40px;
 color: #FFF;
}

.menu-blue:hover{
 border-top: 5px solid #046FF2;
 background-color: RGBa(4, 111, 242, 0.15);
 border-radius: 10px 10px 10px 10px;
}
.menu-green:hover{
 border-top: 5px solid #04F2A8;
 background-color: RGBa(4, 242, 168, 0.15);
 border-radius: 10px 10px 10px 10px;
}

.menu-purple:hover{
 border-top: 5px solid #9609FC;
 background-color: RGBa(150, 9, 252, 0.15);
 border-radius: 10px 10px 10px 10px;
}

.menu-pink:hover{
 border-top: 5px solid #e44d26;
 background-color: RGBa(228, 77, 38, 0.15);
 border-radius: 10px 10px 10px 10px;
}

.menu-yellow:hover{
 border-top: 5px solid #FCF403;
 background-color: RGBa(252, 244, 3, 0.15);
 border-radius: 10px 10px 10px 10px;
}


/* Définit la classe "round-on-hover" */
.round-on-hover {
  position: relative; /* Élément parent pour positionner le cercle */
}

/* Définit le cercle caché par défaut */
.round-on-hover .circle {
  display: none;
  position: absolute;
  top: 0px; /* Positionne le cercle au-dessus du texte */
  left: 5%; /* Centre le cercle horizontalement */
  transform: translateX(-10%); /* Centre le cercle horizontalement */
  width: 100px;
  height: 30px;
  background-color: #000000;
  border-radius:50px 50px 50px 50px;
  opacity:0.60;
  z-index: -1; /* Met le cercle derrière le texte */
}

/* Fait apparaître le cercle lorsque la souris passe au-dessus */
.round-on-hover:hover .circle {
  display: block;
}