#container{
    width:100%;
    /* max-width: 1366px; */
    height: 100vh;
    margin:0 auto;
    position:relative;
}

.showContainer{
    visibility: hidden;
}

#accueil_logo{
    width:420px;
    height:300px;
    text-align: center;
}


#accueil_nav{
    width:130px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top:50px;
}

#accueil_logo a{
    font-size:20px; 
}



/**************************** NAV */

#mask{
    width:100%;
    /* max-width:1366px; */
    height: 100vh;
    background-color: rgba(0,0,0,.2);
    margin:0 auto;
    position:fixed;
    top:0;
    visibility: hidden;
}

#navTop{
    position:fixed;
    top:0px;
    height: 68px;
    width:100%;
    background-color: white;
    border-bottom:1px solid #b8b8b8;
    font-weight: 400;
    font-size: 18px;
    padding-top: 7px;
}

#logoTop{
    width:56px;
}

#navTopContainer{
    width:100%;
    max-width: 1265px;
    display: flex;
    /* justify-content: space-between; */
    align-items: center;
    margin: auto;
}

#puceTopTitle{
    width:18px;
    margin-bottom: 3px;
}

#boutiqueSpace{
    width: 140px;
}

#navTopContainer div{
    /* padding: 10px 15px; */
    text-align: center;
}

#navTopContainer a{
    /* text-decoration: none; */
    margin-top: 10px;
    margin-bottom: 10px;
}

#navTopContainer a:hover{
    /* text-decoration: underline; */
    /* text-underline-offset: 3px; */
}


.title{
    flex-grow: 1;
    font-size: 20px !important;
    font-weight: 300;
}

#navTop a.title:hover{
    text-decoration: none;
}

#topSep{
    width:1px;
    height:20px;
    background-color: #6F6F6F;
    margin-top: 5px;
}

.topLeft{
    margin-left:16px;
    margin-right:16px;
}

.topRight{
    margin-left:5px;
    margin-right:5px;
}

#navBottom{
    bottom: -144px;
    height: 207px;
    position: fixed;
    width:100%;
    background-color: white;
    border-top:1px solid #b8b8b8;
    font-size:18px;
    font-weight: 400;
    padding-top: 18px;
}

#navBottomContainer{
    width:80%;
    max-width: 1265px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: auto;
}


#navBottomContainer div{
    /* padding: 10px 10px; */
    text-align: center;
    cursor:pointer;
    text-transform: uppercase;
     width:140px;
}

.navBottomText{
    width:min-content !important;
    position:relative;
}

.navBottomTextCenter{
    margin:auto;
}

.navBottomTextRight{
    margin-left:21px;
}

#logoBottom{
    width:83px;
}

#pictoInsta{
    width: 20px;
}

#filetBottom{
    bottom:0;
    height:84px;
    width:.6px;
    background-color: #b8b8b8;

}

#t_fr, #t_en, #m_fr, #m_en{ opacity:.5;}
#t_fr.langSelect, #t_en.langSelect,#m_fr.langSelect, #m_en.langSelect{ opacity:1;}
#t_en{
    margin-right:20px;
}

/**************************** NAVPOPUPBOTTOM */

#navPopupBottomContainer{
    position: fixed;
    bottom: 0px;
    overflow:hidden;
    pointer-events: none;
    height:300px;
    width: 100%;
    /* max-width: 1366px; */
}

#navPopupBottom{
    height:100%;
    width:100%;
    background-color: white;
    /* display: flex; */
    align-items: center;
    margin-top:290px;
    visibility: hidden;
}

#navPopup{
    height: 217px;
    width:100%;
    position: absolute;
}

.navPopupBottomItem{
    width:100%;
    font-size: 20px;
    text-align: center;
    line-height: 30px;
}

.navPopupBottomItem div{
    width: 600px;
    margin:0 auto;
}

.bottomPuce{
    height:16px;
}

/**************************** ACTUALITE */

#actuContainer{
    width: 30%;
    margin-top:80px;
    padding-bottom:100px;
}

.actuItem{    
    text-align:center;
    margin:20px 0;
}
.actuItem:hover .actuTitre{
    /* text-decoration: underline; */
}

.actuTitre{
    font-size:20px;
    font-weight: 500;
    font-style: italic;
    display: inline-block;
}

.actuTitreTxt{
    position: relative;
    text-decoration: none;
    background:linear-gradient(#000,#000) left bottom no-repeat;
    background-size:0% 0.5px;
    transition: all 0.5s;
}
.actuTitreTxt:hover, .actuTitreTxt:focus {
    background-size:100% 0.5px;
}


.actuDate{
    font-style: normal;
    font-weight: 300;
}
.actuDetails{
    font-size: 20px;
    font-weight: 300;
}


/**************************** CONTACT */

#btContact{
    cursor:pointer;
    margin-right:8px;
}

#contactContainer{
    text-align: center;
    width:432px;
    height:360px;
    background-color: white;
    position: fixed !important;
    visibility: hidden;
}

#btCloseContact{
    width:18px;
    position:absolute;
    top:20px;
    right:20px;
    cursor:pointer;
}

#btPresse{
    font-size:20px;
    color:#6F6F6F;
    outline:1px solid #6F6F6F;
    background-color: white;
    margin: 30px 0;
    padding: 12px 16px;
    display: inline-block;
    cursor:pointer;
}


.contactNom{
    font-weight: 300;
    font-size:20px;
    margin: 5px;
    margin-top: 70px;
}
.contactMail{
    font-size:20px;
    font-weight: 400;
    width: fit-content;
    margin: auto;
}



#credits{
    /* display:flex; */
    width: 330px;
    margin: 0 auto;
    margin-top: 10px;
}

