body{
  background:white;
  cursor:crosshair;
}
html{scroll-behavior:smooth}

/* Debut header */ 



@import url('XimaType-Regular.ccs');



@font-face {
  font-family: 'XimaType-Regular';
  src: url('../fonts/XimaType-Regular.woff2') format('woff2'),
       url('../fonts/XimaType-Regular.woff') format('woff'),
       url('../fonts/XimaType-Regular.ttf') format('truetype');
       font-weight: 100 900;
       font-display: swap;
       font-style: normal;
}

@font-face {font-family: 'XimaType-Regular';

src: url('XimaType-Regular.woff') format('woff'),
url('XimaType-Regular.woff2') format('woff2');
}


@import url('Livvic-Regular.ccs');



@font-face {
  font-family: 'Livvic-Regular';
  src: url('../fonts/Livvic-Regular.woff2') format('woff2'),
       url('../fonts/Livvic-Regular.woff') format('woff'),
       url('../fonts/Livvic-Regular.ttf') format('truetype');
       font-weight: 100 900;
       font-display: swap;
       font-style: normal;
}

@font-face {font-family: 'Livvic-Regular';

src: url('Livvic-Regular.woff') format('woff'),
url('Livvic-Regular.woff2') format('woff2');
}



@font-face {
  font-family: 'Livvic-Light';
  src: url('../fonts/Livvic-Light.woff2') format('woff2'),
       url('../fonts/Livvic-Light.woff') format('woff'),
       url('../fonts/Livvic-Light.ttf') format('truetype');
       font-weight: 100 900;
       font-display: swap;
       font-style: normal;
}

@font-face {font-family: 'Livvic-Ligh';

src: url('Livvic-Light.woff') format('woff'),
url('Livvic-Light.woff2') format('woff2');
}




.apparition {
  position: absolute;
  background-color: white;
  top:0;
  width:300px;
  height:100vh;
  border: 1px solid black ;

  /* De base, je cache le menu à gauche, juste en dehors de ma fenêtre */
  left:-300px;

  /* Pour rendre l'apparition progressive, en 2s ec */
  -webkit-transition: left 1.5s;
    transition: left 1.5s;
}

/* Créer la classe à appliquer pour que le menu soit visible */
.ouvert {
  left:0;
}

.menu{
line-height: 50px;
  float: left;
  margin-left: 5px;
  margin-right: 5px;
  margin-top: 80px;
   font-family: 'Helvetica';
text-align:left;
text-decoration: none;
align-content: space-between;
}


.menu a{
    float: center;
    margin-left: 20px;
    margin-top: 60px;
   font-family: 'Helvetica';
    border: 1px solid black; padding: 8px;  padding-left: 13px; padding-right: 13px;
          border-radius: 30px;
     color: black;
     text-decoration: none;


}

.menu a:hover {
 background: yellow;
  color: black;
    -webkit-filter: blur(0.5px); 
    -moz-filter: blur(0.5px); 
    filter: blur(0.5px);
}

.menu p {
  font-family: 'Helvetica';
      margin-left: 20px;
}

.menu .atl a:hover {
 background: #b9d96b;
  color: black;
    -webkit-filter: blur(0.5px); 
    -moz-filter: blur(0.5px); 
    filter: blur(0.5px);
}
.menu .alt p {
  font-family: 'Helvetica';
      margin-left: 20px;


}

.menu .pdm a:hover {
 background: #f99c4d;
  color: black;
    -webkit-filter: blur(0.5px); 
    -moz-filter: blur(0.5px); 
    filter: blur(0.5px);
}
.menu .pdm p {
  font-family: 'Helvetica';
      margin-left: 20px;


}
.menu .lig a:hover {
 background: #fc5a3a;
  color: black;
    -webkit-filter: blur(0.5px); 
    -moz-filter: blur(0.5px); 
    filter: blur(0.5px);
}
.menu .lig p {
  font-family: 'Helvetica';
      margin-left: 20px;


}

.menu .miam a:hover {
 background: #ffd138;
  color: black;
    -webkit-filter: blur(0.5px); 
    -moz-filter: blur(0.5px); 
    filter: blur(0.5px);
}
.menu .miam p {
  font-family: 'Helvetica';
      margin-left: 20px;


}


