* {
    margin:0;
    padding:0;
    background-color: var(--couleur4);
}
:root {
    --couleur1:rgb(255, 254, 254);
    --couleur4 :black;
    --couleur2 :rgb(18, 233, 37);
}


.body {
    font-size: 16pt;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-family: "Ojuju", sans-serif;
    background-color: var(--couleur4);

}

/* ******************** NAV BAR ******************** */


.topnav {
  background-color: black;
  display: flex;
  align-items: center;
  width: 100%;
  font-family: "Nothing You Could Do", cursive;
  font-weight: bold;
  overflow: hidden;
  color:black;
}
.topnav_link {
  color: white;
  padding: 12px;
  overflow: hidden;
  
}
#menu {
  float:right;
  padding:0 0 0 0;}

#menu li {
  float:left;
  padding-left:3px;
  text-decoration: none;}

#menu li a {
  display:block;
  font-size:24px;
  color:#faf3ed;
  line-height:40px;
  padding:0 20px;
  letter-spacing:-1px;
 text-decoration: none;}
  
#menu li a.active{
  text-decoration:none;
  color:rgb(18, 233, 37);
 
}


/* hide responsive menu */
#topnav_hamburger_icon,
#topnav_responsive_menu {
  display: none;
}

@media only screen and (max-width: 760px) {
  /* hide classic menu */
  #topnav_menu {
    display: none;
  }

  /* position home link at left and hamburger at right */
  #home_link {
    flex-grow: 1;
  }

  /* disable horizontal scrolling  */
  #root {
    position: relative;
    overflow-x: hidden;
  }

  /* show responsive menu and position at the right of the screen */
  #topnav_responsive_menu {
    display: block;
    position: absolute;
    margin: 0;
    right: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    z-index: 99;
    transform-origin: 0% 0%;
    transform: translate(200%, 0);
    transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1);
    font-family: "Nothing You Could Do", cursive;
  }

  #topnav_responsive_menu ul {
    display: flex;
    flex-direction: column;
    justify-content: center;
  align-content: center;
  align-items: center;
  text-align: center;
    position: absolute;
    margin: 0;
    right: 0;
    top: 0;
    min-width: 35vw;
    height: 50vh;
    padding: 56px 0 0;
    margin-right: 30px;
    background: black;
    list-style-type: none;
    -webkit-font-smoothing: antialiased;
    border:solid 3px white;
  }

  #topnav_responsive_menu li {
    padding: 12px 24px;
  }

  #topnav_responsive_menu a {
    white-space: nowrap;
    color:white;
    text-decoration: none;
  }

  /* And let's slide it in from the right */
  #topnav_responsive_menu.open {
    transform: none;
    position: fixed;
   background-color:transparent;
  }

  /* ******************** HAMBURGER ICON ******************** */
  /* define size and position of the hamburger link */
  #topnav_hamburger_icon {
    display: block;
    position: relative;
    margin: 16px;
    width: 33px;
    height: 28px;
    z-index: 100;
    -webkit-user-select: none;
    user-select: none;
    cursor: pointer;
    margin-right: 30px;
  }

  /* define the style (size, color, position, animation, ...) of the 3 spans */
  #topnav_hamburger_icon span {
    display: block;
    position: absolute;
    height: 4px;
    width: 100%;
    margin-bottom: 5px;
    background: white;
    border-radius: 3px;
    z-index: 100;
    opacity: 1;
    left: 0;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: 0.25s ease-in-out;
    -moz-transition: 0.25s ease-in-out;
    -o-transition: 0.25s ease-in-out;
    transition: 0.25s ease-in-out;
  }

  /* set the 3 spans position to look like a hamburger */
  #topnav_hamburger_icon span:nth-child(1) {
    top: 0px;
    -webkit-transform-origin: left top;
    -moz-transform-origin: left top;
    -o-transform-origin: left top;
    transform-origin: left top;
  }
  #topnav_hamburger_icon span:nth-child(2) {
    top: 12px;
    -webkit-transform-origin: left center;
    -moz-transform-origin: left center;
    -o-transform-origin: left center;
    transform-origin: left center;
  }
  #topnav_hamburger_icon span:nth-child(3) {
    top: 24px;
    -webkit-transform-origin: left bottom;
    -moz-transform-origin: left bottom;
    -o-transform-origin: left bottom;
    transform-origin: left bottom;
  }

  /* change color when opening the menu */
  #topnav_hamburger_icon.open span {
    background: white;
    
  }

  /* the first span rotates 45° \ */
  #topnav_hamburger_icon.open span:nth-child(1) {
    width: 110%;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
  }

  /* the second span disappears */
  #topnav_hamburger_icon.open span:nth-child(2) {
    width: 0%;
    opacity: 0;
  }

  /* the last span rotates -45° / */
  #topnav_hamburger_icon.open span:nth-child(3) {
    width: 110%;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
  }

}
#logo1{
width: 20vh;
min-height: 20vh;
margin-left: 20px;
}

