/* CSS Document */
/*
Theme Name: Refuge les Barmettes
Theme URI: https://www.lesbarmettes-refuge.com
Description: Thème développé par Net-tendance.com
Version: 1
Author: Net-tendance - Erwan Girerd
Author URI:   https://www.net-tendance.com
*/

@import url('https://fonts.googleapis.com/css2?family=Kalnia:wght@100..700&family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

:root
{
	--CouleurBleu:#182c32;
	--CouleurBleu2:#3fb9bf;
	--CouleurBeige:#f0ebd6;
	--CouleurOrange:#d1902e;
	
}

@media screen and (max-width: 767px) {}
@media screen and (max-width: 1024px) {}
@media screen and (max-width: 2400px) {}

strong, b{font-weight: 700;}
body, html, a, ul, li, img{ padding:0px; margin:0px; border:0px; list-style-type:none; text-decoration:none;}
a, a::before, a::after, button, input[type=submit]{transition : all 0.2s linear;}
body{ font: 13px/20px 'Roboto', sans-serif; font-weight: 300; color:var(--CouleurBleu); }

body, html { display: block; width: 100%; float: left;  height: auto;}

section{z-index: 99;}

a{ text-decoration:none;color:#0d0c1c;}img{ border:0px;}
@media screen and (max-width: 960px) 
{
	/*body{padding-top: 97px;}*/
}
/*body, html{width: 100%; overflow-x: hidden;}*/

/*.elementor-editor-active{margin-top: 250px;}*/
div#first{ width:100%; float:left; text-align:center; overflow: hidden;}
div#first div#second{ width:1200px; margin:auto; text-align:left; position:relative;}

@media screen and (max-width: 900px) {div#first div#second{ width:100%; margin:auto;}}
@media screen and (min-width: 901px) {div#first div#second{ width:900px; margin:auto;}}
@media screen and (min-width: 1200px) {div#first div#second{ width:1200px; margin:auto; }}
@media screen and (min-width: 1400px) {div#first div#second{ width:1400px; margin:auto;}}

@media screen and (min-width: 1024px) {
	.row{width: 100%;display: -webkit-box;  display: -moz-box;  display: -ms-flexbox;  display: -webkit-flex; display: flex !important;  -webkit-flex-direction: row;  -moz-flex-direction: row;  -ms-flex-direction: row;  flex-direction: row !important; float: none; display: inline-block; position: relative;}
	.row.h100{height: 100%;}
 	.row .case1{ flex: 1;display: inline-block; position: relative; }.row .case2{ flex: 2;display: inline-block; position: relative; }.row .case3{ flex: 3; display: inline-block; position: relative; max-width: calc(100% / 4);}.row .case4{ flex: 4; display: inline-block; position: relative;}.row .case5{ flex: 5; }.row .case6{ flex: 6; max-width: 50%; }.row .case7{ flex: 7; }.row .case8{ flex: 8; }.row .case9{ flex: 9; }.row .case10{ flex: 10; }.row .case11{ flex: 11; }.row .case12{ flex: 12; }
	
	.column{width: 100%;display: -webkit-box;  display: -moz-box;  display: -ms-flexbox;  display: -webkit-flex; display: flex !important;  -webkit-flex-direction: row;  -moz-flex-direction: row;  -ms-flex-direction: row;  flex-direction:column ; float: none; min-height: 100%; height: 100%; }
 	.column .case1{ flex: 1; flex-direction: column;}.column .case2{ flex: 2;flex-direction: column; }.column .case3{ flex: 3;flex-direction: column; }.column .case4{ flex: 4;flex-direction: column; }.column .case5{ flex: 5;flex-direction: column; }.column .case6{ flex: 6; max-height: 50%;flex-direction: column; }.column .case7{ flex: 7; flex-direction: column;}.column .case8{ flex: 8; flex-direction: column;}.column .case9{ flex: 9;flex-direction: column; }.column .case10{ flex: 10;flex-direction: column; }.column .case11{ flex: 11; flex-direction: column;}.column .case12{ flex: 12; flex-direction: column;}
	
	.row > div, .column > div{position: relative;}	
}
@media screen and (max-width: 1024px) 
{
	.row, .column{float: left; width: 100%;}
}

/*
* Liste pour le header 
*/
.Liste1 ul li .elementor-icon-list-icon{width: 20px; height: 20px; display: inline-block; text-align: center; position: relative;}
.Liste1 ul li .elementor-icon-list-icon svg{}
.Liste1 ul li .elementor-icon-list-icon::after{background:#FFFFFF; color:#182c32; border-radius: 30px; width: 30px; height: 30px; text-align: center; z-index: -1; position: absolute; top: -5px; left: -5px; content: "";}
.Liste1 ul li .elementor-icon-list-text{ padding-inline-start:15px !important; font: 14px/20px "Roboto Condensed", sans-serif; color:#FFFFFF; }

@media screen and (max-width: 767px) {
	.Liste1 ul li .elementor-icon-list-icon{width: 14px; height: 14px;}
	.Liste1 ul li .elementor-icon-list-icon::after{background:#FFFFFF; color:#182c32; border-radius: 20px; width: 20px; height: 20px; text-align: center; z-index: -1; position: absolute; top: -3px; left: -3px; content: "";}
}
@media screen and (max-width: 1024px) {
	.Liste1 .elementor-icon-list-text{display: none;}
	.Footer .Liste1 .elementor-icon-list-text{display: block;}
}
@media screen and (max-width: 2400px) {}

/*
* Drapeaux de Polylang 
*/
.cpel-switcher__toggle--on{ /*background: #FFFFFF;*/ border-top-left-radius: 5px; border-top-right-radius: 5px;}
.cpel-switcher__list{/*padding: 10px !important; max-height: none !important;  display: none;*/ border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; background: #FFFFFF; }
.cpel-switcher__lang a{text-align: center;}

/*
* Décoration
*/
.DecoImgHautGauche a::before, .DecoImgHautGauche .elementor-widget-container::before{width: 50%; height: 50%; position: absolute; top: -30px; left: -30px; background: url("charte/DecoHautGauche.svg") top left no-repeat; content: ""; z-index: -1;}
.DecoImgHautDroite a::before, .DecoImgHautDroite .elementor-widget-container::before{width: 50%; height: 50%; position: absolute; top: -30px; right: -30px; background: url("charte/DecoHautDroite.svg") top left no-repeat; content: ""; z-index: -1;}
.DecoRestaurant::after{content: ""; height: 380px; width: 370px; background: url("charte/IconeRestaurant.svg") top right no-repeat; background-size: 300px 300px; position: absolute; top: -20px; right: 0px; z-index: 99;}
.DecoRestaurant2::after{content: ""; height: 380px; width: 370px; background: url("charte/IconeRestaurant2.svg") top right no-repeat; background-size: 250px 250px; position: absolute; top: -80px; right: 0px; z-index: 99;}
.DecoMontagne::before{content: ""; height: 150px; width: 288px; background: url("charte/IconeMontagne.svg") bottom left no-repeat; background-size: contain; position: absolute; top: -149px; right: 0px; z-index: 98;}
.DecoMontagne2::before{content: ""; height: 150px; width: 288px; background: url("charte/IconeMontagne2.svg") bottom left no-repeat; background-size: contain; position: absolute; top: -149px; right: 0px; z-index: 98;}


.BgSac{background: url("charte/IconeSac.svg") bottom no-repeat; background-size: 250px 250px;}
.BgEte{background: url("charte/IconeEte.svg") no-repeat; background-size: 200px 200px; background-position: -50px 50px;}
.BgHiver{background: url("charte/IconeHiver.svg") no-repeat; background-size: 200px 200px; background-position: -50px 50px;}

@media screen and (max-width: 1024px) 
{
	.BgEte{background: url("charte/IconeEte.svg") no-repeat; background-size: 75px 75px; background-position: -15px 5px;}
	.BgHiver{background: url("charte/IconeHiver.svg") no-repeat; background-size: 75px 75px; background-position: -15px 5px;}
}
@media screen and (max-width: 767px) 
{
	.BgEte{background: url("charte/IconeEte.svg") no-repeat; background-size: 50px 50px; background-position: 5px 5px;}
	.BgHiver{background: url("charte/IconeHiver.svg") no-repeat; background-size: 50px 50px; background-position: 5px 5px;}
}
.DiagonaleLeft {
  clip-path: polygon(0% 0%, 100% 0, 100% 100%, 20% 100%);
}


.DiagonaleRight {
  clip-path: polygon(0% 0%, 80% 0, 100% 100%, 0% 100%);
}



@media screen and (max-width: 767px) 
{
	.DiagonaleLeft, .DiagonaleRight {clip-path: polygon(0% 0%, 100% 0, 100% 100%, 0% 100%);}
	/*.DecoRestaurant::after{content: ""; height: 280px; width: 270px; background: url("charte/IconeRestaurant.svg") top right no-repeat; background-size: 200px 200px; position: absolute; top: -20px; right: 0px; z-index: 99;}
	.DecoRestaurant2::after{content: ""; height: 280px; width: 270px; background: url("charte/IconeRestaurant2.svg") top right no-repeat; background-size: 200px 200px; position: absolute; top: -20px; right: 0px; z-index: 99;}*/
	.DecoImgHautGauche a::before, .DecoImgHautGauche .elementor-widget-container::before{width: 50%; height: 50%; position: absolute; top: -15px; left: -15px; background: url("charte/DecoHautGauche.svg") top left no-repeat; content: ""; z-index: -1;}
	.DecoImgHautDroite a::before, .DecoImgHautDroite .elementor-widget-container::before{width: 50%; height: 50%; position: absolute; top: -15px; right: -15px; background: url("charte/DecoHautDroite.svg") top left no-repeat; content: ""; z-index: -1;}
	.DecoRestaurant::after, .DecoRestaurant2::after{content: ""; height: 190px; width: 185px;background-size: 100px 100px;}
	
}

@media screen and (max-width: 1024px) {
	.DecoImgHautGauche a::before, .DecoImgHautGauche .elementor-widget-container::before{width: 50%; height: 50%; position: absolute; top: -20px; left: -20px; background: url("charte/DecoHautGauche.svg") top left no-repeat; content: ""; z-index: -1;}
	.DecoImgHautDroite a::before, .DecoImgHautDroite .elementor-widget-container::before{width: 50%; height: 50%; position: absolute; top: -20px; right: -20px; background: url("charte/DecoHautDroite.svg") top right no-repeat; content: ""; z-index: -1;}
	.DecoMontagne::before, .DecoMontagne2::before{height: 75px; width: 144px; top: -74px;}
	
}
@media screen and (max-width: 2400px) {}

/*
* Background
*/
.Bg1{background: url("charte/Bg1.webp") center left no-repeat; background-size:cover;}
.BgRefuge{background: url("charte/BgRefuge.svg") no-repeat; background-position: right 80px bottom 10px;background-size: 60% 60%;}
/*
* Alignements
*/
.txtcenter{text-align: center;}.txtleft{text-align: left;}.txtright{text-align: right;}

/*
* Bloc txt
*/
.bloc_txt1 > div{max-width: 600px; padding: 0px 10px 0px 10px; margin: auto;}
/*
* Case design
*/
.CaseDesign1 {max-width: 600px; padding: 10px; margin: auto; border: 1px solid #e7e7e7; background: #FFFFFF;}

/*
* COULEUR TEXTE
*/
.txtnoir{color:#0d0c1c;}
.txtblanc{color:#ffffff;}
.txtombre{text-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;}

.boxombre > div{box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;}

/*
* épaisseur
*/
.w100{font-weight: 100;}.w300{font-weight: 300;}.w500{font-weight: 500;}.w700{font-weight: 700;}.w900{font-weight: 900;}

/*
* Font family
*/
.Font1{font-family:'Kalnia', sans-serif; }

.Btn1 a, a.Btn1, a.wc-block-cart__submit-button, button.wpforms-submit{ background: none; font:20px/50px 'Kalnia', sans-serif !important; font-weight:700; color:var(--CouleurBeige); border:1px solid var(--CouleurOrange);  padding: 0px 20px 0px 20px !important; border-radius:10px; display: inline-block;}
.Btn1 a:hover, a.Btn1:hover, a.wc-block-cart__submit-button:hover, button.wpforms-submit:hover{background: var(--CouleurOrange) ; color:var(--CouleurBleu) !important;  }

button.wpforms-submit{background: var(--CouleurOrange) !important;}

.Btn2 a, a.Btn2{ background: none; font:20px/50px 'Kalnia', sans-serif; font-weight:700; color:var(--CouleurBleu) !important; border:1px solid var(--CouleurOrange);  padding: 0px 20px 0px 20px; border-radius:10px; display: inline-block; fill:none !important;}
.Btn2 a:hover, a.Btn2:hover{background: var(--CouleurOrange) ; }
.Btn2_2 a, a.Btn2_2{ background: none; font:20px/50px 'Kalnia', sans-serif; font-weight:700; color:var(--CouleurBleu) !important; border:1px solid var(--CouleurBleu2);  padding: 0px 20px 0px 20px; border-radius:10px; display: inline-block; fill:none !important;}
.Btn2_2 a:hover, a.Btn2_2:hover{background: var(--CouleurBleu2) ; }
.Btn2_3 a, a.Btn2_3{ background: var(--CouleurBeige); font:20px/50px 'Kalnia', sans-serif; font-weight:700; color:var(--CouleurBleu) !important; border:1px solid var(--CouleurBleu);   padding: 0px 20px 0px 20px; border-radius:10px; display: inline-block; fill:none !important;}
.Btn2_3 a:hover, a.Btn2_3:hover{background: var(--CouleurBleu) ;color:var(--CouleurOrange) !important; }

.Btn3 a, a.Btn3{ background: var(--CouleurOrange); font:20px/50px 'Kalnia', sans-serif; font-weight:700; color:var(--CouleurBeige) !important; border:1px solid var(--CouleurOrange);   padding: 0px 20px 0px 20px; border-radius:10px; display: inline-block; fill:none !important;}
.Btn3 a:hover, a.Btn3:hover{background: var(--CouleurBleu) ; color:var(--CouleurOrange) !important;}
.Btn3_2 a, a.Btn3_2{ background: var(--CouleurBleu2); font:20px/50px 'Kalnia', sans-serif; font-weight:700; color:var(--CouleurBeige) !important; border:1px solid var(--CouleurBleu2);  padding: 0px 20px 0px 20px; border-radius:10px; display: inline-block; fill:none !important;}
.Btn3_2 a:hover, a.Btn3_2:hover{background: var(--CouleurBleu) ; color:var(--CouleurBleu2) !important;}
/*
* Hauteur
*/
.Hauteur100{height: 100% !important;}

/*
* Header
*/
.Header{ position: fixed; top: 0px; left: 0px; z-index: 999999; height: 80px; width: 100%; display: block;}
.header > div{height: 100%;}
.Header::before{ position: absolute; content:""; top: 0px; left: 0px; z-index: -1; 	height: 80px; width: 100%; display: block;  background: var(--CouleurBleu);	
    /* masque */
	-webkit-mask-image: url('charte/HeaderMask.svg');    -webkit-mask-repeat: no-repeat;    -webkit-mask-position: center top;    -webkit-mask-size: cover;
    mask-image: url('charte/HeaderMask.svg');    mask-repeat: no-repeat;    mask-position: center top;    mask-size: cover;
}
.Header::after{content: ""; background: linear-gradient( rgba(2, 62, 67, 0.8), transparent);position: absolute; content:""; top: 0px; left: 0px; z-index: -1; 	height: 250px; width: 100%;}
.Header.scroll::after{display: none;}

/*.elementor-editor-active .Header{z-index: -1 !important; display: none;}*/
.Header .Logo a{display: inline-block; width: 100%; height: 100%; float: left;}
.Logo img{ width: 250px !important; height: 250px; position: absolute; top: -20px; left: 50%; transform: translateX(-50%); z-index: 999999;}

/*.IconeMenu{ font: 20px / 50px "Roboto Condensed", sans-serif; font-weight: 700;}*/

.ekit-template-content-header{position: fixed; top: 0px; left: 0px; width: 100%; z-index: 9999;}

	
.Header.scroll::before{display: none;}
.Header.scroll{height: 50px; background: var(--CouleurBleu);}
.Header.scroll > div{height: 100%;}
.Header.scroll .Logo img{height: 100px !important; width: 100px; transition : all 0.2s linear; top: -20px;}
.Header.scroll .Logo::after{height: 120px !important; width: 120px; content: ""; transition : all 0.2s linear; position: absolute; top: -30px; border-radius: 60px; padding: 10px; background: var(--CouleurBleu); overflow: hidden; left: 50%; transform: translateX(-50%);}

@media screen and (max-width: 767px) 
{
	div.elementor-widget-container{overflow: visible !important;}
	.Header li.elementor-icon-list-item{position: relative; z-index: 11; cursor: pointer;}
	.Header li.elementor-icon-list-item:hover .elementor-icon-list-text{ display: block; }
	.Header li.elementor-icon-list-item .elementor-icon-list-text{display: none; position: absolute; top: 20px; left: 0px; background: #FFFFFF; border-bottom-left-radius: 10px; border: 1px solid #009fe3; z-index: 99; white-space: nowrap; width: auto;}
	.Header.scroll .ScrollCacheSmart{display: none;}
	.hfe-nav-menu-icon{border-bottom-left-radius: 30px; border-bottom-right-radius: 30px; height: 40px; width: 60px; color:#FFFFFF; /*background:#009fe3;*/ line-height: 30px; z-index: 999999;}
}


@media screen and (max-width: 767px) 
{
	.Header{ height: 50px; }
	.Header::before{ position: absolute; content:""; top: 0px; left: 0px; z-index: -1; 	height: 50px; width: 100%; display: block;  background: var(--CouleurBleu);	-webkit-mask-image: none;  mask-image: none;    }
	.Header .Logo{position: absolute; z-index: 1; width: 100px; height: 100px; top: 10px; left: 350%;}
	.Header .Logo img{height: 100px !important; width: 100px; transition : all 0.2s linear; top: -20px;}
	.Header .Logo::after{height: 120px !important; width: 120px; content: ""; transition : all 0.2s linear; position: absolute; top: -30px; border-radius: 60px; padding: 10px; background: var(--CouleurBleu); overflow: hidden; left: 50%; transform: translateX(-50%);}
	
	.Header.scroll .Logo{position: absolute; z-index: 1; width: 60px; height: 60px; top: -20px; left: -10px;}
	.Header.scroll .Logo img{height: 60px !important; width: 60px; transition : all 0.2s linear; top: 5px;}
	.Header.scroll .Logo::after{height: 70px !important; width: 70px; content: ""; transition : all 0.2s linear; position: absolute; top: 0px; border-radius: 60px; padding: 5px; background: var(--CouleurBleu); overflow: hidden; left: 50%; transform: translateX(-50%);}
	
}
@media screen and (max-width: 1024px) 
{
    .Header .Logo { position: absolute;        height: 250px;        width: 250px;        left: 50%;        transform: translateX(-50%);   }
}
@media screen and (max-width: 2400px) {}

/*
* MENU
*/ 
.nt_menu_icone .hfe-nav-menu-icon::after{content: "MENU"; position: absolute; top: 50%; left: 55px; transform: translateY(-50%); color:#FFFFFF;font: 16px / 50px "Roboto Condensed", sans-serif; font-weight: 700;}

.hfe-flyout-content::after{position: absolute; bottom: 0px; left: calc(100% - 2px); z-index: 1; content: ""; width: 100%; height: 100%; background: url("charte/IconeMontagne3.svg") bottom left no-repeat; background-size:contain;}

.hfe-nav-menu{}
.hfe-nav-menu li{ border-bottom: 1px solid var(--CouleurBeige)}
.hfe-nav-menu li a{ font: 20px/40px "Roboto Condensed", sans-serif; font-weight: 300; text-transform: uppercase;}
.hfe-nav-menu li a:hover{color:#FFFFFF; background: var(--CouleurOrange);}

.hfe-nav-menu li ul.sub-menu{ background: none; background-color:#FFFFFF !important;}
.hfe-nav-menu li ul.sub-menu li{}
.hfe-nav-menu li ul.sub-menu li a{ color:var(--CouleurBleu) !important; font: 16px/30px "Roboto Condensed", sans-serif; position: relative; padding-left: 20px;}
.hfe-nav-menu li ul.sub-menu li a::before{position: absolute; content: ""; top: 20px; left: 10px; height: 12px; width: 12px; background: url("charte/IconeEtoile.svg") center center no-repeat; background-size: contain;}

@media screen and (max-width: 767px) 
{
	.nt_menu_icone .hfe-nav-menu-icon::after{display:none;}
}


/*
* Fil d'Ariane
*/
.FilAriane{background: var(--CouleurBeige); width: calc(100% - 10px); padding: 5px;  font:12px/16px 'Roboto Condensed', sans-serif; font-weight:300; color:var(--CouleurBleu);}

.HeaderPage{ width: 100%; height: 350px; margin-bottom: -60px; background-size:cover;}

/*
* Titre
*/
.Titre1 h1, .Titre1 h2, .Titre1 h3, .Titre1 h4, h1.Titre1, h2.Titre1, h3.Titre1, h4.Titre1 {font:40px/50px 'Kalnia', sans-serif; font-weight:700; text-transform: uppercase;}
.Titre2 h1, .Titre2 h2, .Titre2 h3, .Titre2 h4, h1.Titre2, h2.Titre2, h3.Titre2, h4.Titre2, .Titre2 span, .Titre2 div {font:30px/40px 'Kalnia', sans-serif; font-weight:100; text-transform: uppercase;}
.Titre3 h1, .Titre3 h2, .Titre3 h3, .Titre3 h4, h1.Titre3, h2.Titre3, h3.Titre3, h4.Titre3 {font:20px/25px 'Kalnia', sans-serif; font-weight:100; text-transform: uppercase;}

/*
* Déco
*/

/*
* Footer
*/
@media screen and (min-width: 768px) 
{
}

/*
* Formulaire
*/

.Form1{}
.Form1 .wpforms-field-label{color:#FFFFFF !important;}
.Form1 input, .Form1 textarea{ border: 0px !important; border-bottom:1px solid #5d8ba2 !important; background: none !important; color:#FFFFFF !important;}
.Form1 .wpforms-field-sublabel{ display: none !important;}
.Form1 ::placeholder{color:#FFFFFF !important;}

/*
* Diaporama
*/
.ImgHeader{height: 600px;}
.ImgHeader img{width: 100%;  height: 100%;	object-fit: cover;  object-position: center;}