.menu .dm a:hover {
 background: #8c6dfc;
  color: black;
    -webkit-filter: blur(0.5px); 
    -moz-filter: blur(0.5px); 
    filter: blur(0.5px);
}
.menu .dm p {
  font-family: 'Helvetica';
      margin-left: 20px;


}

.menu .bk a:hover {
 background: #c5efff;
  color: black;
    -webkit-filter: blur(0.5px); 
    -moz-filter: blur(0.5px); 
    filter: blur(0.5px);
}
.menu .bk p {
  font-family: 'Helvetica';
      margin-left: 20px;


}

.menu .abeille a:hover {
 background: #fffb82;
  color: black;
    -webkit-filter: blur(0.5px); 
    -moz-filter: blur(0.5px); 
    filter: blur(0.5px);
}
.menu .abeille p {
  font-family: 'Helvetica';
      margin-left: 20px;


}

.menu .comb a:hover {
 background: #7a7471;
  color: black;
    -webkit-filter: blur(0.5px); 
    -moz-filter: blur(0.5px); 
    filter: blur(0.5px);
}
.menu .comb p {
  font-family: 'Helvetica';
      margin-left: 20px;

}

.menu .mix a:hover {
 background: #376dfc;
  color: black;
    -webkit-filter: blur(0.5px); 
    -moz-filter: blur(0.5px); 
    filter: blur(0.5px);
}
.menu .mix p {
  font-family: 'Helvetica';
      margin-left: 20px;

.menu .gali a:hover {
 background: pink;
  color: black;
    -webkit-filter: blur(0.5px); 
    -moz-filter: blur(0.5px); 
    filter: blur(0.5px);
}






}
.headcentral {
margin-top: 0;
background-color: white;
position:fixed ;
top: 0;
left: 0;
width: 100%;
height: 50px;
z-index: 1000;
display: flex;
justify-content: space-between;
align-items: center;
border: 1px solid black;



}

.work {
background-color: transparent;
align-items: center;
position:relative ;
top: 0;
left: 0;
width: 30%;
height: 15px;
min-width: 10vh;
text-decoration: none;
}

.work p{ 
font-family:'Helvetica'; 
font-size: 10pt ; text-align: center; color: black}

.work p:hover {; color: #cae264;
    -webkit-filter: blur(0.5px); 
    -moz-filter: blur(0.5px); 
    filter: blur(0.5px);

} 

.xima {
background-color: transparent;
align-items: center;
position:relative ;
top: 0;
left: 0;
width: 30%;
height: 20px;
min-width: 5vh;
text-decoration: none;

}

.xima p{ font-family:'Helvetica'; 
font-size: 10pt ; text-align: center; margin-top: 2pt; color: black;

}

.xima p:hover {; color:#fc5a3a;
      -webkit-filter: blur(0.5px); 
    -moz-filter: blur(0.5px); 
    filter: blur(0.5px);

} 

.contact {

background-color: transparent;
align-items: center;
position:relative ;
top: 0;
left: 0;
width: 30%;
height: 15px;
min-width: 10vh;
text-decoration: none;

}

.contact p{ font-family:'Helvetica'; 
font-size: 10pt ; text-align: center; color: black}

.contact p:hover {; color: #8c6dfc;
    -webkit-filter: blur(0.5px); 
    -moz-filter: blur(0.5px); 
    filter: blur(0.5px);

}  








h1{
font-family: 'XimaType-Regular', sans-serif;
text-align: center;

font-size: 15vw;
font-weight: 100;
letter-spacing: 0px;
color: black;
opacity: 1; 
margin:15px;
position:relative;
height: auto;
}

/* #2c5fb5 for the nice navy */





.homepage{
position:relative;
top: 0px;
left: 0px;
width: 100vw;
height: 93vh; /* hauteur bloc blanc de tout */
 background-image: url(../img/homepage.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  overflow: hidden;
  background-color: white;

}


}

.acceuil {
  width: 100%;
  height: 100vh;
  min-height: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
    height: auto;
    position: relative;
}

.acceuil h1{
  top: 10vh;/* hauter page ecran*/
 } 





