hehe/user/themes/hehe/scss/template/_section-media-queries.scss

@media screen and (max-width: 700px) {
  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;
      & > .tags{
        & > a {
          height: 30px!important;
          li{
            position: relative;
            z-index: 0;
            &::after{
              content: " ";
              position: absolute;
              background: rgb(0, 255, 0);
              height: 10px;
              margin: auto;
              z-index: -1;
              -webkit-transition: width 0.5s;
              transition: width 0.5s;
              width: 0%;
            }
          }
          &:hover{
            li{
              &::after{
                content: " ";
                position: absolute;
                background: rgb(0, 255, 0);
                height: 10px;
                margin: auto;
                z-index: -1;
                width: 100%;
                -webkit-transition: width 0.5s;
                transition: width 0.5s;
              }
            }
          }
        }
      }
      & > ul:nth-child(1) {
        & > li:nth-child(1){
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          position: relative;
          margin-right: 35px!important;
          & > a{
            // pointer-events: none;
          }
          &:after{
            content: " ";
            cursor: pointer;
            display: block;
            width: 25px;
            height: 40px;
            background-image: url(../images/fleche2.svg);
            background-repeat: no-repeat;
            background-position: center;
            // background-size: 10px;
            position: absolute;
            right: -25px;
            -webkit-transition: all 0.5s;
            transition: all 0.5s;
          }
          &.hover{
            &:after{
              -webkit-transform: rotate(180deg);
                      transform: rotate(180deg);
              -webkit-transition: all 0.5s;
              transition: all 0.5s;
            }
          }
        }
      }
    }
    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: 20px!important;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        &:last-child{
          margin-right: 0px!important;
        }
      }
    }
    ul.tags{
      display: none;
    }
    ul.visible, ul.active{
      border-left: 2px solid black;
      border-bottom: 2px solid black;
      background: white;
      display: block;
      position: absolute;
      top: 40px;
      right: 0px;
      width: auto;
      z-index: 999;
      a{
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        width: auto;
        height: 40px;
        padding: 0 20px;
        &:first-child{
          margin-top: 0px;
        }
        &:last-child{
          margin-bottom: 10px;
        }
        li{
          margin: auto;
        }
      }
    }
  }

  #start{
    margin-top: 40px;
    //home
    .item{
      display: block;
      .card{
        position: relative;
        width: 100%;
        overflow-y: hidden;
        padding-bottom: 5px;
        margin-left: 0px!important;
        margin-right: 0px!important;
        &:last-child{
          padding-bottom: 0px!important;
        }
        .card-image:hover{
          -webkit-transition: all 0.6s;
          transition: all 0.6s;
          background-color: rgb(0, 255, 0);
          img{
            -webkit-transition: all .6s;
            transition: all .6s;
            mix-blend-mode: multiply;
            opacity: .95;
          }
        & ~ .card-title{
          top: 50%;
          left: 50%;
          opacity: 1;
          -webkit-transition: opacity 1s, top 0s;
          transition: opacity 1s, top 0s;
          }
        }
        .card-title{
          pointer-events: none;
          position: absolute;
          left: 50%;
          top: 50%;
          opacity: 0;
          -webkit-transition: all 1s;
          transition: all 1s;
          -webkit-transform: translate(-50% , -50%);
                  transform: translate(-50% , -50%);
        }
      }
    }
    //pageprojet
    .content-item{
      .e-content{
        display: block;
        height: 100%;
      }
      .media{
        width: 100%;
      }
      .content{
        width:100%;
        min-width: auto!important;
        .txt{
          position: relative;
          right: 0;
          width: 100%;
          min-width: auto!important;
          height: auto!important;
          padding: 20px 20px 0px 20px;
          overflow-x: auto;
          h3{
            margin: 0px 0 10px 0;
          }
        }
        .taxonomy{
          width: 100%;
          min-width: auto!important;
          height: auto;
          background: white;
          position:relative;
          bottom: 0;
          border-top: 2px solid black;
          span{
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -ms-flex-wrap: wrap;
                flex-wrap: wrap;
            margin: auto 0;
            padding-bottom: 10px;
            a{
              margin: 10px 10px 0 10px;
              &:first-child{
                margin-left: 20px!important;
              }
            }
          }
        }
      }
    }
    //page news
    .news{
      width: 100%;
      min-width: auto!important;
      height: auto;
      padding: 10px 20px 10px 20px;
      &:nth-child(1){
        padding-top: 20px;
      }
      h3{
        pointer-events: none;
        margin-bottom: 10px;
      }
    }
    .about{
      width:100%;
      min-width: auto!important;
      height: auto;
      padding: 20px;
      h3{
        pointer-events: none;
        margin-bottom: 10px;
      }
    }
  }

}