/*
© 2023 Elemete® Studio
Toute reproduction interdite - Aucune copie ou modification autorisée - Tous droits réservés
No copy or modification allowed - All rights reserved
*/
.head
{
  color:white;
  height:var(--hauteur-menu);
  position:absolute;
  top:0;
  width:100vw;
  left:0;
  background:black;
}

.head>div
{
  position:absolute;
  top:0;
  height:var(--hauteur-menu);
  line-height:var(--hauteur-menu);
  vertical-align:middle;
}

.head>.icons
{
  width:70px;
  position:absolute;
  left:0;
  top:0;
}
.head>.icons>div
{
  width:24px;
  height:24px;
  float:left;
  margin-left:8px;
  margin-top:2px;
}
.head>.icons>div img
{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.head>.name
{
  width:100vw;
  text-align:center;
  display:none;
  right:0;
}
.head>.xx
{
  right:2.7%;
  text-align:right;
  user-select:none;
  display:table;
}
.head>.xx>div
{
  display: table-cell;
  vertical-align: middle;
}


.nav-left
{
  position:fixed;
  width:100px;
  right:0px;
  top:var(--hauteur-menu);
  height:calc(100vh - var(--hauteur-menu));
  background-color:rgba(0,0,0,0.2);
  transition:0.3s;
}
.nav-left:hover
{
  background-color:rgba(0,0,0,0.7);
}
.nav-left>div
{
  position:absolute;
  left:5px;
  top:5px;
  width:90px;
  height:calc(100vh - 3vh - 10px);
}

.nav-left .splide__track--nav>.splide__list>.splide__slide
{
  background:black;
  border:2px solid white;
  border-radius:4px;
}

.nav-bottom
{
  position:fixed;
  width:100vw;
  left:0px;
  bottom:100px;
  height:3vh;
  background:black;
  display:none;
}
.nav-bottom>div
{
  position:absolute;
  left:5px;
  top:5px;
  width:calc(100vw - 10px);
  height:calc(3vh - 10px);
}

#navigation-bubble
{
  position:fixed;
  color:white;
  font-size:1.2em;
  background:black;
  padding:0.8em;
  transition:0.15s;
  right:110px;
}


#thumbnail-navigate-left .splide__arrow
{
  display:none;
}

@media (orientation: portrait)
{
.head>.icons>div
{
  width:2.5em;
  height:2.5em;
  margin-top:calc((var(--hauteur-menu) - 2.5em) / 2);
}
.head nav>ul>li>a
{
  font-size:1.4em;
}
.head .sous-menu>li>a
{
  font-size:1.4em;
  line-height:30px;
}
.nav-left
{
  width:80px;
}
.nav-left>div
{
  width:60px;
}
.head>.xx
{
  display:none;
}
}
@media (orientation: landscape)
{
@media screen and (max-width:2000px)
{
.head>.icons>div
{
  width:30px;
  height:30px;
  margin-top:calc((var(--hauteur-menu) - 30px) / 2);
}

.nav-left
{
  width:80px;
}
.nav-left>div
{
  width:60px;
}
}
}