.scroll{
  position: relative;
  width: 100vw;
  height: auto;
  top: 0vh;/* hauter page ecran*/
  left: 0;
  align-items: flex-start;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  background-color: white; /* ecran acceuille*/
  z-index: 100;
  background-color: white;
}



.acceuiltexte {
  width: 100%;
  height: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
    position: relative;
      top: 23vh;/* hauter page ecran*/
      line-height: 120%;

}
.acceuiltexte p{
/* hauter page ecran*/
font-family:'Helvetica'; 
font-size: 12pt ;
min-width: 40vh;
line-height: 130%; 
color: black;
text-align: justify;
font-weight: 100%;
letter-spacing: 0px;
text-align:center;
      margin-left: 200px;
      margin-right: 200px;
 } 



 .bas{
   font-family: 'Helvetica';
  text-decoration: none;
  width: 100%;
  height: 7vh;
  background-color: transparent;
  text-align:center;
  line-height: 40px;
    word-spacing: 30px;
    align-items: center;
}

.bas a{
   font-family: 'Helvetica';
   color: black;  
    text-decoration: none;
    border: 1px solid black; padding: 8px;  padding-left: 13px; padding-right: 13px;
    border-radius: 30px;
    word-spacing: 50px;

}


.bas a:hover{
  color: #376dfc;
    -webkit-filter: blur(0.5px); 
    -moz-filter: blur(0.5px); 
    filter: blur(0.5px);
}










.texte {
font-size: 12pt ;

line-height: 150%; 
color: black;
text-align: center;
font-weight: 100%;
  word-spacing: 2px;
text-align:center;
      margin-left: 14%;
      margin-right: 14%;
      margin-top: 30px;
      margin-bottom: 30px;
      columns: 1;

}

.texte h2 {
      text-align: center;
}

.texte p{
/* hauter page ecran*/
font-family:'Helvetica'; 
font-size: 12pt ; 
color: black;
text-align: center;
 } 


h2{
/* hauter page ecran*/
font-family:'Helvetica'; 
font-style: italic;
text-align: center;
font-size: 15pt ; 
color: black;
 } 






.vertical2 { 
  position: relative;
  background-color: white;
  width: 100%;
  height: auto;
  min-height: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
 }

.vertical2 .imagevertical2 {
  position: relative;
  background-color:white;
  width: calc(94%/2);
  min-width: 200vh;
  height: 100%;
  color: white;
  margin-top: 10px;
  margin-bottom: 10px;
  min-width: 410px;
}

.vertical2 img{
  position: relative;
width: 100%;
min-width: 410px;


}
.vertical3 { 
position: relative;
width: calc(100%/3);
height: auto;
justify-content: space-between;
padding: 5px;
 }

 .imagevertical3 {
position: relative;
height: auto;
width: 100%;
padding: 5px;
background-color: white;
}

.vertical4 { 
position: relative;
width: calc(100%/4);
height: auto;
justify-content: space-between;
padding: 5px;
 }

 .imagevertical4 {
position: relative;
height: auto;
width: 100%;
padding: 5px;
background-color: white;
}


.vertical6 { 
top: 5px;
position: relative;
width: 100%;
height: auto;
justify-content: space-between;
padding: 5px;
 }

 .imagevertical6 {
position: relative;
height: auto;
width: 100%;
padding: 5px;
background-color: white;
}








.acceuilat {
  width: 100%;
  height: 100vh;
  min-height: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
    height: auto;
    position: relative;
}

.acceuilat h1{
  top: 10vh;/* hauter page ecran*/
   color: white;

 } 

