/* A faire */
/*         */
/* Corriger taille de la form en tenant compte de la taille de la barre des taches windows */

/* Created by JeremyTivotal */

/* Google fonts(Poppins) */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap");
@import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');
@import url('https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}

/* Definition des barres de défilement */




.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 260px;
  background-color: #11101d;
  z-index: 100;
  transition: all 0.5s ease;
}

.sidebar.close {
  width: 78px;
}

.sidebar .logo {
  height: 60px;
  display: flex;
  width: 100%;
  align-items: center;
}

.sidebar .logo i {
  font-size: 30px;
  color: #fff;
  height: 50px;
  min-width: 78px;
  text-align: center;
  line-height: 50px;
}

.sidebar .logo .logo-name {
  font-size: 22px;
  color: #fff;
  font-weight: 100;
  text-shadow: #e4e9f7 1px 0 10px; 
  transition: all 0.3s ease;
  transition-delay: 0.1s;
}

.sidebar.close .logo .logo-name {
  opacity: 0;
  pointer-events: none;
}

.sidebar .nav-list {
  height: 100%;
  padding: 30px 0 150px 0;
  overflow: auto; /* auto permet de scroller les icons quand sidebar est fermée et quand l'écran d'affichage est petit */
}

.sidebar.close .nav-list {
  overflow: visible; /* visible permet d'afficher les sous menu au passage de la souris sur les icones */
}

.sidebar .nav-list::-webkit-scrollbar {
  display: none; /* on ne veut pas afficher les scrollbars dans le sidebar même si l'écran est petit ou la liste des menus est longue car on glisse avec le pointeur ou le doigt*/
}

.sidebar .nav-list li {
  position: relative;
  list-style: none;
  transition: all 0.4s ease;
}

.sidebar .nav-list li:hover {
  background-color: #1d1b31;
    
}

.sidebar .nav-list li .icon-link {
  display:flex;
  align-items: center;
  justify-content:space-between;
}

.sidebar.close .nav-list li .icon-link {
  display: block;
}

