@keyframes searchBar {
          0% {
              transform: scaleY(0);
          }
          100% {
              transform: scaleY(1);
          }
      }
      
      .nav-wrapper {
          position: relative;
          z-index: 3;
          font-size: 0.35rem;
          text-align: center;
          @include mq(mobile) {
              position: absolute;
              left: 0;
              right: 0;
              top: $heroHeightMobile;
          }
          @include mq(tablette) {
              top: $heroHeightTablette;
              font-size: 0.2rem;
          }
          @include mq(desktop) {
              top: $navHeightDesktop;
          }
          .usager {
              position: absolute;
              text-align: left;
              top: 19px;
              left: 70px;
              p {
                  font-size: 11px;
                  padding-top: 0.15em;
                  color: $colorRectangle2;
              }
              @include mq(tablette) {
                  top: 60px;
                  left: 20px;
                  display: none;
                  width: 25%;
              }
          }
          .nav-mask {
              transition: height 0.3s ease-in-out;
              height: $heroHeightMobile;
              overflow: hidden;
              padding: 1.70em 0em 1.70em 0em;
              background-color: white;
              box-shadow: 2px 11px 28px -4px rgba(0, 0, 0, 0.10);
              li:nth-child(2),
              .links-item:nth-child(3) {
                  border-left: 1px solid $colorRectangle2;
              }
              ul {
                  padding-top: 4.5em;
                  @include mq(tablette) {
                      padding-top: 0em;
                  }
              }
              .links-item {
                  display: block;
                  text-transform: uppercase;
                  padding: 0.5em;
                  @include mq(tablette) {
                      display: inline-block;
                  }
              }
              .facebook {
                  display: inline-block;
                  margin-top: 1em;
                  padding: 0em 0.2em 0em 0.2em;
                  font-size: 0.65rem;
                  @include mq(tablette) {
                      position: absolute;
                      font-size: 0.25rem;
                      top: 20px;
                      right: 140px;
                      padding: 0;
                      margin-top: 0;
                  }
                  @include mq(desktop) {
                      right: 170px;
                  }
              }
              .twitter {
                  display: inline-block;
                  font-size: 0.65rem;
                  padding: 0em 0.2em 0em 0.2em;
                  @include mq(tablette) {
                      position: absolute;
                      padding:0;
                      font-size: 0.25rem;
                      top: 20px;
                      right: 125px;
                  }
                  @include mq(desktop) {
                      right: 150px;
                  }
              }
              .links-item:nth-child(4) {
                  @include mq(tablette) {
                      right: 20px;
                      position: absolute;
                      background-color: $colorRectangle2;
                  }
                  @include mq(desktop) {
                      right: 25px;
                  }
              }
              .actif {
                  color: lighten($colorText, 40%);
              }
              .link {
                  transition: color ease-out 0.2s;
                  &:not(.actif):hover,
                  &:not(.actif):active {
                      color: lighten($colorText, 40%);
                  }
              }
              @include mq(tablette) {
                  height: auto;
                  padding: 1.25em 0em 1.25em 0em;
              }
          }
          .burger {
              z-index: 2;
              position: absolute;
              top: -55px;
              right: 15px;
              transform: translateY(120%);
              font-size: 1rem;
              transition: color ease-out .5s;
              &:link,
              &:visited {
                  color: $colorText;
              }
              &:hover,
              &:active {
                  color: $colorRectangle2;
              }
              @include mq(tablette) {
                  display: none;
              }
          }
          .avatar {
              width: 50px;
              height: 50px;
              border-radius: 50%;
              border: 1px solid $colorRectangle2;
              position: absolute;
              top: 5px;
              left: 10px;
              @include mq(tablette) {
                  width: 100px;
                  height: 100px;
                  border: 2px solid $colorRectangle2;
                  top: -25px;
                  left: 20px;
              }
              @include mq(desktop) {
                  width: 150px;
                  height: 150px;
                  border: 3px solid $colorRectangle2;
                  top: -50px;
                  left: 25px;
              }
          }
      }
      
      header {
          background-image: url(../img/hero/photo-320.png);
          background-size: cover;
          height: 200px;
          background-position: 35% 50%;
          text-align: center;
          padding: 2em 1em;
          position: relative;
          @include mq(mobile) {
              height: 350px;
          }
          @include mq(tablette) {
              height: 500px;
              background-image: url(../img/hero/photo-1800.png);
          }
          @include mq(desktop) {
              height: 100vh;
              background-image: url(../img/hero/photo-3840.png);
          }
          &::after {
              display: inline-block;
              position: absolute;
              top: 20px;
              right: 10px;
              width: 30px;
              height: 30px;
              content: "";
              background-image: url(../img/guideTV.jpg);
              background-size: 100%;
              background-repeat: no-repeat;
              @include mq(mobile) {
                  top: 30px;
                  right: 15px;
                  width: 50px;
                  height: 50px;
              }
              @include mq(tablette) {
                  top: 40px;
                  right: 20px;
                  width: 75px;
                  height: 75px;
              }
              @include mq(desktop) {
                  top: 50px;
                  right: 25px;
                  width: 100px;
                  height: 100px;
              }
          }
          .header {
              text-align: center;
              position: absolute;
              left: 0;
              right: 0;
              top: 50%;
              transform: translateY(-50%);
          }
      }
      
      main {
          .search {
              position: relative;
              overflow: hidden;
              right: 0;
              left: 0;
              padding: 0.5em 3.5em 0.5em 0em;
              margin-bottom: 1.2em;
              top: 55px;
              @include mq(tablette) {
                  margin-bottom: 0.75em;
                  top: 55px;
              }
              input {
                  position: absolute;
                  text-align: center;
                  font-family: Fontawesome;
                  font-size: 0.3rem;
                  width: 35px;
                  height: 35px;
                  background-color: $colorRectangle1;
                  border: 1px solid $colorRectangle2;
                  padding: 0em;
                  right: 20px;
                  top: 5px;
                  transition: width 0.4s ease-in-out;
                  @include mq(tablette) {
                      font-size: 0.25rem;
                      width: 30px;
                      height: 30px;
                      top: 0;
                  }
              }
              input:focus {
                  position: absolute;
                  text-align: left;
                  font-size: 0.3rem;
                  width: 35%;
                  height: 35px;
                  background-color: $colorRectangle1;
                  border: 1px solid $colorRectangle2;
                  padding: 0.2em;
                  right: 20px;
                  top: 5px;
                  @include mq(tablette) {
                      font-size: 0.25rem;
                      height: 30px;
                      top: 0;
                  }
              }
          }
          ul {
              margin-top: 0.2em;
              @include mq(tablette) {
                  margin: 0 auto;
                  text-align: center;
              }
          }
          .serie {
              clear: both;
              background-color: $colorRectangle1;
              margin: 5px 20px 8px 20px;
              position: relative;
              @include mq(tablette) {
                  display: inline-block;
                  vertical-align: top;
                  width: auto;
                  margin: 0.2em;
              }
              section {
                  position: absolute;
                  right: 0;
                  top: 0;
                  height: 100%;
                  width: 15%;
                  background-color: $colorRectangle2;
                  @include mq(tablette) {
                      height: 0.8em;
                      width: 100%;
                      margin: 0 0 0 0;
                  }
                  .favori::after {
                      content: "\f004";
                      font-family: FontAwesome;
                      position: absolute;
                      top: 10%;
                      right: 0;
                      left: 0;
                      text-align: center;
                      font-size: 0.7rem;
                      color: $colorNonSelect;
                      @include mq(tablette) {
                          top: calc(50% - 0.5em);
                          right: 20%;
                          left: auto;
                          font-size: 0.5rem;
                      }
                  }
                  .subscribe::after {
                      content: "\f00c";
                      font-family: FontAwesome;
                      position: absolute;
                      bottom: 7%;
                      right: 0;
                      left: 0;
                      text-align: center;
                      font-size: 0.8rem;
                      color: $colorNonSelect;
                      @include mq(tablette) {
                          top: calc(50% - 0.5em);
                          left: 20%;
                          right: auto;
                          font-size: 0.6rem;
                      }
                  }
              }
              span {
                  font-weight: bold;
              }
              div:nth-child(2) {
                  float: right;
                  width: calc(100% - 65px);
                  padding: 0.2em 0em 0.3em 0.3em;
                  @include mq(mobile) {
                      width: calc(100% - 75px);
                  }
                  @include mq(tablette) {
                      float: none;
                      width: 100%;
                      padding: 0em 0em 0.2em 0em;
                  }
              }
              a {
                  float: left;
                  width: 85%;
                  @include mq(tablette) {
                      float: none;
                      width: 100%;
                  }
              }
              .serie-affiche {
                  width: 60px;
                  float: left;
                  @include mq(mobile) {
                      width: 75px;
                  }
                  @include mq(tablette) {
                      float: none;
                      width: auto;
                      height: 260px;
                      padding: 0.8em 0.3em 0em 0.3em;
                  }
              }
              .serie-titre {
                  padding-bottom: 0.7em;
                  @include mq(tablette) {
                      padding-bottom: 0em;
                      font-size: 0.3rem;
                  }
              }
              p {
                  font-size: 0.25rem;
                  padding: 0.3em 0em 0em 0em;
                  @include mq(tablette) {
                      padding-bottom: 0em;
                      font-size: 0.2rem;
                  }
              }
              .state {
                  width: 100%;
                  height: 100%;
                  position: relative;
              }
          }
      }
      
      section {
          .vedette {
              position: relative;
              margin: 1em 0.5em 2em 0.5em;
              .prev::after {
                  position: absolute;
                  bottom: -8%;
                  left: calc(50% - 1.5em);
                  content: "\f060";
                  font-family: Fontawesome;
                  color: $colorText;
                  font-size: 0.25rem;
                  z-index: 1;
                  @include mq(tablette) {
                      bottom: 10%;
                  }
              }
              .next::before {
                  position: absolute;
                  bottom: -8%;
                  right: calc(50% - 1.5em);
                  content: "\f061";
                  font-family: Fontawesome;
                  color: $colorText;
                  font-size: 0.25rem;
                  @include mq(tablette) {
                      bottom: 10%;
                  }
              }
              .slick-dots {
                  display: flex;
                  justify-content: center;
                  button {
                      display: block;
                      width: 13px;
                      height: 13px;
                      border: none;
                      margin: 2em 0.5em 0.5em 0.5em;
                      border-radius: 50%;
                      background-color: $colorRectangle1;
                      text-indent: -9999px;
                  }
                  li.slick-active button {
                      background-color: $colorRectangle2;
                  }
              }
          }
          .serie-vedette {
              margin-right: auto;
              margin-left: auto;
              text-align: center;
              padding: 0.5em 0em 1em 0em;
              @include mq(tablette) {
                  margin: 1em;
                  text-align: justify;
              }
              @include mq(desktop) {
                  margin: 1em 5.5em 1em 5.5em;
              }
              background-color: $colorRectangle1;
              img {
                  width: 250px;
                  float: none;
                  margin: 0 auto;
                  padding: 0.5em 0em 0em 0em;
                  @include mq(tablette) {
                      padding: 0.2em;
                      width: 220px;
                      float: left;
                  }
                  @include mq(desktop) {
                      width: 250px;
                  }
              }
              div {
                  float: none;
                  padding: 0.3em;
                  @include mq(tablette) {
                      width: calc(100% - 220px);
                      padding: 0.3em;
                      float: left;
                  }
                  @include mq(desktop) {
                      width: calc(100% - 250px);
                      padding: 0.5em;
                  }
                  p {
                      text-align: center;
                      margin-top: 1em;
                      font-size: 0.22rem;
                      @include mq(tablette) {
                          text-align: justify;
                      }
                      span {
                          text-align: center;
                          display: block;
                          padding-top: 0.5em;
                          padding-bottom: 0.5em;
                          font-size: 0.2rem;
                          font-weight: bold;
                          @include mq(tablette) {
                              padding-top: 0.8em;
                              padding-bottom: 0em;
                              text-align: justify;
                          }
                          @include mq(desktop) {
                              padding-top: 1em;
                          }
                      }
                  }
              }
          }
      }
      
      footer {
          background-color: $colorRectangle1;
          text-align: center;
          .retour {
              margin-bottom: 2em;
              font-size: 0.2rem;
              border: 1px solid $colorRectangle2;
              background-color: white;
              padding: 0.5em;
              &:hover {
                  background-color: $colorRectangle1;
              }
          }
          nav {
              font-size: 10px;
              margin: 1em 5em 1em 5em;
              padding: 0.5em;
              background-color: $colorRectangle2;
              li {
                  margin: 0.5em;
                  a {
                      transition: color 0.3s ease-in-out;
                      &:hover {
                          color: lighten($colorText, 40%);
                      }
                  }
              }
              .facebook {
                  display: inline-block;
              }
              .twitter {
                  display: inline-block;
              }
          }
          p {
              font-size: 0.150rem;
              margin: 2em 3em 1em 3em;
          }
      }

 

Close Menu