.homepageat{
position:relative;
top: 0px;
left: 0px;
width: 100vw;
height: 100vh; /* hauteur bloc blanc de tout */
 background-image: url(../img/atlas/homeatlas.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  overflow: hidden;
  background-color: white;

}

.video1 { 
position: relative;
width: calc(100%/2);
height: auto;
justify-content: space-between;
padding: 5px;
 }

video {
position: relative;
height: auto;
width: 100%;
padding: 5px;
background-color: white;
}








.acceuilpdm {
  width: 100%;
  height: 100vh;
  min-height: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
    height: auto;
    position: relative;
}

.acceuilpdm h1{
  top: 10vh;/* hauter page ecran*/
  color: white;

 } 

.homepagepdm{
position:relative;
top: 0px;
left: 0px;
width: 100vw;
height: 100vh; /* hauteur bloc blanc de tout */
 background-image: url(../img/pdm/homepdm.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  overflow: hidden;
  background-color: white;

}







.acceuilgalimard {
  width: 100%;
  height: 100vh;
  min-height: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
    height: auto;
    position: relative;
}

.acceuilgalimard h1{
  top: 10vh;/* hauter page ecran*/
  color: white;

 } 

.homepagalimard{
position:relative;
top: 0px;
left: 0px;
width: 100vw;
height: 100vh; /* hauteur bloc blanc de tout */
 background-image: url(../img/galimard/galimardfond.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  overflow: hidden;
  background-color: white;

}




.acceuillight {
  width: 100%;
  height: 100vh;
  min-height: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
    height: auto;
    position: relative;
}

.acceuillight h1{
  top: 10vh;/* hauter page ecran*/
  color: white;

 } 

.homepagelight{
position:relative;
top: 0px;
left: 0px;
width: 100vw;
height: 100vh; /* hauteur bloc blanc de tout */
 background-image: url(../img/light/homelight.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  overflow: hidden;
  background-color: white;

}





.acceuilpause {
  width: 100%;
  height: 100vh;
  min-height: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
    height: auto;
    position: relative;
}

.acceuilpause h1{
  top: 10vh;/* hauter page ecran*/
  color: white;

 } 

.homepagepause{
position:relative;
top: 0px;
left: 0px;
width: 100vw;
height: 100vh; /* hauteur bloc blanc de tout */
 background-image: url(../img/pause/homepause.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  overflow: hidden;
  background-color: white;

}




.acceuilbiblik {
  width: 100%;
  height: 100vh;
  min-height: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
    height: auto;
    position: relative;
}

.acceuilbiblik h1{
  top: 10vh;/* hauter page ecran*/
  color: white;

 } 

.homepagebiblik{
position:relative;
top: 0px;
left: 0px;
width: 100vw;
height: 100vh; /* hauteur bloc blanc de tout */
 background-image: url(../img/biblik/homebiblik.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  overflow: hidden;
  background-color: white;

}






.acceuildm {
  width: 100%;
  height: 100vh;
  min-height: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
    height: auto;
    position: relative;
}

.acceuildm h1{
  top: 10vh;/* hauter page ecran*/
  color: white;

 } 

.homepagedm{
position:relative;
top: 0px;
left: 0px;
width: 100vw;
height: 100vh; /* hauteur bloc blanc de tout */
 background-image: url(../img/demainmatin/homedm.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  overflow: hidden;
  background-color: white;

}




.acceuilmiel {
  width: 100%;
  height: 100vh;
  min-height: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
    height: auto;
    position: relative;
}

.acceuilmiel h1{
  top: 10vh;/* hauter page ecran*/
  color: white;

 } 

.homepagemiel{
position:relative;
top: 0px;
left: 0px;
width: 100vw;
height: 100vh; /* hauteur bloc blanc de tout */
 background-image: url(../img/miel/homemiel.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  overflow: hidden;
  background-color: white;

}





.acceuilfight {
  width: 100%;
  height: 100vh;
  min-height: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
    height: auto;
    position: relative;
}

.acceuilfight  h1{
  top: 10vh;/* hauter page ecran*/
  color: white;

 } 

.homepagefight {
position:relative;
top: 0px;
left: 0px;
width: 100vw;
height: 100vh; /* hauteur bloc blanc de tout */
 background-image: url(../img/fight/homefight.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  overflow: hidden;
  background-color: white;

}





.acceuilmix {
  width: 100%;
  height: 100vh;
  min-height: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
    height: auto;
    position: relative;
}

.acceuilmix  h1{
  top: 10vh;/* hauter page ecran*/
  color: white;

 } 

.homepagemix {
position:relative;
top: 0px;
left: 0px;
width: 100vw;
height: 100vh; /* hauteur bloc blanc de tout */
 background-image: url(../img/mixologie/homemixo.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  overflow: hidden;
  background-color: white;

}





        .swiper {
            position: relative;
  background-color: white;
  width: 80%;
  height:80%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
        }

        .mySwiper2 {
  position: relative;
  background-color:white;
  width: 700px;
  height: 700px;
  color: white;
  margin-top: 10px;
  margin-bottom: 10px;
  min-width: 400px;

        }


        .mySwiper {
          height: 100%;
        }

        .mySwiper .swiper-slide {
          opacity: 0.3;

        }

        .mySwiper .swiper-slide :hover{
        filter: blur(2px);
        -ms-transform: scale(1.1); /* IE 9 */
-webkit-transform: scale(1.1); /* Safari 3-8 */
transform: scale(1.1);
        }

        .mySwiper .swiper-slide-thumb-active {
          opacity: 1;
        }

        .swiper-slide img {
          position: relative;
          display: inline-flex;
          width: 100%;
          height: 100%;
          object-fit: cover;
        }



















































                                  /* responsive  déroulant */
@media screen and (min-width: 500px) {
.deroulant:hover {
height: 70px;
}


@media screen and (max-width: 800px) {
.deroulant {
height: 70px;

}

.scroll{
  position: relative;
  width: 100vw;
  height: auto;
  top:0vh;/* hauter page ecran*/
  left: 0;
  align-items: flex-start;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  background-color: white; /* ecran acceuille*/
  z-index: 100;
  background-color: white;
}


.acceuiltexte {
  width: 100%;
  height: 100%;
  min-height: auto;
  display: flex;
  flex-wrap: wrap;

    height: auto;
    position: relative;
      top: 30vh;/* hauter page ecran*/
      line-height: 100%;

}

.acceuiltexte p{
/* hauter page ecran*/
font-family:'Helvetica'; 
font-size: 9pt ;
line-height: 130%; 
color: black;
text-align: justify;
font-weight: 50;
letter-spacing: 0px;
text-align:center;
      margin-left: 100px;
      margin-right: 100px;
 } 


 .bas{
    top: 10vh;
   font-family: 'Helvetica';
text-decoration: none;
  width: 100%;
  height: 7vh;
  background-color: transparent;

  text-align:center;
  line-height: 40px;
    word-spacing: 30px;
    align-items: center;


}

.bas a{

   font-family: 'Helvetica';
   color: black;  

     text-decoration: none;
          border: 1px solid black; padding: 8px;  padding-left: 13px; padding-right: 13px;
          border-radius: 30px;
  word-spacing: 50px;

}


.bas a:hover{
  color: #376dfc;
    -webkit-filter: blur(0.5px); 
    -moz-filter: blur(0.5px); 
    filter: blur(0.5px);
}



.homepage{
position:relative;
top: 0px;
left: 0px;
width: 100vw;
height: 90vh; /* hauteur bloc blanc de tout */
 background-image: url(../img/atlas/);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  overflow: hidden;
  background-color: white;

}

.texte {
font-size: 11pt ;

line-height: 150%; 
color: black;
text-align: center;
font-weight: 100%;
  word-spacing: 2px;
text-align:center;
      margin-left: 14%;
      margin-right: 14%;
      margin-top: 30px;
      margin-bottom: 30px;
      columns: 1;

}

.texte h2 {
      text-align: center;
}

.texte p{
/* hauter page ecran*/
font-family:'Helvetica'; 
font-size: 10pt ; 
color: black;
text-align: center;
 } 


h2{
/* hauter page ecran*/
font-family:'Helvetica'; 
font-style: italic;
text-align: center;
font-size: 15pt ; 
color: black;
 } 


.vertical5 { 
top: 5px;
position: relative;
width: 100%;
height: auto;
justify-content: space-between;
padding: 5px;
 }



 .imagevertical5 {
position: relative;
height: auto;
width: 100%;
padding: 5px;
background-color: white;
}

.vertical6 { 
top: 5px;
position: relative;
width: 100%;
height: auto;
justify-content: space-between;
padding: 5px;
 }



 .imagevertical6 {
position: relative;
height: auto;
width: 100%;
padding: 5px;
background-color: white;
}


/* Mettre mon CSS ici */