/* 
/* ************************************************************************************* */
/*   
  * {
    margin: 0px;
    padding: 0px;
    font-family: Montserrat, sans-serif;
  }
/*    */
.menu_domaine {
    --couleur-menu : rgba(137, 240, 134, 0.986);
    --hauteur-menu : 40px;
    width: 100%;
    font-size: 1rem;
    position: sticky;
    top: 0px;
    border-bottom: solid 2px #0D5A90;
    background-color: var(--couleur-menu);
  }
  
  .nav_domaine {
    display: flex;
    justify-content: center;
    text-align: center;
    /* box-shadow: 0px 1px 2px 1px rgba(0,0,0,0.3); */
    height: var(--hauteur-menu);
    width: 800px;
    margin: 0 auto;
 }   
 .menu_domaine li {
    list-style-type: none;
    background-color: var(--couleur-menu);
    position: relative;
    height: 100%;
    color: #0D5A90;
    flex: 1;
  }
  
  .nav_nom_domaine:hover {
    color: #ccd3d8;
    background: #0D5A90;
  }
  .nav_nom_domaine:hover span:after{
    color: #ccd3d8;
  }
  /* Pour aligner verticalement les textes des menus. Pour cela, il faudra modifier la propriété « position » pour « absolute », donner une valeur de 50% aux propriétés « top » et « left » et effectuer un déplacement de -50% sur l’axe X et Y (transform: translate(-50%, -50%))*/
 .nav_nom_domaine span {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width:100%;
  } 
  .nav_nom_domaine span:after{
    content: '❯';
    font-size: 1rem;
    margin-left: 7px;
    display: inline-block;
  }
  
  .nav_nom_domaine:hover span:after{
    animation: rotationFleche 0.2s linear forwards;
  }
  
  @keyframes rotationFleche {
    0% {
      transform: rotate(0deg);
    }
    50% {
      transform: rotate(45deg);
    }
    100%{
      transform: rotate(90deg);
    }
  }
  
  .nav_nom_titre {
    margin-top: var(--hauteur-menu);
    width: 150% ;
    text-align: left;
    overflow: hidden;
    max-height: 0;
    border-color: #0D5A90;    
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
  }
  .nav_nom_titre > li > a {
    min-height: 30px;
    width: 100%;
    align-items: center;
    display: flex;
    padding: 5px 0 0 10px;
    text-decoration: none;
  }
  .nav_nom_titre li a::before {
    content:">";
    font-size: 1.5rem;
    font-weight: bold;
    color :#0D5A90;
    margin-right: 10px;
  }
  
  .nav_nom_domaine:hover > .nav_nom_titre {
    animation: apparitionSousMenu 1s forwards;
  }
  
  @keyframes apparitionSousMenu {
    0% {
      box-shadow: 0px 3px 3px 1px rgba(0,0,0,0);
      border-top: 3px solid #0D5A90;
    }
    30% {
      box-shadow: 0px 3px 3px 1px rgba(0,0,0,0.3);
    }
    100% {
      max-height: 50em;
      border-top: 3px solid #0D5A90;
      box-shadow: 0px 3px 3px 1px rgba(0,0,0,0.3);
      color: #0D5A90;
    }
  }
  
  .nav_nom_titre > li:hover {
    background-color: rgb(60, 151, 216);
    
  }
  .nav_nom_titre > li:hover {
    background-color: rgb(60, 151, 216);
    
  }
  /*
  .nav_nom_domaine > li > a {
    align-items: center;
    display: flex;
    height: 50px;
    padding-left: 20px;
    width: 100%;
  }
  */
  .nav_nom_domaine li a:hover {
    color: azure;
  }