@font-face {
    font-family: roger;
    src: url(../fonts/DINNextLTPro-Black.woff2) format("woff2"), url(../fonts/DINNextLTPro-Black.woff) format("woff");
}
@font-face {
    font-family: michel;
    src: url(../fonts/DINNextLTPro-Light.woff2) format("woff2"), url(../fonts/DINNextLTPro-Light.woff) format("woff");
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    scroll-behavior: smooth;
}


svg {
    width: 40px;
    height: 40px;
    color: wheat;
    position: absolute;
}

.logo_Dune {
    position: fixed;
    width: 300px;
    top: -3%;
    left: 2%;
}

/* MENU */

.menu {
  width: 40%;
  height: 20%;
  margin: auto;
  position: absolute;
  top: -25%;
  left: 32%;
  background-color: rgba(0,0 ,0 , 0.3);
  border-radius: 5px;
  display: grid;
  grid-template-rows: repeat(2, 1fr);
  grid-template-columns: repeat(3, 1fr);
  align-items: center;
  justify-items: center;
  font-family: michel;
  font-size: larger;
  /* transition: all; */
  animation: 2s;
}

.div_menu>a {
  text-decoration: none;
  color: wheat;
}

#nav_croix {
  color: wheat;
  width: 18%;
  margin: auto;
  margin-left: 40%;
}

.btnMenu {
  position: fixed;
  top: 6%;
  left: 49%;
  width: 3%;
  transition: all;
  animation: 2s;
  z-index: 50;
}

.btnMenu:hover {
  transition: all;
  /* transform: rotateZ(360deg); */
  rotate: 10deg;
  animation-duration: 2s;
  width: 3.2%;
}

#wb_logo {
    top: 5%;
    right: 4%;
    z-index: +2;
}

#leg_logo {
    top: 15%;
    right: 4%;
    z-index: +2;
}

/* Dimensionner les diapos et leur contenu */

main {
    height: 100vh;
    overflow-y: scroll;
    scroll-snap-type: y proximity;
}

.bg {
    height: 100vh;
    font-size: 50vh;
    text-align: center;
    color: white;
    scroll-snap-align: start;
    background-size: cover;
  }
  
/* Ajouter les images en bg */
  .bg:nth-of-type(1) {
    background-image: url(../medias/images/dune-timothee-chalamet.jpg);
    background-attachment: fixed;
  }
  
  .bg:nth-of-type(2) {
    background-image: url(../medias/images/Dune06.webp);
    background-attachment: fixed;
  }
  
  .bg:nth-of-type(3) {
    background-image: url(../medias/images/Dune02.webp);
    background-attachment: fixed;
  }

  .bg:nth-of-type(4) {
    background-image: url(../medias/images/dune-production_01.jpg);
    background-attachment: fixed;
  }

  .bg:nth-of-type(5) {
    background-image: url(../medias/images/dune-timothee-chalamet-rebecca-ferguson.jpeg);
    background-attachment: fixed;
  }


  /* CONTENUS SLIDES */

  h2 {
    font-size: 40px;
    text-align: center;
    font-family: michel;
    font-weight: lighter;
    color: wheat;
}


  /* Slide 2 */

  .slide2>h2 {
    position: relative;
    top: 58vh;
    left: -35vw;
  }

  .slide2>img {
    width: 25vw;
    position: relative;
    top: 16vh;
    left: 20vw;
  }

  .slide2>div {
    font-size: 15px;
    background-color: rgba(150, 150, 150, 80%);
    /* height: 30vh; */
    padding: 40px;
    text-align: justify;
    columns: 25vw;
    column-gap: 50px;
    column-rule: 1px solid wheat;
  }

  /* Slide 3 */

  .slide3>h2 {
    position: relative;
    top: 60vh;
    left: -30vw;
  }

  .infos_persos {
    /* position: relative; */
    background-color: rgba(150, 150, 150, 80%);
    height: 30vh;
  }

  .control_fleches {
    position: relative;
    top: -150px;
    height: 45px;
    color: wheat;
  }

  .fleches {
    position: absolute;
    color: wheat;
  }

  .avant {
    left: 30px;
  }

  .apres {
    right: 30px;
  }


  /* SLIDE 4 */

  .slide4>h2 {
    position: relative;
    top: 45vh;
    left: -30vw;
    z-index: +1;
  }

  .img_film {
    /* position: relative; */
    height: 30vh;
    padding-top: 6vh;
  }

  .control_fleches2 {
    position: relative;
    top: -80px;
    height: 45px;
    color: wheat;
  }

  .fleches2 {
    position: absolute;
    color: wheat;
  }

  .avant2 {
    left: 30px;
  }

  .apres2 {
    right: 30px;
  }


  /* SLIDE 5 */

  .slide5>h2 {
    position: relative;
    top: 48vh;
    left: -30vw;
    z-index: +1;
  }

  .carto {
    /* width: 50vw; */
    height: 50vh;
    margin: auto;
    position: relative;
    top: 35vh;
    background-color: rgba(150, 150, 150, 80%);
    padding: 20px;
   }

   .localisation {
     color: black;
     font-size: large;
     position: absolute;
     left: 8vw;
     top: 35vh;
     display: none;
   }

   .btnLoc {
     border-radius: 5px;
     background-color: black;
     color: blanchedalmond;
     font-size: large;
     padding: 5px;
     position: absolute;
     left: 15vw;
     top: 25vh;
   }

   /* Dimensionner la carte */
  #carte {
  width: 50vw;
  height: 40vh;
  margin: auto;
  position: absolute;
  right: 15vh;
  top: 5vh;
  }

  /* FOOTER */

  footer svg {
    width: 30px;
    height: 30px;
    color: wheat;
    position: absolute;
    right: 4%;
  }

  #fb {
    bottom: 16%;
  }

  #twitter {
      bottom: 10%;
  }

  #insta {
      bottom: 4%;
  }



  /* VIDEO */

  #container_video {
    position: relative;
    width: 50vw;
    height: calc(50vw * 390 / 640);
    margin: auto;
    top: 30%;
    left: -20%;
  }
  
  #video {
    width: 35vw;
    height: calc(35vw * 390 / 640);
    display: block;
    position: absolute;
    top: 16%;
    right: 0;
    z-index: 500;
  }
  
  .scroll {
    position: fixed !important;
    width: 30vw !important;
    height: calc(30vw * 3 / 4) !important;
    top: 5vh !important;
    right: 5% !important;
  }



  /* POP UP */

  .div_popup {
    position: fixed;
    top: 30px;
    right: 120px;
    z-index: 600;
  }

  #titre_popup {
    color: black;
    margin-bottom: 10px;
  }

  .btnPopup{
    background-color: wheat;
    padding: 1em 2em;
    border: none;
    border-radius: 20px;
    cursor: pointer;
    font-size: 15px;
    }

  .btnPopup:hover{
    background-color: rgb(200, 200, 200);}

  .overlay {
    position: fixed;
    left: 0px;
    top:0px;
    background-color: rgba(0,0 ,0 , 0.5);
    width: 100%;
    height: 100%;
    z-index:1;
    display:none;
  }

  .popup {
    margin: 20% auto;
    width : 70%;
    background-color:wheat;
    padding: 1em;
    box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);
    border-radius: 5px;
    color: black;
  }

  .text_popup {
    color: black;
    text-align: center;
    font-size: 20px;
    font-family: Arial, Helvetica, sans-serif;
  }

  .btnClose {
    float: right;
    font-size:30pt;
    cursor: pointer;
    color: black;
    }