grav-lecampus/user/themes/lecampus/templates/scss/theme/_mobile.scss

@media screen and (max-width: 960px) {
  header nav{
    position: relative;
    width: 90%;
    .dropmenu{
      background: white;
      display: none;
      position: absolute;
      left: -6%;
      top: 100px;
      width: auto!important;
      height: auto;
      &>ul{
        flex-direction: column!important;
        &>li{
          text-align: left;
          &>ul{
            margin: auto;
            &>li{
              text-align: left;
              margin-left: 10px;
              a{
                font-family: $Regular;
              }
            }
          }
          &> a{
            border: none;
            line-height: 2rem;
          }
        }
      }
      &.active{
        display: block;

      }
    }
    .logo{
      margin: auto;
    }
    .navTrigger {
      cursor: pointer;
      width: 30px;
      height: 25px;
      margin: auto 0;
      left: 0;
      top: 0;
      bottom: 0;
    }
    .navTrigger i {
      background-color: $light-blue;
      border-radius: 2px;
      content: '';
      display: block;
      width: 100%;
      height: 4px;
    }
    .navTrigger i:nth-child(1) {
      -webkit-animation: outT 0.8s backwards;
      animation: outT 0.8s backwards;
      -webkit-animation-direction: reverse;
      animation-direction: reverse;
    }
    .navTrigger i:nth-child(2) {
      margin: 5px 0;
      -webkit-animation: outM 0.8s backwards;
      animation: outM 0.8s backwards;
      -webkit-animation-direction: reverse;
      animation-direction: reverse;
    }
    .navTrigger i:nth-child(3) {
      -webkit-animation: outBtm 0.8s backwards;
      animation: outBtm 0.8s backwards;
      -webkit-animation-direction: reverse;
      animation-direction: reverse;
    }
    .navTrigger.active i:nth-child(1) {
      -webkit-animation: inT 0.8s forwards;
      animation: inT 0.8s forwards;
    }
    .navTrigger.active i:nth-child(2) {
      -webkit-animation: inM 0.8s forwards;
      animation: inM 0.8s forwards;
    }
    .navTrigger.active i:nth-child(3) {
      -webkit-animation: inBtm 0.8s forwards;
      animation: inBtm 0.8s forwards;
    }
    @-webkit-keyframes inM {
      50% {
        -webkit-transform: rotate(0deg);
      }
      100% {
        -webkit-transform: rotate(45deg);
      }
    }
    @keyframes inM {
      50% {
        transform: rotate(0deg);
      }
      100% {
        transform: rotate(45deg);
      }
    }
    @-webkit-keyframes outM {
      50% {
        -webkit-transform: rotate(0deg);
      }
      100% {
        -webkit-transform: rotate(45deg);
      }
    }
    @keyframes outM {
      50% {
        transform: rotate(0deg);
      }
      100% {
        transform: rotate(45deg);
      }
    }
    @-webkit-keyframes inT {
      0% {
        -webkit-transform: translateY(0px) rotate(0deg);
      }
      50% {
        -webkit-transform: translateY(9px) rotate(0deg);
      }
      100% {
        -webkit-transform: translateY(9px) rotate(135deg);
      }
    }
    @keyframes inT {
      0% {
        transform: translateY(0px) rotate(0deg);
      }
      50% {
        transform: translateY(9px) rotate(0deg);
      }
      100% {
        transform: translateY(9px) rotate(135deg);
      }
    }
    @-webkit-keyframes outT {
      0% {
        -webkit-transform: translateY(0px) rotate(0deg);
      }
      50% {
        -webkit-transform: translateY(9px) rotate(0deg);
      }
      100% {
        -webkit-transform: translateY(9px) rotate(135deg);
      }
    }
    @keyframes outT {
      0% {
        transform: translateY(0px) rotate(0deg);
      }
      50% {
        transform: translateY(9px) rotate(0deg);
      }
      100% {
        transform: translateY(9px) rotate(135deg);
      }
    }
    @-webkit-keyframes inBtm {
      0% {
        -webkit-transform: translateY(0px) rotate(0deg);
      }
      50% {
        -webkit-transform: translateY(-9px) rotate(0deg);
      }
      100% {
        -webkit-transform: translateY(-9px) rotate(135deg);
      }
    }
    @keyframes inBtm {
      0% {
        transform: translateY(0px) rotate(0deg);
      }
      50% {
        transform: translateY(-9px) rotate(0deg);
      }
      100% {
        transform: translateY(-9px) rotate(135deg);
      }
    }
    @-webkit-keyframes outBtm {
      0% {
        -webkit-transform: translateY(0px) rotate(0deg);
      }
      50% {
        -webkit-transform: translateY(-9px) rotate(0deg);
      }
      100% {
        -webkit-transform: translateY(-9px) rotate(135deg);
      }
    }
    @keyframes outBtm {
      0% {
        transform: translateY(0px) rotate(0deg);
      }
      50% {
        transform: translateY(-9px) rotate(0deg);
      }
      100% {
        transform: translateY(-9px) rotate(135deg);
      }
    }
  }
  .gal{
    .title_gal{
      max-width: 80%!important;
      top: 15vw!important;
    }
    .content_gal{
      width: 2%!important;
    }
  }
  .entete .entete_c{
    width: 95%!important;
    margin: 30px auto!important;
  }
  .content{
    width: 80%!important;
  }
  .sidebar{
    position: relative!important;
    width: 350px!important;
    margin: 0 auto!important;
  }
  #devis{
    .title{
      width: 100%!important;
      height: auto!important;
      transform: translateX(0px)!important;
      border-radius: 0px!important;
      h4{
        margin-top: 15px!important;
        font-size: 1.3rem!important;
        margin: auto!important;
        transform: translateY(0%)!important;
      }
    }
    .txt{
      width: 100%!important;
      height: auto!important;
      background: $red!important;
      margin: auto!important;
      p{
        color: white!important;
        padding: 15px 55px !important;
        strong{
          font-size: 1rem!important;
        }
      }
    }
    .img{
      width: auto!important;
    }
    .demander-votre-devis{
      transform: translate(0px, 40%)!important;
      right: 30px!important;
    }
  }

  #devis.item .title, #devis.sublog .title{
    border-radius: 30px!important;
  }
  #item .demander-votre-devis, #sublog .demander-votre-devis{
    width: 300px!important;
    height: 110px!important;
    margin-top: -55px!important;
    a{
      display: inline-flex!important;
    }
    p:nth-of-type(2){
      display: none!important;
    }
    img{
      margin-left: 20px!important;
      margin-top: 0px!important;
    }
  }
  .start:not(#form)#archive, .start:not(#form)#calendrier{
    width: 80%!important;
  }

  .start:not(#form) .body-wrapper .card{
    width: calc((100% / 3) - 7.5px)!important;
  }
  .start#form .body-wrapper form{
    width: 90%!important;
  }
  .start#form .body-wrapper form > div.button-wrapper button{
    margin-right: 5%!important;
  }
  .sidebar{
    padding: 20px 0;
    ::before{
      display: block;
      width: 100vw;
      height: 100%;
      content: '';
      background-image: url(/user/themes/lecampus/images/Trame-bleu.svg);
      background-repeat: no-repeat;
      background-position: center;
      background-size: cover;
      position: absolute;
      top: 0;
      margin-left: -90%;
      z-index: -1;
    }
  }
  .start:not(#form) .body-wrapper .event{
    width: 90%!important;
  }
  .start:not(#form)#event .title{
    width: 90%!important;
  }
}

@media screen and (max-width: 750px) {
  .gal .title_gal{
    display: none!important;
  }
  .entete{
    padding: 0!important;  
     p{
      font-size: 1rem;
      line-height: 1.4rem;
    }
  }
  #home .content > p{
    width: 100%!important;
  }
}