:root {
        --color: #5D9B62;
    }
    * {
      -webkit-tap-highlight-color: transparent;
      -webkit-focus-ring-color: transparent;
      outline: none;
      box-sizing:border-box;
    }
    html, body {
      margin: 0;
      height: 100vh;
      background: black;
      display: flex;
      justify-content: center;
      align-items: center;
      font-family: Verdana, Geneva, Tahoma, sans-serif;
    }

    #loader {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: black;
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 5000;
      transition: opacity 0.6s ease, visibility 0.6s ease;
    }

    #loader.hide {
      opacity: 0;
      visibility: hidden;
    }

    #loader-logo {
      width: 160px;
      height: auto;
      animation: glitchy 2s infinite;
      position: relative;
    }

    /* Effet glitch */
    @keyframes glitchy {
      0% { transform: translate(0,0) scale(1); filter: none; }
      10% { transform: translate(-3px,2px) scale(1.05); filter: hue-rotate(45deg) contrast(2); }
      20% { transform: translate(3px,-2px) scale(0.98); filter: hue-rotate(-30deg) brightness(1.4); }
      30% { transform: translate(-2px,1px) scale(1.02); filter: contrast(2) drop-shadow(-2px 0 red); }
      40% { transform: translate(2px,-1px) scale(1.04); filter: drop-shadow(2px 0 blue); }
      50% { transform: translate(0,0) scale(1); filter: none; }
      60% { transform: translate(4px,3px) scale(1.03); filter: hue-rotate(90deg) drop-shadow(-3px 0 green); }
      70% { transform: translate(-4px,-3px) scale(0.97); filter: hue-rotate(-90deg) brightness(1.2); }
      80% { transform: translate(3px,-1px) scale(1.05); filter: contrast(3) drop-shadow(3px 0 purple); }
      100% { transform: translate(0,0) scale(1); filter: none; }
    }

    #loader.hidden {
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
    }

    span, a{
      color:var(--color);
    }

    #back{
      background-image:url("/demo/pictures/backgrounds/back.png");
      background-size:cover;
      background-position:center;
      position:fixed;
      top:0px;
      left:0px;
      width:100%;
      height:100%;
    }

    #icon{
      background-position:center;
      position:fixed;
      top:0px;
      left:0px;
      width:100%;
      height:100%;
      opacity: 0.1;
      background-size: 300px !important;
      background-repeat: no-repeat;
    }

    .swiper-vertical {
      position:fixed;
      right:0px;
      width:55%;
      top:0px;
      box-sizing: border-box;
      height:100%;
    }

    /* slides verticales */
    .swiper-vertical .swiper-slide {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: flex-start;
      text-align:center;
      transition: all 0.3s;
      cursor: pointer;
      opacity:0.8;
      filter:grayscale(0.5);
    }

    .swiper-vertical .swiper-slide:last-child{
      z-index:-1;
    }
    .swiper-vertical .swiper-slide-active {
      z-index:10 !important;
      opacity:1;
      filter:grayscale(0);
    }

    /* carrousel horizontal */
    .swiper-horizontal {
      flex: 1;
      pointer-events: none;
      transition: filter 0.3s;
    }
    .swiper-slide-active .swiper-horizontal {
      pointer-events: auto;
    }

    /* cellules */
    .swiper-horizontal .swiper-slide {
      flex: 0 0 auto; /* largeur auto (peut varier) */
      height: 80px;
      width:120px;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 0.9em;
      padding: 0 10px; /* marge interne pour voir la diff */
      border: 2px solid black;
      cursor: pointer;
      transition: all 0.25s ease;
      background: black;
      color: white;
      background-size:cover;
      background-position:center;
    }

    .icons .swiper-slide.square{
      background-size:30%;
      background-position:center;
      background-repeat:no-repeat;
    }

    .swiper-slide.square{
      width:80px !important;
    }

    .swiper-slide-active .swiper-horizontal .swiper-slide{
      filter:grayscale(0);
    } 

    /* cellule active */
    .swiper-slide-active .swiper-horizontal .swiper-slide.swiper-slide-active {
      border: 2px solid var(--color);
    }

    /* cellule "titre" = noire */
    .swiper-horizontal .swiper-slide.title-cell {
      background: #000 !important;
      color: white;
      font-weight: bold;
      width: 80px;
    }

    /* Boutons de navigation horizontale */
    .nav-button {
      position: fixed;
      top: 50%;
      transform: translateY(-50%);
      background-color: hsla(0, 0%, 100%, 0.75);
      background-position:center;
      background-repeat:no-repeat;
      background-size:70%;
      color: #fff;
      border: none;
      font-size: 30px;
      cursor: pointer;
      height:45px;
      width:45px;
      z-index: 1000;
      border-radius: 50%;
      user-select: none;
      transition: 0.3s;
    }
    .nav-button:hover {
      background-color: hsla(0, 0%, 100%, 1);
    }
    .nav-left {
      right: calc(55% - 70px);
      background-image:url("/demo/pictures/icons/arrow_left.png");
    }
    .nav-right {
      right: 30px;
      background-image:url("/demo/pictures/icons/arrow.png");
    }

    #title{
      position: absolute;
      top: calc(50% - 120px);
      left: 45%;
      background-color: black;
      padding: 7px;
      padding-left: 20px;
      padding-right: 20px;
      color: white;
      border-radius: 10px;
      font-size: 27px;
      font-family: "Oswald", sans-serif;
      letter-spacing: 2px;
      z-index:2;
      transition:0.3s;
    }

    #cat{
      position: absolute;
      top: calc(50% - 155px);
      left: 45%;
      background-color: black;
      padding: 4px;
      padding-left: 15px;
      padding-right: 15px;
      color: var(--color);
      border-radius: 10px;
      font-size: 13px;
      font-family: "Oswald", sans-serif;
      letter-spacing: 2px;
      z-index:2;
      font-weight:bold;
      transition:0.3s;
      pointer-events:none;
    }

    @media screen and (max-height: 450px){
      .nav-button {
            top: 59%;
      }
      #title{
        top: calc(60% - 130px);
      }
      #title{
        font-size:22px;
        top: calc(60% - 115px);
      }
      #cat{
        top: calc(60% - 145px);
        font-size:11px;
      }
    }

    video {  
      width: 100vw;
      height: 100vh;
      min-width: 100%; 
      min-height: 100%;
      object-fit: cover;
      position: fixed;
      top: 0;
      left: 0;
      filter: grayscale(100%) blur(1px) brightness(50%);
      transition: filter 0.5s !important;
    }

    video.active{
      opacity:1;
      filter: none;
      transition: filter 0.5s;
    }

    #cover {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      display: none;
      width:45%;
      transition:0.5s;
      -webkit-box-shadow: 0px 0px 20px 5px var(--color); 
      box-shadow: 0px 0px 20px 5px var(--color);
    }

    #cover.shht{
      opacity:0.35 !important;
      transition:0.5s;
    }

    #back_cover, #cover{
      position: fixed;
      display: block;
      width: 220px;
      height: 220px;
      border: 0;
      border-radius: 50%;
      overflow: hidden;
      left:calc(22.5% - 130px);
      top:calc(50% - 110px);
      transition:0.5s;
    }

    #back_cover.shht, #cover.shht{
      left:calc(50% - 110px);
      transition:0.5s;
      opacity:0.35 !important;
    }

    #back_cover::before{
      content: "";
      position: absolute;
      inset: 0;
      border-radius: 50%; 
      padding: 5px; 
      background:black;
      -webkit-mask: 
        linear-gradient(#fff 0 0) content-box, 
        linear-gradient(#fff 0 0);
      -webkit-mask-composite: xor;
              mask-composite: exclude; 
      background:linear-gradient(-270deg, var(--color) var(--progress), black var(--progress_2)) !important;
    }

    #cover.loaded {
      display: block;
    }

    #main_cover {
      position: relative;
      display: block;
      width: 220px;
      height: 220px;
      border: 0;
      border-radius: 50%;
      background-image: url(https://himalayasingh.github.io/audio-player-play-and-pause-animation-1/img/f1.gif);
      background-size: cover;
      background-position: 50%;
      background-repeat: no-repeat;
      cursor: pointer;
      overflow: hidden;
      transition: 0.1s ease transform;
      margin-top:0px;
    }

    #main_cover.insta_discover{
      background-image:url("../pictures/icons/insta_discover.png") !important;
      background-size:70%;
    }
    #main_cover.album_discover{
      background-image:url("../pictures/icons/album_discover.png") !important;
      background-size:40%;
    }
    #main_cover.presskit_discover{
      background-image:url("../pictures/icons/presskit_discover.png") !important;
      background-size:40%;
    }

    #main_cover.web_discover{
      background-image:url("../pictures/icons/web_discover.png") !important;
      background-size:40%;
    }

    .shht{
      opacity:0.6;
      transition: 0.3s;
    }

    #title.shht,
    #cat.shht, .swiper.shht, button.shht {
      opacity: 0;
      transition: 0.3s;
    }

    #main_cover:active {
      transform: scale(0.85);
    }

    #main_cover.active {
      background-image: url(https://himalayasingh.github.io/audio-player-play-and-pause-animation-1/img/bg.gif);
      opacity:0.9;
      transform: scale(0.85);
    }

    #main_cover.inactive {
      background-image: url(https://himalayasingh.github.io/audio-player-play-and-pause-animation-1/img/f1.gif);
    }

    #main {
      width: 54px;
      height: 60px;
      overflow: hidden;
    }

    .bar {
      position: absolute;
      width: 8px;
      background-color: #fff;
      border-radius: 10px;
      transition: 0.4s ease transform, 0.4s ease top, 0.4s ease bottom;
    }

    #_1 {
      top: 0;
      bottom: 0;
    }

    #_2 {
      top: -13px;
      left: 23px;
      height: 60px;
      transform: rotateZ(-60deg) translateY(0px);
    }

    #_3 {
      top: 13px;
      left: 23px;
      height: 60px;
      transform: rotateZ(60deg) translateY(0);
    }

    #_4,
    #_5 {
      top: 27px;
      right: 0;
      bottom: 27px;
    }

    #main_cover.active #_2 {
      transform: rotateZ(-60deg) translateY(53px);
    }

    #main_cover.active #_3 {
      transform: rotateZ(60deg) translateY(-53px);
      transition-delay: 0.5s;
    }

    #main_cover.active #_4 {
      bottom: 0;
    }

    #main_cover.active #_5 {
      top: 0;
      transition-delay: 0.5s;
    }

    #main_cover.inactive #_2 {
      transform: rotateZ(-60deg) translateY(0);
    }

    #main_cover.inactive #_3 {
      transform: rotateZ(60deg) translateY(0);
      transition-delay: 0.5s;
    }

    #main_cover.inactive #_4 {
      bottom: 27px;
    }

    #main_cover.inactive #_5 {
      top: 27px;
      transition-delay: 0.5s;
    }

    .center {
      position: absolute;
      top: 50%;
      right: 0;
      left: 0;
      margin: 0 auto;
      transform: translateY(-50%);
    }

    @keyframes big-glitch {
      0% {
        transform: translate(0,0);
        filter: grayscale(100%) blur(1px) brightness(50%);
        clip-path: inset(0 0 0 0);
      }
      10% {
        transform: translate(-10px, 5px);
        filter: contrast(2) hue-rotate(45deg) drop-shadow(-5px 0 red);
        clip-path: inset(15% 0 70% 0);
      }
      20% {
        transform: translate(10px, -5px);
        filter: contrast(2) hue-rotate(-45deg) drop-shadow(5px 0 blue);
        clip-path: inset(60% 0 20% 0);
      }
      30% {
        transform: translate(-15px, 0);
        filter: contrast(3) hue-rotate(90deg) drop-shadow(-5px 0 green);
        clip-path: inset(30% 0 50% 0);
      }
      40% {
        transform: translate(15px, 0);
        filter: hue-rotate(180deg) drop-shadow(10px 0 red);
        clip-path: inset(50% 0 30% 0);
      }
      50% {
        transform: translate(0,0);
        filter: grayscale(100%) blur(1px) brightness(50%);
        clip-path: inset(0 0 0 0);
      }
      100% {
        transform: translate(0,0);
        filter: grayscale(100%) blur(1px) brightness(50%);
        clip-path: inset(0 0 0 0);
      }
    }

    video.glitch-effect {
      animation: big-glitch 0.5s steps(2, end);
    }

    #hd_toggle {
      position: fixed;
      bottom: 15px;
      right: 15px;
      background: black;
      color: white;
      font-family: "Oswald", sans-serif;
      font-size: 14px;
      font-weight: bold;
      padding: 5px 10px;
      border: 2px solid var(--color);
      border-radius: 6px;
      cursor: pointer;
      z-index: 2000;
      user-select: none;
      transition: 0.3s;
    }
    #hd_toggle.active {
      background: var(--color);
      color: black;
    }

    #await{
      z-index:999;
      background-color:rgba(0,0,0,0.2);
      position:fixed;
      top:0px;
      left:0px;
      width:100%;
      height:100%;
      display:none;
      backdrop-filter: blur(3px);
    }

    .button_cust{
  padding:10px;
  color:white;
  border:solid 1px white;
  cursor:pointer;
  width:120px;
  font-size:12px;
  text-align:center;
  margin-right:10px;
  display:inline-block;
}