/* icones navigation */
.sidebar .nav-list li i {
  height: 50px;
  min-width: 78px;
  text-align: center;
  line-height: 50px;
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.sidebar.close .nav-list li i.arrow {
  display: none;
}

.sidebar .nav-list li.show i.arrow {
  transform: rotate(-180deg);
}

.sidebar .nav-list li a {
  display: flex;
  align-items: center;
  text-decoration: none;
}

.sidebar .nav-list li a .link-name {
  color: #fff;
  font-size: 18px;
  font-weight: 400;
  transition: all 0.4s ease;
}

.sidebar.close .nav-list li a .link-name {
  opacity: 0;
  pointer-events: none;
}

.sidebar .nav-list li .sub-menu {
  padding: 6px 6px 14px 80px;
  margin-top: -10px;
  background: #1d1b31;
  display: none;
  transition: all 0.3s ease;
}

.sidebar .nav-list li.show .sub-menu {
  display: block;
}

.sidebar.close .nav-list li .sub-menu {
  position: absolute;
  left: 100%;
  top: -10px;
  margin-top: 0;
  padding: 10px 20px;
  border-radius: 0 6px 6px 0;
  opacity: 0;
  display: block;
  pointer-events: none;
  transition: 0s;
}

.sidebar.close .nav-list li:hover .sub-menu {   /* affichage des sous menu au passage sur les icones avec la sidebar minimisée */
  top: 0;
  opacity: 1;
  pointer-events: auto;
  transition: all 0.4s ease;
}

.sidebar .nav-list li .sub-menu a {
  color: #fff;
  font-size: 15px;
  padding: 5px 0;
  white-space: nowrap;
  opacity: 0.6;
  transition: all 0.3s ease;
}

.sidebar .nav-list li .sub-menu a:hover {
  opacity: 1;
}

.sidebar .nav-list li .sub-menu .link-name {
  display: none;
}

.sidebar.close .nav-list li .sub-menu .link-name {
  font-size: 18px;
  opacity: 1;
  display: block;
}

.sidebar .nav-list li .sub-menu blank {
  padding: 3px 20px 6px 16px;
  opacity: 0;
  pointer-events: none;
}

.sidebar .nav-list li:hover .sub-menu blank {
  top: 50%;
  transform: translateY(-50%);
}

.profile-details {
  position: fixed;
  bottom: 0;
  width: 260px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #1d1b31;
  padding: 12px 0;
  transition: all 0.5s ease;
}

.sidebar.close .profile-details {
  background-color: none;
  width: 78px;
}

.profile-details .profile-content {
  display: flex;
  align-items: center;
}

.profile-details .profile-content img {
  height: 51px;
  width: 51px;
  border-radius: 50%;
  object-fit: cover;
  margin: 0 14px 0 12px;
  background-color: #1d1b31;
  transition: all 0.5s ease;
}

.sidebar.close .profile-details .profile-content img {
  padding: 10px;
}

.profile-details .name-job .name,
.profile-details .name-job .job {
  color: #fff;
  font-size: 18px;
  white-space: nowrap;
}

.sidebar.close .profile-details i,
.sidebar.close .profile-details .name-job .name,
.sidebar.close .profile-details .name-job .job {
  opacity: 0;
  pointer-events: none;
}

.profile-details .name-job .job {
  font-size: 12px;
  opacity: 0.5;
}



.navhome-section {
  position: fixed; /* fixed pour laisser le bouton sidebar en haut pendant un défilement de la page */
  
  left: 260px;
 /* background-color: #11101d; */
  transition: all 0.5s ease;
}


.navhome-section .navhome-content {
  display: flex;
  height: 60px;
  align-items: center;
}

    
.navhome-section .navhome-content i {  
  font-size: 35px;
  color: #e4e9f7;
  margin: 0 15px;
  cursor: pointer;
    
}

.formtitle-content {
  position: fixed;
  width: calc(100% - 260px);
  display: flex; /* sans lui le text-indent de content.text ne fonctionne pas et donc pas de décalage pour le titre */
  height: 60px; 
  left: 260px;
  top: 0;
  z-index: -1; /* permet de garder le bouton d'expansion du sidebar au dessus de la home-section */
  align-items: center;
 /* justify-content: start; */

 background-color: #11101d;
  /*background-color: rgba(0, 0, 0, 0.05); */
  /*background: linear-gradient(to right, #1d1b31, #d16928); */
  /*  background-size: cover; 
  background-image: url('../media/fond.jpg');   */
  transition: all 0.5s ease;

}

.formtitle-content .text {
  color: aquamarine; /* #e4e9f7; */
  white-space: normal;
  font-size: 30px;
  font-weight: 100;
  margin-left: 60px; /* position le titre de la form à droite du bouton sidebar */
  text-shadow: #e4e9f7 1px 0 10px; 
  animation-duration: 0.8s;
  animation-name: slidetopin; 
}


.form-section {
  position: fixed;
  height: calc(100% - 55px); /* hauteur de la page en % du viewport , si on ne met pas alors les scrollbars ne s'affichent pas et pas possible de descendre dans la page / -55px pour afficher le bas de page en entier pour les petits ecrans sinon il manque une petite partie*/
  width: calc(100% - 260px);
  left: 260px;
  top: 5%; /* permet d'afficher le titre dans formtitle comme un menu en top donc = le height du formtitle */
  background-size: cover; 
  background-image: url('../media/fond.jpg');  
  z-index: -2; /* permet de garder le bouton d'expansion du sidebar au dessus de la home-section */
  transition: all 0.5s ease;
  overflow-y: scroll;  /* afin d'obtenir une barre de défilement si il y a bcp d'objet dans la page */
}


.form-section .form-content {
  display: flex;
  position: relative; /* pour permettre de faire un espace entre la barre titre et la page principale avec le paramètre top de 10 pixels: */
  top: 10px;
  flex-flow: row wrap;
  /*height: 60px;*/


}

.form-section .form-content .text {
  position:relative;
  /* bottom:10px;*/
  width: 100vw; /* permet d'avoir un encadrement de la largeur de la form complète. Pas de reglage de height pour adapter selon la longueur du texte. */
  text-align:left;
  z-index:-9;

  left:0; 
  font-size:24px;
  text-transform: uppercase;
  color: white; /* #e4e9f7; */
  font-weight: 200;
  border-radius:1px 1px 1px 1px;
  border:2px solid #ffffff;
  /*background-color: rgba(0, 0, 0, 0.05); */
  background: linear-gradient(to right, #1d1b31, #d16928);
   
}

.sidebar.close ~ .navhome-section {
  left: 78px;

  width: calc(100% - 78px); 
}

.sidebar.close ~ .form-section {
  left: 78px;
  width: calc(100% - 78px);
}


.sidebar.close ~ .formtitle-content {
  left: 78px;
  width: calc(100% - 78px); 
}



@keyframes slidetopin {
  from {
    margin-top: -10%;
  }

  to {
    margin-top: 0%;
  }
}

@keyframes slideleftin {
  from {
    margin-left: -20%;
  }

  to {
    margin-left: 0%;
  }
}


/* Gestion petits-ecrans */

@media (max-width: 400px) {
  .sidebar.close .nav-list li .sub-menu {
    display: none;
  }

  .sidebar {
    width: 78px;
  }

  .sidebar.close {
    width: 0;
  }

  .navhome-section {
    left: 78px;
    width: calc(100% - 78px);
    z-index: 100;
  }

  .sidebar.close ~ .navhome-section {
    width: 10%;
    left: 0;
  }
}


@media (max-height: 900px) {
  .formtitle-content {
    height: 60px;
  }
 .form-section {
    top: 60px;
  }

}

::-webkit-scrollbar {
     width: 10px;
     height: 10px;
 }
 ::-webkit-scrollbar-button {
     width: 0px;
     height: 0px;
 }
 ::-webkit-scrollbar-thumb {
     background: #ffffff;
 }

 ::-webkit-scrollbar-track {
     background: #11101d;
     border: 1px solid #11101d;
 }

 ::-webkit-scrollbar-corner {
     background: transparent;
 }