#notif-mobile{
  display: block;
  max-width: 100vh;
  position: absolute;
  top: 0;
  padding: 15px;
  color:rgb(255, 255, 255);
  background-color: rgba(38, 35, 51, 0.99);
  z-index: 400;
}
 
 h1{
        font-size: 28px;
        line-height: 1;
        max-width: 90vw;
    }
    h2{
        font-size: 20px;
        line-height: 1;
        max-width: 251px;
    }
    #container-onboarding{
      padding-top: 60px;
      padding-left: 40px;
      padding-right: 40px;
        /* background: linear-gradient(180deg, rgba(7,6,20,0.8673670151654411) 14%, rgba(0,0,0,0) 100%);  */
    }
    #credit{
      font-size: 10px;
    }
    #container-onboarding img {
      width: 200px;
    }
    p{
        font-size: 14px;
    }
#container-onboarding .ptx{
    bottom: -100px;
    right: -20px;
    height: 70vh;
    width: auto;
    z-index: -1;
}
  /* --------------------------------------------------  Map----------------------------------------------------------- */
#ui-map header h2{
  align-items: center;
  margin: 0;
}
#desc-projet{
  display: none;
}
  #ui-map header img{
    width: 50px;
    height: 50px;
  }
    #ui-map header{
        top:20px!important;
        left:20px!important;
        gap: 20px;
    }
    #container-gradient .left-gradient{
        visibility: hidden;
    }
    #reset-north{
      top: 70px;
      right: 0px;    
    }
    #reset-north img{
        width: 80px;
      }
    #controls-map{
        right: 27px;
        top: 170px;
    }
    #controls-map button{
        padding: 9px 0;
        width: 35px;
    }
    #controls-map button img{
        height: 20px;
    }
    #infos-line{
         display: none;
        width: 100vw;
        left: 0;
        top: auto;
        bottom: 0;
        border: 0;
        border-radius: 20px  20px 0 0 ;
        background:
            linear-gradient(
              to bottom,
              hsl(214.29, 9.86%, 13.92%) 0%,
              hsl(214.28, 9.83%, 13.87%) 8.1%,
              hsl(214.25, 9.74%, 13.72%) 15.5%,
              hsl(214.22, 9.6%, 13.5%) 22.5%,
              hsl(214.16, 9.41%, 13.2%) 29%,
              hsl(214.08, 9.15%, 12.83%) 35.3%,
              hsl(213.97, 8.83%, 12.42%) 41.2%,
              hsl(213.82, 8.45%, 11.97%) 47.1%,
              hsl(213.62, 7.99%, 11.49%) 52.9%,
              hsl(213.34, 7.45%, 11%) 58.8%,
              hsl(212.96, 6.85%, 10.52%) 64.7%,
              hsl(212.45, 6.2%, 10.06%) 71%,
              hsl(211.78, 5.54%, 9.65%) 77.5%,
              hsl(211.01, 4.94%, 9.32%) 84.5%,
              hsl(210.31, 4.51%, 9.1%) 91.9%,
              hsl(210, 4.35%, 9.02%) 100%
            );
     
    }
    /* #infos-line-carac{
         width:50% ; 
    } */
    #infos-line-block div#infos-line-plus{
      justify-content: flex-start;
      gap: 10px;
    }
    #infos-line img.item{
        height: 250px;
        top: -80px;
        right: 10px;
    }
    #infos-reduce{
      top: 32vh;
      right: 0;
      padding-top: 3px;
      height: 20px;
      width: 40px;
      text-align: center;
      background-color: #1b1d20;
        border-radius: 10px 10px 0 0;
    }
    #infos-reduce img{
      margin: 0 auto 0 auto;
      transform: rotate(-90deg);
  }

  #toggle-info{
    bottom: auto;
    top: 100px;
    left: 20px;
    transform: none;
  }
  .switch-toggle-info{
    --width: 200px;
  --height: 35px;
  font-size: 13px;
  }
  /* --------------------------------------------------  POV----------------------------------------------------------- */

  #gradient-vue .top-gradient{
    height: 50vh;
  }
  #ui-vue header img{
    width: 50px;
    height: 50px;
  }
    #ui-vue header{
        top:20px!important;
        left:20px!important;
        gap: 20px;
    }

   
     #pano-compass{
        top: 100px;
        right: 10px;
        width: 80px;
        height: 80px;
    }
   
    #ui-vue button{
      font-size: 35px;
        right: 30px;
        width: 44px;
        height: 44px;
        top: 30px;
    }
    #ui-left-vue{
      position: initial;
    }
    #infos-vue{
      position: absolute;
        background: transparent;
        box-shadow: none;
        color: #EBEBEB;
        top: 80px;
        left: 0px;
        width: 75vw;
    }
    #infos-vue p{
        color: inherit;
    }

    #toggle-vue{
        top: auto;
        bottom: 5vw;
        left: 5vw;
        position: fixed;
    }
    #toggle-vue label{
        width: 90vw;
        margin: auto;
    }








  /* --------------------------------------------------  ANIMATIONS----------------------------------------------------------- */


    .slide-in-left {
        -webkit-animation: slide-in-bottom 0.7s cubic-bezier(0.860, 0.000, 0.070, 1.000) both!important;
	        animation: slide-in-bottom 0.7s cubic-bezier(0.860, 0.000, 0.070, 1.000) both!important;
    }  
    /* .slide-out-left {
        -webkit-animation: slide-out-bottom 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both!important;
	        animation: slide-out-bottom 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both!important;
    }
    .slide-out-left-fast {
        -webkit-animation: slide-out-bottom 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both!important;
	        animation: slide-out-bottom 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both!important;
    }
 */












    #container-popup-mobile{
        display: none;
      position: absolute;
      top:0;
      left:0;
      height: 100vh;
      width: 100vw;
      overflow: hidden;
      pointer-events: none;

    }
    #infos-line-mobile{
      pointer-events: auto;
        display: flex;
        flex-direction: column;
        position: absolute;
        gap:30px;
        border-radius:20px;
        width:100vw;
        bottom:0;
        padding:30px;

        padding-bottom: 70px;
    }
    #infos-line-mobile .line-ui-mobile{
        top: 15px;
    }
    #legende-map{
        display: flex;
        width: 100vw;
        left: 0;
        bottom: 0;
    }

      #distance{
        top: 155px!important;
        left :20px!important;
        bottom: auto!important;
      }
      #container-card img{
        max-width: 100%;
        margin: auto;
      }
      #container-card div{display: flex;
        flex-direction: column;
        gap: 30px;}
    #container-vue #ui-vue #infos-vue button{
        right:50px;
        top : 65px;
        left:auto;
        
    }