body{
  position:relative;
  margin:0;
  width:100%;
  
  min-height:100vh;
  box-sizing: border-box;
  overflow-x:hidden;
  font-family:var(--main-font);
}

.main-wrapper{
  position:relative;
  background-color: var(--bg-main);
  z-index:1;
  padding-bottom:2em;
}

a{
  color:var(--font-color);
  &.no-style{
      color:var(--font-color);
      text-decoration: none;
  }
}

header.titre{
  position:sticky;
  top:0;
  z-index:5;
  height:var(--header-height);
  margin-left:2em;
  margin-right:5em;
  display:flex;
  justify-content: space-between;
  vertical-align: center;
  background: linear-gradient(90deg,rgba(143, 168, 217, 0) 0%, rgba(143, 168, 217, 1) 25%, rgba(143, 168, 217, 1) 75%, rgba(143, 168, 217, 0) 100%);
}
div.menu-bg{
  height:5em;
  width:100%;
  background:var(--jauneclair);
  position:absolute;
  z-index:-1;
  top:var(--header-height);
}
header.menu{
  height:3em;
  width:fit-content;
  margin:auto;
  padding:1em 10em;
  background:rgba(255,255,255,0);
  position:sticky;
  top:0;
  z-index:10;
  display:flex;
  justify-content:center;
  ul{
    padding:0 3em;
    display:flex;
    justify-content:right;
    list-style-type: none;

  img{
    display:none;
  }
}





}

section{
  background-color:var(--bg-main);
  width:75vw;
  margin:auto;
}
section.fill{
    background-color:var(--bg-fill);
}
footer{
  padding:1em;
  width:100%;
  position:absolute;
  bottom:0px;
  left:50%;
  transform:translateX(-50%);
  z-index:0;
  background-color:var(--bgcolor-footer);
  p{
    margin:0.5em;
    padding:0;
    text-align:center;
  }

}
footer[data-sticky="true"] {
    position: sticky;
    transform:translateX(0);
    inset:0;
    
}


.tooltip-wrapper{
  position:relative;

  .tooltip{
    display:none;
    font-size:0.8em;
  }
  &:hover>div{
    display:block;
    position:absolute;
    z-index:2;
    top:30px;
    background-color: #EEE;
    border:solid 1px;
    padding:5px;
    margin:0;
    width:max-content;
    max-width: 200px;
    p{
        
        margin:0;
        padding:0;
    }
  }
}


@media (max-width:768px){
  body{
    min-width:auto;
  }

  header{
    position:relative;
    width:100%;
    justify-content: center;

    .authentication-block{
      position:fixed;
      right:10px;
      top:10px;
      z-index:4;
    }
  }

  nav.menu{
    z-index:2;
    width:100%;
    margin:0;
    span{
      display:none;
    }
    img{
      display:inline;
      width:40px;
    }
    ul{
      padding-right:150px;

    }
  }

  section{
    background-color:#FFF;
    width:100%;
    min-width:auto;
  }
    

}