html{height:100%;background:#e8e2d7  /*#e2dcd0 #d7d1c6 #faf5ed #f7f5f2 #f6f0e6*/;box-sizing:border-box}

@font-face {
    font-family: 'daisywhl'; font-display: swap;
    src: url('fonts/daisywhl.woff2') format('woff2'),
         url('fonts/daisy.woff') format('woff');
}

@font-face {
    font-family: 'script'; font-display: swap;
    src: url('fonts/ortisansignature-webfont.woff2') format('woff2'),
         url('fonts/ortisansignature-webfont.woff') format('woff');
}

@font-face {
  font-family: 'Font Awesome 5 Free'; font-display: block;
  src: url("fonts/fa-solid-900.eot");
  src: url("fonts/fa-solid-900.eot?#iefix") format("embedded-opentype"), url("fonts/fa-solid-900.woff2") format("woff2"), url("fonts/fa-solid-900.woff") format("woff"), url("fonts/fa-solid-900.ttf") format("truetype"), url("fonts/fa-solid-900.svg#fontawesome") format("svg"); 
}

@font-face {
  font-family: 'FontAwesome'; font-display: block;
  src: url('fonts/fontawesome-webfont.eot?v=4.5.0');
  src: url('fonts/fontawesome-webfont.eot?#iefix&v=4.5.0') format('embedded-opentype'), url('fonts/fontawesome-webfont.woff2?v=4.5.0') format('woff2'), url('fonts/fontawesome-webfont.woff?v=4.5.0') format('woff'), url('fonts/fontawesome-webfont.ttf?v=4.5.0') format('truetype'), url('fonts/fontawesome-webfont.svg?v=4.5.0#fontawesomeregular') format('svg');
}

/* GENERAL 
--------------------------------------------------------------- */
body{width:100%; color:#644f4b; font: 1.2rem 'daisywhl', Helvetica, Arial, 'sans serif'; line-height:1.6em; max-width:1680px; margin: 0 auto; padding: 0 0 0;box-sizing:border-box;letter-spacing:-.05em }

p{margin: 1em 0; padding:0; box-sizing:border-box}
.hndwrt{font: 1.2em 'script', Times New Roman, 'serif';text-transform: lowercase;}
h1{display:block;font:2.2rem 'daisywhl', Helvetica, Arial, 'sans serif';line-height: 1em;text-transform: uppercase; text-align: center; margin:2em 0; letter-spacing:0.08em}
h1 span{font: .9em 'script', Times New Roman, 'serif';display:block; font-weight:normal;text-transform: lowercase;line-height:1.1em;letter-spacing:initial}
h2{font:2rem  'daisywhl', Helvetica, Arial, 'sans serif'; margin:2em 0 1.5em; line-height: 1em;font-weight:normal}
h2 span {font-family: 'script', Times New Roman, 'serif'; display:block; line-height:.8em; text-transform: lowercase;margin-bottom: 1rem;}
h3 {font-size:1.6rem; padding:1rem 0 0;box-sizing:border-box; line-height: 1.2em; font-weight:normal}
h3 span{display:block; font-size:1.4rem;line-height: 1.3em;}
h3 a:hover span{color:#153b26}
h4{color:#85344E; text-transform:uppercase;font-size:1.1em;font-weight:normal;margin:1em 0 .5em;line-height: 1.2em}
h4 span{font-size:.9em; text-transform:initial; display:block;}
h5{font-size:1.2rem;margin:1em 0;line-height: 1.4em}
.gkp h4{color:#41626c /*#406689*/}
.ch1kp h4{color:#5a7a97}
.ch2kp h4{color:#a63455}

ul{list-style-position: outside; list-style-type: none; padding:0}
ul.list{list-style-type:disc;list-style-position: inside}
ol{padding:0 0 0 20px;box-sizing:border-box;list-style-position: inside}
ol li{margin-bottom:.75em}
ol > li::marker {font-weight: bold}
a, a:link,a:visited{color:#456873 /*#A51941 #384a53*/;}
a:hover, a:focus,a:active{color:#A13E51 /*#384a53*/}

img{max-width: 100%;height: auto;transition: .3s ease-in-out;padding:0;box-sizing:border-box}
address{margin: 1em 0; font-style:normal}

.left{text-align: left}
.center{text-align: center}
.bkg01{background:#f7f4ef; padding: 20px 30px;box-sizing: border-box;box-shadow: 0 1px 2px 1px rgba(0, 0, 0, 0.1);border: 5px double #f3ece0;}
/*.bkg02{background:#fbfaf8; padding: 30px;box-sizing: border-box;box-shadow: 1px 1px 1px 0 rgba(0,0,0,.1);}*/

.tall{font-size: 1.5em}
.medium{font-size: 1.2em; }
.small{font-size:1rem}
.uppercase{text-transform: uppercase}
.udrln{text-decoration:underline}

mark{display:block;background:#f4f0ec;color:#144d76;padding:10px;box-sizing:border-box}
figure{display:table;margin: 30px auto}


a.btn{display: inline-block;  margin: 20px 0; background:#883852;color:#e8e2d7; text-decoration: none; border-radius:2px;padding: .4em 1em .4em; box-sizing:border-box;text-align: center; position: relative; line-height:1.2em;transition: all .3s;}
a.btn:hover,a.btn:focus,a.btn:active{background:#41626c /* #4c5e4a #f7f5f2*/ }

.bkcolor01{background: #f0ebe6 /*#f4f0ec #1a7980 #017f94 #8e6b53 */;}
.bkcolor02{background: #f5f8f9}

.fa {font-size: 1rem; font-family: 'Font Awesome 5 Free';-moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  line-height: 1; }
.fa span{display: block;}

.social{padding-left: 40px;
box-sizing: border-box;}
.social li{display:inline-block;width:60px; height:60px}
a.instagram:before, a.facebook:before{display:block;font-family: "FontAwesome"; font-size:2.5rem; color: #fff;position: relative;line-height: 1.5em}
a.instagram:before{content: "\f16d"}
a.facebook:before{content: "\f082"}
a:hover.instagram:before{color:#f1437a}
a:hover.facebook:before{color:#1877f2}
.instagram span,.facebook span{display: none}

.fa-house:before,.fa-user:before, .fa-door:before, .fa-bed:before, .fa-shower:before,.fa-bath:before, .fa-key:before{color:#016294;/*margin: 0 5px 0 20px;*/display:inline-block; text-align:center}
.fa-local:before{content: "\f3c5"; color:#016294; margin: 0 10px;}
.fa-house:before{content: "\f015"}
.fa-clock:before{content: "\f017"; margin: 0 5px 0 0;}
.fa-user:before {content: "\f007"}
.fa-key:before {content: "\f084";}
.fa-door:before {content: "\f52a";}
.fa-bed:before {content: "\f236";}
.fa-info:before {content: "\f05a";}
.fa-time:before{font-size: 1rem;color:#393f58;margin: 0 0 2px;display:inline-block; text-align:center}
.fa-time:before {content: "\f252";}
.fa-bain:before {content: "\f2cc";}
.fa-eat:before {content: "\f2e7";}
.fa-salon:before {content: "\f4b8";}
.fa-outdoor:before {content: "\f4d8";}
.fa-wifi:before {content: "\f1eb";}
.fa-kid:before {content: "\f1ae";}
.fa-pet:before {content: "\f1b0";}
.fa-laundry:before {content: "\f553";}
.fa-nosmok:before {content: "\f54d";}
.fa-wc:before {content: "\f7bd";}
.detail .fa-bed:before, .detail .fa-kid:before, .detail .fa-wifi:before{margin:0}

.kpicon{width:32px;height:32px;vertical-align: bottom;fill:#883852}



/* HEADER / NAV
--------------------------------------------------------------- */
.resa{position: fixed;top:15px;right:0;text-align: center;z-index: 9999}
.resa a{display: inline-block;margin: 0;background: #883852;color: #e8e2d7;text-transform:uppercase;letter-spacing: initial;text-decoration: none;border-radius: 2px;padding: .4em 3em .3em 1.3em;box-sizing: border-box;text-align: center}
.sidebar{position:fixed; z-index:999; width:285px; height:100dvh;max-height:100dvh;overflow-y: auto; background:#f7f4ef; padding:20px 0;box-sizing:border-box; margin:0; box-shadow: 0 1px 2px 1px rgba(0, 0, 0, 0.1);scrollbar-width: thin;scrollbar-color: #e7d7d3 #f0f0f0;}
header{width:100%; padding:0;box-sizing: border-box}
header ul a, header ul a:link, header ul a:visited{color:#85344E;padding: .5em 2em;box-sizing: border-box; text-transform:uppercase; text-decoration:none;display:block}
header ul a span{color:#644f4b}

.logo{padding:10px 0; box-sizing:border-box;}
.logo img{border:none;box-shadow:none}
.logo span{display:none}
nav{text-align:left;padding:.5em 0;box-sizing:border-box;}
nav li {font-size:1.1rem; line-height:1.2em;border-bottom:1px dashed #c5b7b4}
nav li:hover{background:#f2d7cd}
nav li span{display:block; text-transform:initial}


/* menu pour mobile */
.menu-icon {display: none; width: 50px;height: 50px;font-family: "FontAwesome"; font-size:2rem; }
a.menu-icon:before{content: "\f0c9"; display: flex; align-items: center; justify-content: center; height: inherit;}
a:link.menu-icon,a:visited.menu-icon {color: #883852; text-decoration: none;}
a:hover.menu-icon, a:focus.menu-icon, a:active.menu-icon {color: #f9f9f9;}
/* fin menu pour mobile */

/* MAIN
--------------------------------------------------------------- */

main{padding: 40px 20px 40px;margin: 0 0 40px 280px;box-sizing: border-box}
section{width:90%;max-width:1200px; margin: 30px auto}

.divcolombe:before{width:160px; height:60px; display:block;margin:0 auto 20px;content: url("skin/colombe.png");}
.divmer:before{width:160px; height:60px; display:block;margin:0 auto 30px;content: url("skin/mer.png");}

.grid22 {max-width:990px;margin:30px auto 60px;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: auto;
grid-column-gap: 30px;
grid-row-gap: 30px;justify-content: space-evenly;
text-align:center
}
.ctrself{justify-self: center}
.trifold{display:flex;gap:10px;justify-content: center;flex-wrap:no-wrap; padding:40px 0;box-sizing:border-box}
.grid22 picture img, .trifold picture img{box-shadow: -1px 1px 1px 1px rgba(0, 0, 0, 0.2)}

.gite { grid-area: 1 / 1 / 2 / 3; display: grid; grid-template-columns: repeat(2, 1fr); grid-column-gap: 30px; align-items: center; justify-content: center;text-align:center}
.chambre1 { grid-area: 2 / 1 / 4 / 2;}
.chambre2 { grid-area: 2 / 2 / 4 / 3; } 
.txt {text-align:left; padding:20px 5%}

.texterror {color:red}
.textok {color:#fff; background:#016294; padding:20px; box-sizing:border-box}

.bref{display: flex;gap: 10px 20px;justify-content: center;flex-wrap: wrap;padding: 0 ;box-sizing: border-box;margin-bottom:40px}
.bref li{text-align:center;width:145px; line-height:1.1em}
.bref img{width:32px, height:32px;display:block; margin:0 auto 4px}
.bref .kpicon{display:block;margin:0 auto;}

.feat {max-width:1200px;margin:30px auto;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: auto;
grid-column-gap: 5%;
grid-row-gap: 30px;
justify-content: space-evenly;
text-align:left
}
.feat h4{text-align:center}

.lamaison {max-width:1200px;margin:30px auto 60px;display: flex;gap:80px;justify-content: center;text-align:left}
.flxcenter{justify-items: center; align-items:center}
.flxcenter picture img{margin: 40px 0; box-shadow: 1px 1px 5px 4px rgba(0, 0, 0, 0.05);border:12px solid #f4f0ed; box-sizing:border-box}
.atout{flex: 100% 0 0;max-width: 420px}


.galerie{width:100%; max-width:1200px; margin:50px auto 0}
/*.galerie-item {width: 380px}*/
.galerie img{max-width:100%;width: 100%;height:100%;object-fit: cover;transition: transform .5s;padding:0}
.galerie img:hover{transform: scale(1.02);}
button.btn_galerie{display:block;margin:-20px 5% 30px auto;background:#883852;color: #e8e2d7;border-radius: 2px;padding:10px 20px;font: 1.2rem 'daisywhl', sans-serif; cursor:pointer;border:none;box-shadow: 1px 1px 1px rgba(0,0,0,.2);transform: rotate(-1deg)}
button.btn_galerie:hover{background:#41626c}

.stacktable.large-only { display: table; }
.stacktable.small-only { display: none; }
@media (max-width: 801px) {
  .stacktable.large-only { display: none; }
  .stacktable.small-only { display: table; }
  .an{display: none}
}

iframe{border:none;width:100%;height:500px;padding:0;overflow:auto;}



/* FOOTER
--------------------------------------------------------------- */
.partner{background:#faf8f4;display:flex; flex-wrap:wrap;justify-content: center;align-items: center;gap:10%; margin:0;padding: 20px 20px 20px 300px;box-shadow: 1px 1px 1px rgba(100,100,100,.2);}
.partner li{filter:grayscale(90%)}
.partner li:hover,.partner li:focus,.partner li:active{filter:grayscale(0)}
footer{width:100%; background:#4c5e4a;color:#fff; position: relative; text-align: left; padding: 0 0 0 360px; box-sizing: border-box;border-right: 10px solid #faf8f4; ;box-shadow: 1px 1px 1px rgba(100,100,100,.2);}
footer a, footer a:link, footer a:visited{color:#f6dfdc;text-decoration: none}
footer a:hover, footer a:focus, footer a:active {color: #fff; text-decoration:initial}
.footwrap{margin: 0 auto;padding: 0;box-sizing: border-box;display: flex;flex-wrap: wrap;line-height: 1.6em;gap: 20px;justify-content: space-around;}
.footwrap div{padding: 40px 0 0;box-sizing: border-box;}
.footwrap div:nth-child(1){width:360px}
.footwrap div:nth-child(2){width:240px}
.footwrap div:nth-child(3){position:relative;padding: initial; width:520px;text-align:right}
.footwrap div:nth-child(3) a{position:absolute;width:120px;bottom:120px;right:80px; background:#fff;color:#4c5e4a}
.footwrap li{line-height:2em}

/* RESPONSIVE
--------------------------------------------------------------- */
@media screen and (min-width: 2001px){
.resa{position: fixed;top:15px;right:50%;left:calc(50% - 950px)}
.resa a{padding: .4em 1em .3em;}
}
@media screen and (max-width: 1281px){
main{padding-top: 10px;margin-left:250px}
nav li {font-size:1.1rem}
.sidebar{width:250px;padding:20px 0 0}
.logo, nav{padding:0}
.lamaison{flex-wrap:wrap;gap:20px}
footer{padding-left:300px}
.footwrap{flex-wrap: wrap}
}

@media screen and (max-width: 1025px){
.gite { grid-template-columns: auto; }
.feat{grid-template-columns: auto;grid-column-gap: 0;grid-row-gap: 0}
.txt{padding:0 5%}
.grid22{grid-template-columns: 1fr;grid-template-rows:1fr auto auto; grid-row-gap: 60px;}
.gite { grid-area: 1 / 1 / 2 / 2 }
.chambre1 { grid-area: 2 / 1 / 3 / 2}
.chambre2 { grid-area: 3 / 1 / 4 / 2} 
.gite,.chambre1,.chambre2{max-width: 480px;margin: 0 auto;}
.order-4{grid-row:4}
.partner{gap:5%; padding-left:260px}
}

@media screen and (max-width: 901px){
h1{font-size:1.8rem;margin:1.5em 0}
h2{font-size:1.6rem}
h2 span{line-height:1em}
.resa{position: fixed;top: initial;bottom: 0;left: 0;width: calc(100% - 60px)}
.resa a{width:100%; padding:0.4em}
.sidebar {position:relative; padding:0; width:100%;height:auto; }
.logo{width:25%;min-width:175px;margin:0 auto;position:relative;z-index:1}
main{width:100%; margin:0 0 80px; padding:0}
.menu-icon {display: block;}
nav{position: fixed;padding: 0;bottom: 0;right: 5px;z-index: 999999999}
nav ul, nav ul:focus, nav ul:active {display: none;
		position: fixed;
		padding: 60px 0 0; box-sizing:border-box;margin-top:0;
		background: #f7f4ef;
		left:0;
		top:0;
		width:100%;
		height:100dvh;
		text-align:center;
		z-index: 9999}
nav ul li{padding:5px 0; box-sizing:border-box;}
nav ul li a:hover,nav ul li a:focus,nav ul li a:active{border:none}
nav:hover ul,nav:focus ul,nav:active ul{display: block}
.txt{padding:0 5% 40px}
.flexbox{display:block}
button.btn_galerie{margin:-20px auto 30px}
.partner{padding: 20px;flex-wrap:nowrap}
footer{padding-left:0;padding-bottom:40px}
.footwrap div{padding: 40px}
.footwrap div:nth-child(1),.footwrap div:nth-child(2){max-width:360px;flex:auto}
}

@media screen and (max-width: 321px){
.bref li{width:auto;min-width: 100px;}
}