.button_cust.white{
  color:black;
  background-color:white;
  width:120px;
}

    .orient{
      position:fixed;
      top:15px;
      left:15px;
      background-color:rgba(0,0,0,0.8);
      z-index:1000;
      display:none;
      text-align:center;
      border-radius:8px;
      width:calc(100% - 30px);
      -webkit-box-shadow: 5px 5px 15px 5px rgba(0,0,0,0.28); 
      box-shadow: 5px 5px 15px 5px rgba(0,0,0,0.28);
      transition:0.5s;
    }

    .orient.hide, #await.hide{
      opacity:0;
      visibility:hidden;
      pointer-events:none;
      display:none !important;
    }

    .rotate-phone-please {
      color: #fff;
      font-family: 'Roboto', sans-serif;
      margin:auto;
      text-align:left;
    }

    .rotate-phone-please table td{
      padding-left: 30px;
      padding-right: 30px;
      padding-top:10px;
      padding-bottom:10px;
    }

    .phone {
      display: inline-block;
      width: 30px;
      height: 60px;
      border: 3px solid #fff;
      border-radius: 5px;
      position: relative;
      animation-timing-function: ease-in-out;
      animation-iteration-count: infinite;
      animation-name: anim-rotate;
      animation-duration: 2s;
    }

    .phone:after {
      content:'';
      width: 110%;
      border-bottom: 3px solid #fff;
      position: absolute;
      top: 4px;
      left: -1px;
    }

    .phone:before {
      content:'';
      width: 110%;
      border-bottom: 3px solid #fff;
      position: absolute;
      bottom: 6px;
      left: -1px;
    }

    .message{
      margin-top: 10px;
    }

    @keyframes anim-rotate {
      0%, 10% { transform: rotate(0deg) }
      40%, 60% { transform: rotate(90deg) }
      95%, 100% { transform: rotate(0deg) }
    }

    @media only screen and (max-width: 800px) {
      #main_cover {
        width: 180px;
        height: 180px;
        margin-top:0px;
      }

      #back_cover, #cover{
        width: 180px;
        height: 180px;
        left:calc(20% - 90px);
        top:calc(50% - 100px);
      }

      #back_cover.shht, #cover.shht{
        left:calc(50% - 90px);
      }
    }

    @media screen and (orientation:portrait) and (max-width: 650px) {
      .orient{
        display:table !important;
      }

      #await{
        display:block;
      }
      .swiper-vertical {
        width: 100%;
        bottom: 0px;
        top: unset;
        height: 50%;
      }
      .nav-left {
        left: 20px;
        bottom:17%;
        top:unset;
        right:unset;
      }
      .nav-right {
        right: 20px;
        bottom:17%;
        top:unset;
      }
      #title{
        bottom: calc(35% + 10px);
        top: unset;
        left:unset;
      }
      body.force #title.shht{
        bottom: calc(18% + 10px);
        opacity:0.8 !important;
      }

      body.force #cat.shht{
        bottom: calc(18% + 70px);
        opacity:0.8 !important;
      }

      body.force video {  
        object-fit: contain;
        height:100%;
      }

      body.force #check_quality.shht, body.force #presskit.shht{
        opacity:0.3 !important;
      }

      body.force #cover.shht, body.force #cover, body.force #back_cover.shht, body.force #back_cover{
        top: 6%;
      }

      body.force #title.shht h1, body.force #title.shht span {
        padding:0px !important;
        background-color:transparent !important;
      }
      #cat{
        bottom: calc(35% + 70px);
        top: unset;
        left:unset;
      }
      #cover, #back_cover{
        left:calc(50% - 90px);
        top: calc(50% - 210px);
      }

      #cover.shht, #back_cover.shht{
        top: calc(50% - 90px)
      }

      body.force #cover.shht, body.force #cover, body.force #back_cover.shht, body.force #back_cover{
        top: 6%;
      }

      body.force #cover.hey{
        top: calc(50% - 210px) !important;
      }
    }

    @media screen and (orientation:portrait) and (max-width: 650px) and (max-height: 780px) {

      body.force #cover.shht, body.force #cover, body.force #back_cover.shht, body.force #back_cover{
        top: 5%;
      }

    }

    @media screen and (orientation:portrait) and (max-width: 650px) and (max-height: 740px) {

      body.force #cover.shht, body.force #cover, body.force #back_cover.shht, body.force #back_cover{
        top: 4%;
      }
    }