/* ******************** section Accueil ******************** */
#sectionApromo{
min-height: 65vh;
width:auto;
display: flex;
flex-direction: column;
justify-content: center;
align-content: center;
align-items: center;
text-align: center;

}
 #regl{
width:85vw;
display: flex;
flex-direction: column;
justify-content: center;
align-content: center;
align-items: center;
text-align: center;
margin-left: 50px;
margin-right: 50px;
margin-bottom: 50px;
 } 

.promo{
  min-height: 50vh;
  width:50vw;
  border: solid 3px var(--couleur2);

}
@media screen and (max-width: 600px) {
  .promo{min-height: 30vh;
    width:100vw;}
}
#presentation{
  min-height: 45vh;
  width:65vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-content: center;
  align-items: center;
  text-align: center;
  
  }
h1{
  color:var(--couleur2);
  font-size: 35px;
  margin-top: 20px;
  margin-bottom: 20px;
  font-family: "Nothing You Could Do", cursive;
  text-transform : uppercase;
   }
   span{
    color:var(--couleur1);
    font-size: 20px;
    margin-top: 10px;
    margin-bottom: 10px;

   }
   .promo2{
    min-height: 50vh;
    width:50vw;
    border: solid 3px var(--couleur2);
  
  }
  h2{
    color:var(--couleur2);
    font-size: 30px;
    margin-top: 20px;
    margin-bottom: 20px;
    font-family: "Nothing You Could Do", cursive;
    text-transform : capitalize;

     }
     #cofi{
      min-height: 5vh;
      width:35vw;
      display: flex;
      flex-wrap: wrap;
      flex-direction: row;
      justify-content: space-around;
      align-content: center;
      align-items: center;
      text-align: center;
      
      }
     .promo3{
      min-height: 10vh;
      width:10vw;
    
    }
    .promo4{
      min-height: auto;
      width:20vw;
      margin-top: 30px ; 
      margin-bottom: 30px;
      margin-left: 30px;
      margin-right: 30px;
    
    }
    .promo5{
      min-height: 10vh;
      width:10vw;
      margin-top: 30px ; 
      margin-bottom: 30px;
      margin-left: 30px;
      margin-right: 30px;
    
    }
/* ******************** Page Nos prestations  ******************** */
p{
  color:var(--couleur1);
  font-size: 22px;
  margin-top: 10px;
  margin-bottom: 10px;
  font-weight: bold;
  font-style:italic;

}
#zettle{
  min-height:auto;
      width:12vw;
      margin-bottom: 30px;
}
#bouton{
color:var(--couleur2);
border: solid 3px var(--couleur2);
border-radius: 30px;
text-decoration: none;
font-family: "Nothing You Could Do", cursive;
font-size: 30px;
padding-right: 10px;
padding-left: 10px;
margin-top: 50px;

}
#prix{
  margin-bottom: 20px;
  min-height: 20vh;
  width: 50vw;
}
/* ******************** reservation ******************** */
.plan{
  min-height: 35vh;
  width:35vw;
  border: solid 3px var(--couleur2);
 -webkit-transform: scale(1);
	transform: scale(1);
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
iframe#planning{
  height:450px;
  width:550px;
  border: solid 3px var(--couleur2)}
.plan2{
  min-height: 20vh;
  width:20vw;
  border: solid 3px var(--couleur2);
  margin-bottom: 50px;
 border: 1px solid var(--couleur2);
}
#reseaux{
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: center;
  align-content: center;
  align-items: center;
  background-color:var(--couleur4);
  padding-bottom: 50px;
  
  }
  #sectionB{
    min-height: 5vh;
    width:auto;
  }
  
/* ******************** GALERIE ******************** */

.galerie{
display: flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: center;
align-content: center;
align-items: center;
background-color:black;

}

