/* https://developer.mozilla.org/en-US/docs/Web/Tutorials#css_tutorials */

/* Base Styles    #333  #050505  */
#cssmenu {
    color: #aaa;
    border-bottom: 1px solid rgb(50, 50, 50);
    width: auto;
    justify-content: center;
    display: flex;
}

#cssmenuPlayer {
    color: #aaa;
    border-bottom: 1px solid rgb(50, 50, 50);
    width: auto;
    justify-content: center;
    display: none !important;
}


/* Selecting multiple elements
You can also select multiple elements and apply a single ruleset to all of them. 
Separate multiple selectors by commas. */
#cssmenu ul,
#cssmenu li,
#cssmenu a,
#cssmenuPlayer ul,
#cssmenuPlayer li,
#cssmenuPlayer a {
    list-style: none;
    margin: 0;
    padding: 0;
    padding-top: 1px;
    border: 0;
    line-height: 1;
}

#cssmenu ul,
#cssmenuPlayer ul {
    zoom: 1;
    padding: 2px 0px;
    /* margin: auto;  */
}

#cssmenu ul:before,
#cssmenuPlayer ul:before {
    content: '';
    display: block;
}

#cssmenu ul:after,
#cssmenuPlayer ul:after {
    content: '';
    display: table;
    clear: both;
}

#cssmenu li,
#cssmenuPlayer li {
    float:left;
    margin: 0 2px 0 0;
    border: 1px solid transparent;
}

#cssmenu li a,
#cssmenuPlayer li a {   
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;
    padding: 4px 20px 5px 20px;
    display: block;
    text-decoration: none;
    color: #ddd;
    border: 1px solid transparent;
    font-size: 1em;
}

#cssmenu a.active,
#cssmenuPlayer a.active,
#cssmenu .submenu a.active,
#cssmenuPlayer .submenu a.active {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;
    display: block;
    background: #a61a1a;
    border: 1px solid #401313;
    -moz-box-shadow: inset 0 5px 10px #401313;
    -webkit-box-shadow: inset 0 5px 10px #401313;
    box-shadow: inset 0 5px 10px #401313;
}

#cssmenu li:hover,
#cssmenuPlayer li:hover,
#cssmenu .submenu li:hover,
#cssmenuPlayer .submenu li:hover {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;
    border: 1px solid #aaa;
}

#cssmenu li:hover > a:not(.active),
#cssmenuPlayer li:hover > a:not(.active),
#cssmenu .submenu li:hover > a:not(.active),
#cssmenuPlayer .submenu li:hover > a:not(.active) {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;
    display: block;
    background: #a61a1a;
    border: 1px solid #401313;
    -moz-box-shadow: inset 0 5px 10px #401313;
    -webkit-box-shadow: inset 0 5px 10px #401313;
    box-shadow: inset 0 5px 10px #401313;
}

#cssmenu a:focus-visible,
#cssmenuPlayer a:focus-visible,
#cssmenu .submenu a:focus-visible,
#cssmenuPlayer .submenu a:focus-visible {
    outline: none;
    background: #a61a1a;
    border: 1px solid #401313;
    -moz-box-shadow: inset 0 5px 10px #401313;
    -webkit-box-shadow: inset 0 5px 10px #401313;
    box-shadow: inset 0 5px 10px #401313;
}


#playerVideo {
  display: none !important; /* completely hide the element */
}

/* Utility */
.hidden {
  display: none !important;
}

/* Dropdown submenu styles */
#cssmenu li.has-submenu {
    position: relative;
}

#cssmenu li.has-submenu::after {
    /* Zone tampon transparente entre le bouton parent et le sous-menu
       pour éviter la perte de :hover lors du passage de la souris */
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;   /* couvrir la largeur du sous-menu (min-width ~200px) */
    height: 20px;   /* pont de survol */
    background: transparent;
    z-index: 1;     /* en dessous du sous-menu (qui est à 1000) */
}

#cssmenu li.has-submenu > .submenu {
    position: absolute;
    margin: 0 auto;
    top: 31px; /* collé juste sous l'item parent */
    left: 50%; /* centré */
    transform: translateX(-50%);
    display: none;          /* masqué par défaut (Chrome) */
    background: rgba(0,0,0,0.86); /* fond transparent */
    border: 1px solid rgb(50, 50, 50);            /* pas de bord */
    border-radius: 0 0 5px 5px;
    padding: 3px; /* zone active plus large autour des items */
    z-index: 1000;
    min-width: 120px;
    opacity: 0;            /* fondu masqué par défaut */
    pointer-events: none;  /* non interactif */
    -webkit-transition: opacity 1s ease; /* compat Safari/WebKit */
    transition: opacity 1s ease;
    text-align: center; /* texte des boutons centré */
}

/* remove extra spacing at the top/bottom of the submenu list */
#cssmenu li.has-submenu > .submenu li:first-child { margin-top: 0; }
#cssmenu li.has-submenu > .submenu li:last-child  { margin-bottom: 0; }

#cssmenu li.has-submenu:hover > .submenu {
    display: block;         /* visible au survol (Chrome) */
    opacity: 1;
    pointer-events: auto;
}

#cssmenu .submenu li {
    float: none;
    margin: 2px 0; /* marge entre items du sous-menu */
    border: 1px solid transparent;
}

#cssmenu .submenu li a {
    padding: 7px 20px; /* padding vertical de 10px sur chaque entrée */
    display: block;
    border: 1px solid transparent;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;
}

#cssmenu .submenu li a:hover {
    background: #a61a1a; /* mêmes effets que le top menu */
    border: 1px solid #401313;
    -moz-box-shadow: inset 0 5px 10px #401313;
    -webkit-box-shadow: inset 0 5px 10px #401313;
    box-shadow: inset 0 5px 10px #401313;
}

/* Hide specific entries by default via class */
/* use .hidden on elements you want hidden initially */