*::selection {
 background: rgb(0, 255, 0);
 }

header{
  position: fixed;
  width: 100%;
  height: 40px;
  top: 0;
  padding: 0 20px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  background-color: white;
  border-bottom: 2px solid rgb(0,0,0);
  z-index: 999;
  h1{
    margin: auto 0;
  }
  nav{
    margin: auto 0;
    .burger{
      display: none;
    }
    ul{
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
      -webkit-box-pack: end;
      -ms-flex-pack: end;
      justify-content: flex-end;
      li{
        height: 40px;
        margin-right: 50px;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        transition: margin-right 1s;
        &:last-child{
          margin-right: 0px!important;
        }
      }
      &.tags{
        visibility: hidden;
        position: absolute;
        border-left: 2px solid black;
        border-bottom: 2px solid black;
        background: white;
        top: 40px;
        right: 0px;
        width: auto;
        z-index: 999;
        a{
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          width: auto;
          height: 50px;
          padding: 0 20px;
          -webkit-transition: padding 0.5s;
          transition: padding 0.5s;
          & > li{
            margin: auto;
            position: relative;
            &::after{
              content: " ";
              position: absolute;
              height: 10px;
              margin: auto;
              background: rgb(0, 255, 0);
              z-index: -1;
              width: 0%;
              -webkit-transition: all 0s;
                transition: all 0s;
            }
          }
        }
      }
      &.visible, &.active{
        visibility: visible;
        a{
          & > li{
            &::after{
              background: rgb(0, 255, 0);
              width: 0%;
              -webkit-transition: all 0.5s;
                transition: all 0.5s;
            }
          }
          &:hover{
            & > li{
              &::after{
                background: rgb(0, 255, 0);
                width: 100%;
                -webkit-transition: all 0.5s;
                  transition: all 0.5s;
              }
            }
          }
        }
      }
    }
    // fleche
    & > ul:nth-child(1) {
      & > li:nth-child(1){
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        position: relative;
        margin-right: 50px;
        transition: margin-right 1s;
        .cat{
          width: 120%;
          height: auto;
          margin-left: 10px;
          cursor: pointer;
          img{
            vertical-align: middle!important;
            -webkit-transition: all 0.5s;
            transition: all 0.5s;
          }
        }
        &.act{
          img{
            -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
            -webkit-transition: all 0.5s;
            transition: all 0.5s;
          }
        }
        a{
          width: auto;
          text-align: right;
        }
      }
    }
  }
}