.groupe1 , .groupe2 , .groupe3 , .groupe4 , .groupe5 ,.groupe6{
    width:100%;
    min-height: 10vh;
    display: flex;
    flex-direction: row;
    background-color: black;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: center;
    margin-bottom: 2cm;
}
.image1, .image2,.image3,.image4, .image5, .image6,.image7,.image8, .image9,.image10, .image11,.image12,.image13,.image14,.image15,.image16,.image17{
    width:7cm;
    height: 5cm;
    border: 1px solid var(--couleur1);
    background-image: url(img-0.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    margin: 1cm 1cm;
    border: 1px solid var(--couleur2);
 
}
.image1{background-image: url(galerie/CDCQ8605.JPG);}
.image2{background-image: url(galerie/CRIM34.JPG);}
.image3{background-image: url(galerie/DJI_0055.JPG);}
.image4{background-image: url(galerie/EXTS6253.JPG);}
.image5{background-image: url(galerie/FPHK2026.JPG)}
.image6{background-image: url(galerie/GRLM9710.JPG)}
.image7{background-image: url(galerie/IHLU6444.JPG);}
.image8{background-image: url(galerie/IMAG0065.jpg);}
.image9{background-image: url(galerie/JIPM0851.JPG);}
.image10{background-image: url(galerie/KOLN7490.JPG);}
.image11{background-image: url(galerie/LRRU0341.JPG);}
.image12{background-image: url(galerie/PNWR4844.JPG);}
.image13{background-image: url(galerie/PVMA7671.JPG);}
.image14{background-image: url(galerie/RRGE4601.JPG);}
.image15{background-image: url(galerie/TTNI8769.JPG);}
.image16{background-image: url(galerie/WELN6157.JPG);}
.image17{background-image: url(galerie/WMIU2737.JPG);}
.image18{background-image: url(galerie/WPZC7826.JPG);}




.image1:hover,.image2:hover,.image3:hover,.image4:hover,.image5:hover,.image6:hover,.image7:hover,.image8:hover ,.image9:hover,.image10:hover
,.image11:hover,.image12:hover,.image13:hover ,.image14:hover ,.image15:hover ,.image16:hover ,.image17:hover{
    border: 1px solid var(--couleur2);
    cursor: pointer;
    opacity: 100%;
    -webkit-transform: scale(1.3);
	transform: scale(1.3);}

      @media (max-width:600px){
        .image1, .image2,.image3,.image4, .image5, .image6,.image7,.image8, .image9,.image10, .image11,.image12,.image13,.image14,.image15,.image16,.image17{
            width:85vw;
            height: 30vh;}
            .groupe1 , .groupe2 , .groupe3 , .groupe4 , .groupe5{
                width:100%;
                min-height: 10vh;
                display: flex;
                flex-direction: row;
                flex-wrap: wrap;
                background-color: black;
                align-items: center;
                justify-content: center;
                margin-bottom: 1cm;
            }

    }

/* ******************** popup ******************** */
/* Popup container */
.popup {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

/* The actual popup (appears on top) */
.popup .popuptext {
  visibility: hidden;
  flex-wrap: wrap;
  width: 220px;
  min-height: 50px;
  background-color: black;
  color: white;
  text-align: center;
  border-radius: 6px;
  padding: 8px 0;
  position: absolute;
  z-index: 1;
  bottom: 105%;
  left: 50%;
  margin-left: -100px;
  border: solid 3px rgb(18, 233, 37);
  border-radius: 30px;
}


/* Popup arrow */
.popup .popuptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: rgb(18, 233, 37) transparent transparent transparent;
}

/* Toggle this class when clicking on the popup container (hide and show the popup) */
.popup .show {
  visibility: visible;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s
}

/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
  from {opacity: 0;}
  to {opacity: 1;}
}

@keyframes fadeIn {
  from {opacity: 0;}
  to {opacity:1 ;}
}
div.popup{
color:rgb(18, 233, 37);
font-size: 25px;
margin-top:25px;
border: solid 3px rgb(18, 233, 37);
padding-right:10px;
padding-left: 10px;
padding-bottom: 10px;
padding-top: 10px;
border-radius:30px;

}
a.button2{
color:rgb(18, 233, 37);
font-size: 25px;
margin-bottom:25px;
border: solid 3px rgb(18, 233, 37);
padding-right:10px;
padding-left: 10px;
padding-bottom: 10px;
padding-top: 10px;
border-radius:30px;
text-decoration: none;

}
@media (max-width:600px){
a.button2, div.popup{
font-size:20px ;
padding:5 5 5 5 ;

}}
 

/* ******************** FOOTER  ******************** */
 