.creditsItem{
    margin:0 5px;
    display:inline-block;
    font-weight: 400;
}

.creditsItem a{
    /* text-decoration: underline; */
    /* text-underline-offset: 3px; */
}

.creditsItem a:hover{
    /* text-decoration: none; */
}


/** FORMULAIRE **/

#formPress{
    visibility:hidden;
    margin-top: 35px;
   
}

input{   
    font-family: "Labrada", serif;
    color:black;
    background-color: white;
    border:none;
    border-bottom:1px solid #6F6F6F;
    font-size: 15px;
    font-weight: 400;
    width: 90%;
    margin-bottom: 20px;
    padding:3px 0;
    
}

#validForm{
    font-size:20px;
    color:#6F6F6F;
    outline:1px solid #6F6F6F;
    background-color: white;
    margin-top: 30px;
    padding: 12px 16px;
    display: inline-block;
    cursor:pointer;
    white-space: nowrap;
}

#validForm.validOk{
    outline:1px solid #2d2d2a;
    color:#2d2d2a;
}

#captcha{
    margin: 0 auto;
    width: 304px;
}

#formMsg{
    width:100%;
    text-align:center;
    font-size:12px;
}

/**************************** GALERIE */
#galerieContainer{
    width: 100%;
    max-width: 1150px;
    margin:auto;
    padding-bottom: 100px;
    padding-top: 50px;
}

#videoContainer{
    /* height: 100vh; */
    max-width: 1150px;
    margin:0 auto;
}

#videoWrapper{
    position: relative;
    /* height:100%; */
    /* margin-top: 62px; */
}

#btAudio, #btAudio2{
    position:absolute;
    top: 80px;
    right: 13px;
    width:30px;
    cursor:pointer;
}

#btAudio2{
    margin-top:5px;
}

#homeVideo {
    /* position:absolute; */
    top:0px;
    left:0px;
    /* right: 0; */
    /* min-height: 98%; */
    width: 100%;
    max-width:1150px;
    /* object-fit: cover; */
    margin-top: 62px;
}

.galerieItem{
    /* margin-bottom: 60px; */
}

.galerieImages{
    width:100%;
    display: flex;
    justify-content:space-between;
    flex-wrap: wrap;
    gap: 20px;
    padding: 30px 0;
}

.galerieImgContainer{
   overflow:hidden;
   /* position: absolute; */
}

.galerieImgPortrait{
    width: 270px;
    height: 336px;
}

.galerieImgPaysage{
    width: 563px;
    height: 336px;
}

.galerieImgContainer img{
    width: 100%;
    object-fit: cover;
    height: 100%;
    /* position: absolute; */
}

.galerieDesc{
    width:100%;
    display: flex;
    justify-content:space-between;
    line-height: 30px;
    padding-bottom:30px;
}

.galerieTitre{
    font-size: 14px;
    font-weight: 400;
    width:23%;
    line-height: 22px;
}

.galerieTitre div, .atelierTitre div{
    /* font-weight: 400; */
    font-style: italic;
    font-size:20px;
    padding-top:4px;
}

.galerieTexte{
   width: 74%;
   font-size: 20px;
   line-height: 30px;
   font-weight: 400;
}

.galerieTexteFull{
    width: 70%;
    font-size: 20px;
    line-height: 30px;
    font-weight: 400;
    text-align: center;
    margin-left:15%;
 }

.galerieVideo{
    
    height:336px;
}


.galerieSep{
    width:250px;
    height:1px;
    background-color: #b8b8b8;
    margin:0 auto;
    margin-top:30px;
    margin-bottom: 60px;
}


/**************************** ATELIERS */
#ateliersContainer{
    width: 100%;
    max-width: 1150px;
    margin:auto;
    padding-bottom: 100px;
    padding-top: 110px;
}

#ateliersEntete{
    width: 100%;
    display: flex;
    gap: 30px;
    margin-bottom: 60px;
}

.atelierImage{
    width: 550px;
}

.atelierImage img{
    width:100%;
}

.atelierTexte{
    font-size:20px;
    width:calc(100% - 280px);
    line-height:30px;
}

.atelierImages{
    width:100%;
    display: flex;
    justify-content:space-between;
    flex-wrap: wrap;
    gap: 20px;
    padding: 30px 0;
}

.atelierDesc{
    width:100%;
    display: flex;
    justify-content:space-between;
    line-height: 30px;
    padding-bottom:30px;
}

.atelierTitre{
    font-size: 14px;
    font-weight: 400;
    width:23%;
    line-height: 22px;    
}

.atelierTexte{
    width: 74%;
   font-size: 20px;
   line-height: 30px;
   font-weight: 400;
}


/**
PAGES
*/

.page a{
    text-decoration: underline;
}

/**
FANCYBOX
*/
.fancybox__footer{
    display:none;
}


/**
ORIENTATION
*/
#orientationPopup {
    width: 100vw;
    height: 100vh;
    background-color: rgba(0,0,0,.2);
    top:0;
    /* display: none;  */
    opacity:0;
    visibility: hidden;
    position:fixed;
    transition: visibility 0s, opacity 1s linear;
    /* pointer-events: none; */
  }

  #orientationContainer{
    background-color: white;
    height:300px;
    width:300px;
    text-align: center;
    padding:30px;
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%, -50%);
  }

  #orientationContainer img{
    width:200px;
  }
  
  @media screen and (orientation: landscape) and (max-width: 950px) {
    #orientationPopup {
      /* display:block; */
      
      visibility: visible;
        opacity: 1;
    }   
  }

  .notSelectable{
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */
  }