.footer{
  min-height: 5vh;
  width: 100vw;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  justify-content: center;
  align-content: center;
  align-items: center;
  background-color:var(--couleur4);
  padding-top:30px;
  text-align:left;
  padding-left: 10px;
  margin-top: 20px;
  
  }
  .foott{
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
    align-content: center;
    align-items: center;
    background-color:var(--couleur4);


  }
  .col3{
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    align-items: center;
    background-color:var(--couleur4);
    margin-right: 20px;
  
   }
   .col4{
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    align-items: center;
    background-color:var(--couleur4);
  
   }
  h6{
    color:white;
    font-weight: bold;
    font-size: 18px;
    background-color:var(--couleur4);
    margin-bottom: 10px;
  }
  
  .footer .row{
  width:100%;
  margin:1% 0%;
  padding:0.6% 0%;
  color:white;
  font-size:1em;
  background-color:var(--couleur4);
  }
 
  .footer .row a{
  text-decoration:none;
  color:white;
  transition:0.5s;
  background-color:var(--couleur4);
  }
  
   
  .footer .row ul{
  width:100%;
  background-color:var(--couleur4);
  }
  
  .footer .row ul li{
  display:inline-block;
  margin:0px 30px;
  background-color:var(--couleur4);
  
  }
  footer li a{
margin-right: 50px;
  margin-left: 50px;

  }
  
  .footer .row a i{
  font-size:2em;
  margin:0px 30px;
  color:white;
  background-color:var(--couleur4);
  }
  
  @media (max-width:600px){
  .footer{
  text-align:left;
  padding:5%;
  }
  .footer .row ul li{
  display:block;
  margin:10px 0px;
  text-align:left;
  }
  .footer .row a i{
  margin:0% 3%;
  }
  }

   
 /* ******************** OPTIMISATION VERSION MOBILE  ******************** */

 @media (max-width:600px){
#logo3 {
    max-width: 18vw;
    min-height: 6vh;
    border: 1px solid transparent;
    margin-left: 25px;
    margin-right: 0;
    padding-top: 2px; 
    opacity: 100%;
    border-radius:30px;
   }
 img.promo{
min-height: 25vh;
width: 90vw;}
 img.promo2{
min-height: 25vh;
width: 90vw;}

#presentation{
min-height: auto;
width: 90vw;}

.promo4{
      min-height: auto;
      width:40vw;
      
    
    }
    .promo5{
      min-height: auto;
      width:20vw;
      
    }
    #prix{
min-height: auto;
      width:90vw;

    }
    #zettle{
min-height: auto;
      width:40vw;

    }
iframe#planning{
  min-height:450px;
  width:300px;

}
   
.img3{
  max-width: 25vw;
  min-height: 20vh;

}
span{
margin-left: 20px;
margin-right: 20px;

}
p{
margin-left: 20px;
margin-right: 20px;

}
 .plan{
  min-height: 75vh;
  width:85vw;
  border: solid 3px var(--couleur2);
  transition: transform .1s;

}
.plan:hover{
 -ms-transform: scale(1.5); /* IE 9 */
-webkit-transform: scale(1.5); /* Safari 3-8 */
transform: scale(1.5);

}

#planacces{
  min-height: 55vh;
  width:85vw;
  border: solid 3px var(--couleur2);
  
}
h1,h2,h3{ margin-left: 20px;
margin-right: 20px;}

  }
  /* ******************** cookies  ******************** */
.cookie-bar {
  position: fixed;
  width:100%;
  top: 0;
  right: 0;
  left: 0;
  height: 30px;
  text-align: center;
  line-height: 30px;
  color: white;
  font-size: 14px;
  font-family: "Lato", sans-serif;
  font-weight: 100;
  transition: .8s;
  animation: slideIn .8s;
  
  .message {
    white-space: nowrap;
    text-shadow: 0 1px 0 darken(red, 10%);
    @media (max-width: 767px){
      display: none;
    }
  }
  .mobile {
    display: none;
    @media (max-width: 767px){
    display: inline-block;
  
    }
  }
}
@keyframes slideIn {
  0% {
    transform: translateY(-50px);
  }
  100% {
    transform: translateY(0);
  }
}
.close-cb {
  border: none;
  color: white;
  background: darken(red, 20%);
  position: absolute;
  display: inline-block;
  right: 10px;
  top: 0;
  cursor: pointer;
  border-radius: 3px;
  box-shadow: inset 0 0 3px 0 rgba(0,0,0,.2);
  line-height: 30px;
  height: 30px;
  width: 30px;
  font-size: 16px;
  font-weight: bold;
   
}
.checkbox-cb {
  display: none;
  &:checked + .cookie-bar {
    transform: translateY(-50px);
  }
}
a {
  color: var(--couleur2);
}
@media (max-width:600px){
.cookie-bar{
width:90%;

}}