@import url('https://fonts.googleapis.com/css?family=Lato:300,400');  /*font-family: 'Lato', sans-serif; */
@import url('https://fonts.googleapis.com/css2?family=Alice&display=swap'); /*font-family: 'Alice', serif;*/

/**************************
	DEBUG  background-color:aliceblue;
*************************	
*{outline:1px solid #fff!important;background-color:rgba(0,2,54,.1)!important}	
*/
/**************************  background-color:var(--couleur-fond);l
	CLASSES
**************************/
:root{
  --couleur-fond:#F4F4F4;
  --couleur-texte:#555555;
  --couleur-favorite:#232323;
  --main-font-size:1.000em;
 }
 
/**************************
	CLASSES
**************************/

.clear,.ligne,.row{clear: both;}
.clearfix::after,.line::after{content: "";display: table;clear: both;border-collapse: collapse;}

/* textes et contenus alignment */
/*.centrage {display: grid;place-items: center; width: 100%; height:auto;resize: both; overflow: auto;}
 ou bien plus simple :	
#conteneur{display: flex;}	.element{margin: auto;}*/
#conteneur{display: flex;}
#conteneur > .element{margin: auto;}

.centrage{display: flex; justify-content: center; align-items: center;}
.center{width:100%;text-align:center;margin:0 auto; }
.txtleft{text-align:left;}
.txtright{text-align:right;}
.txtcenter{text-align:center;}
.sticky{position:fixed;top:0; }

/* elements flottants */
.fl{float:left;margin-right:auto;}
img.fl{margin-right:1rem;}
.fr{float:right;margin-left:auto;}
img.fr{margin-left:1rem;}
img.fl,img.fr{margin-bottom:0.5rem;}
/* inline-block */
.inbl{display:inline-block;vertical-align:top;}
.display{display:block;}
.hide{display:none;}
/* ========== déco ============= */
.bordure{border:0.1em solid #7b7b7b;}
.no-border{border: 0px;}
.exergue{color:#E6AF23; font-weight:bold;}
p{margin-bottom:1.0rem;}
.big, .big>p{font-size:2.0rem;}
.bigger{font-size:2.2rem;}
.biggest{font-size:2.4rem;}
.small{font-size:1.6rem;}
.smaller{font-size:1.4rem;}
.smallest{font-size:1.2rem;}
hr{ border-width: 0;border: 5px solid #444444; }
hr.style20-bis{width:90%;padding:0;border:none;border-top:medium double #EBEEF2;border-top:medium double #EBEEF2;color:#EBEEF2;text-align:center;overflow:visible; /* For IE */margin:auto ;}
hr.style20-bis:after{content:"❧";display:inline-block;position:relative;top:-0.8em;font-size:3.2rem;padding:0 0.25em;background:#2B2A27}
strong,.strong{font-weight:700;}

blockquote{font-family:  Georgia,'Times New Roman', Times, serif;text-align:center;font-style: italic;font-size: 2.2rem;padding: 0 20px;text-indent: 50px;}
blockquote:before, blockquote:after {content: "\275D";margin:0 15px;font-size: 4.2rem;}
blockquote:after {line-height:1.0;
	-moz-transform: rotate(-180deg);
	-webkit-transform: rotate(-180deg);
	transform: rotate(-180deg);
	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2)}
	
.tooltip{border-bottom:0.1em solid #dddddd;text-decoration:none;position:relative;}
.tooltip span {display:none;font-size:1.6rem;color:black;font-weight:300;background:white; 
  -moz-border-radius:6px;-webkit-border-radius:6px;border-radius:6px;}
.tooltip span img {float:left; margin:0px 8px 8px 0;}
.tooltip span a {color:#0000d9;}
.tooltip span a:hover {color:#000000;}
.tooltip:hover span {display:block;position:absolute;top:13px;left:0;z-index:1000;width:400px;min-height:128px;
	border:1px solid black;margin-top:12px;margin-left:32px;overflow:hidden;padding:8px;}
	
/*tous les éléments après le H2 aurons un padding-top:*/
h2 ~ * { padding-top:1.5em; }
/*#containers * {border: 1px solid black;}cible tous les éléments enfants de la div #containers*/

/* conteneurs fluide */
.portfolio img {float:left;margin:0 20px 20px 0;}
.portfolio_inverse p {text-align:left;}
.portfolio_inverse img {float:right;padding:2px;margin-left:20px;width:200px;height:auto;}
.portfolio-bord img {float:left;margin-right:30px;padding-right:20px;border-right:1px solid #D5D1B7;}

.flex-contain{display:flex; align-items:center; justify-content:center;margin-bottom:1rem;}
.flex-item{flex:1;text-align:center;margin:0 0.5rem 0 0.5rem;}
/* .flex-item:nth-of-type(2) {font-weight: bold;} permet de cibler un élément*/

.container-flex{display:flex;flex-wrap:wrap;padding:5px;justify-content: space-evenly;}
.item{margin:5px;}

/* i-frame */
.video{width:80%;margin:40px auto;}
.embed-container{position:relative;padding-bottom:56.25%; height:0;overflow:hidden;max-width:100%; 
	-webkit-box-shadow:4px -3px 5px 0px rgba(50, 50, 50, 0.75);
	-moz-box-shadow:4px -3px 5px 0px rgba(50, 50, 50, 0.75);
	box-shadow:4px -3px 5px 0px rgba(50, 50, 50, 0.75);}
.embed-container iframe, .embed-container object, .embed-container embed{position: absolute;top:0;left:0;width:100%;height:100%; }

.video-responsive {width:60%;margin:40px auto;
position:relative;padding-bottom:56.25%; height:0;overflow:hidden;max-width:100%; 
}
.video-responsive iframe {
 left:0;
 top:0;
 height:100%;
 width:100%;
 position:absolute;
}


 /*links*/
a{color:#f4f4f4;text-decoration:none;}
a:hover{color:#F5DF4D;text-decoration:none;}
a:visited{text-decoration:none;color:#;}/*E49203*/
a:focus-visible, a:focus{outline:thick double #32a1ce;}
:focus:not(:focus-visible){ outline: none;}
.link{color: #f4f4f4;transition: border 0.2s ease-in-out;border-bottom: 1px solid #f4f4f4;/*transparent*/}
.link:hover,.link:focus{border-bottom:2px solid #4f4f4f;}
/* a[target~="_blank"]:after { content: "➚";padding-left: 4px;width:50px;}/* ~ cible un attribut qui a une liste de valeurs séparées par un espace
a[class~="ext"]:after { content: url(../elements/external_brown.png);padding-left: 4px;width:50px;}*/
a[class~="ext"]:after { content: "➚";padding-left: 4px;width:50px;font-size:2.0rem;}

/*==============================
	STYLES GENERAUX
==============================*/
html{font-size: 62.5%; font-size:calc(1em * .625);background-color: #2B2A27;/*background-image: linear-gradient(45deg, #0c0c0c 0%, #1a1810 52%, #0b0c0c 90%);*/}
body{font-family: 'Lato', sans-serif;font-size:1.8em;font-weight:400;line-height:1.5;color:#f4f4f4;}
header{width: 100%;background-color: #1C1C1C; z-index: 10; height:60px;/* A adapter dans main et dans menu.css ligne 25*/ 
	-webkit-box-shadow: 0px -2px 17px 3px rgba(135,135,135,0.74); box-shadow: 0px -2px 17px 3px rgba(135,135,135,0.74);}
main{margin:60px auto 0 auto;width:100%;max-width:1920px;padding-bottom:30px;}
footer{padding:4rem 0 10rem 0;margin-top:2rem; background-color: #1C1C1C;border-top:0.4rem solid #4A4A4A;}
.content{width:100%;max-width:1200px; margin:auto;line-height:1.7;padding:0 20px ;}
h1, h2, h3, h4, h5, h6{font-family: 'Alice', serif; }
 .h1-title{font-size: 6.4rem;font-weight:400; text-align:center;line-height:0.9;margin: 4rem 0 4rem 0;}
 .h1-title span {font-size: 3.0rem; font-weight:300;}

 .h1-like{font-size: 5.2rem;text-align:center;margin:3rem;}
 .h2-like{font-size: 2.8rem;text-align:center;margin:3.2rem 0;}
 .h3-like{font-size: 2.4rem;padding:2.2rem 0 0.8rem 0.8rem;}
.h4-like{font-size: 2.4rem;}
.h5-like{font-size: 2.2rem;}

/*----- menu principal -----*/
header nav ul li a {font-family: 'Alice', serif; font-size:2.rem;}
@media screen and (max-width: 480px) {
	header nav ul li a {ont-size:2.rem;}	
}
/*======================
	PAGE  GITES
=======================*/
.flex-gite{display:flex;align-items:center;justify-content:center;margin-bottom:2rem;}
.item-gite{flex:1;text-align:center;}
.item-gite p{font-size:2.0rem;}
.item-gite img{max-width:330px;}

.item-gite:nth-child(2) { padding:0 5px;}
/* animation images */
.item-gite img{display:block;overflow:hidden;
	-webkit-transition:all 0.2s;-moz-transition:all 0.2s;-ms-transition:all 0.2s;-o-transition:all 0.2s;transition:all 0.2s;}
.item-gite img {width:100%;height:100%;
	-webkit-transition: all 0.3s;-moz-transition:all 0.3s;-ms-transition:all 0.3s;-o-transition:all 0.3s;transition:all 0.3s;}
.item-gite:hover img {transform:scale(1.1);}

/*----- sous-menu chambres -----*/
.sous_menu{text-align:center;padding-bottom:10px;}
.sous_menu li {display:inline-block;margin: 2px;padding:5px 25px;}
.sous_menu a {font-weight:400;padding:5px 5px;color:#f4f4f4;text-decoration: none;letter-spacing:1px;}
.sous_menu a:hover,#sous_menu{}
.sous_menu .current {color:#888888;font-weight:300;}

/*======================
	PAGE  PISCINE
=======================*/
.flex-contain-piscine{display:flex;align-items:center;justify-content:center;margin-bottom:2rem;}
.item-piscine{flex:1;text-align:center;}
.item-piscine p{font-size:2.0rem;}

/*======================
	PAGE PISCINE effet glit box
=======================
figure{margin:0;display:grid;grid-template-rows:1fr auto;margin-bottom:10px;break-inside: avoid;}
figure > img {grid-row:1 / -1;grid-column:1;}
.container{column-count:5;column-gap:10px;}

@media screen and (max-width: 960px){	
	.container{column-count:4;}
}		
@media screen and (max-width: 768px){	
	.container{column-count:3;column-gap:8px;}
}	
@media screen and (max-width: 480px){	
	.container{column-count:2; column-gap:5px;}
}
figure{display:block;overflow:hidden;
	-webkit-transition:all 0.2s;-moz-transition:all 0.2s;-ms-transition:all 0.2s;-o-transition:all 0.2s;transition:all 0.2s;}
figure img {width:100%;height:100%;
	-webkit-transition: all 0.3s;-moz-transition:all 0.3s;-ms-transition:all 0.3s;-o-transition:all 0.3s;transition:all 0.3s;}
figure:hover img {transform:scale(1.2);}
*/

/*======================
	PAGE TARIFS
=======================*/
.table-tarifs{border-collapse:collapse;width:100%;}
.table-tarifs th, td {width:25%;padding:8px 0 8px 8px;border:0.1em solid #7b7b7b;vertical-align:middle;}
.table-tarifs th {text-align:center;border-bottom:2px solid #dddddd;}
.table-tarifs td {text-align:center;} 
/* .table-tarifs td:first-child {text-align:center;}  */

/*======================
	PAGE CONTACT
=======================*/
.flex-contact{display:flex; align-items:center; justify-content:center;margin-bottom:1rem;}
.contact-item{flex:1;text-align:left;margin:0 0.5rem 0 0.5rem;}
fieldset{width:100%;min-height:120px;margin:10px;}
label{width:40%;line-height:1.2;font-size:1.6rem;}
input,  textarea{display:block;background-color:#DDDDDD;border:0px;resize:none;padding:0 10px;margin-top: 0rem;margin-bottom: 1.2rem;
	-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;}
input::placeholder, textarea::placeholder{color:#B4B4B4;font-size: 1.5rem;}
textarea{width:80%}
input[type="number"]{width:30%;height:30px;}	
input[type="number"]:out-of-range {background-color: #ff4c4d;}
input[type="text"], input[type="email"]{width:80%;height:30px;}
#captcha{width:40% !important;}
input[type="text"]:hover, input[type="number"]:hover, input[type="email"]:hover, textarea:hover {background-color:#FFF;border-left:4px solid #939597;}
select{padding:0 0 0 15px;margin:10px 0;width:80px;height:32px;font-size:1,2rem;}
textarea:focus, input[type="text"]:focus, input[type="number"]:focus, input[type="email"]:focus {background-color:#FFF;border-left:4px solid #939597;outline:none;}
input[type="submit"]{display:block;outline:none;cursor:pointer;text-align:center;text-decoration:none;padding:.5em 2em .55em;font-size:2.0rem;font-weight:400;
	border-radius:5px;box-shadow:0 1px 2px rgba(0,0,0,.2);font-size:1.6 rem;margin-top: 5px;color:#fef4e9;border:solid 1px #da7c0c;background: #4f4f4f;
	background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20));
	background: -moz-linear-gradient(top,  #faa51a,  #f47a20);
	background: -o-linear-gradient(top,  #faa51a,  #f47a20);}
input[type=submit]:hover{color:#ffff00;font-style:italic;}

.captcha{font-weight:bold;font-size:14px;color:white;background:green;letter-spacing:3px;padding:2px 5px;}
.label_captcha{width:80px;font-size:16px;margin:0 0 0 10px;}

.remarque{display: none}/*classe du champ caché anti-spam*/
.erreur{color:#ff0000;font-size:1.6rem;font-weight:400;padding:2px 8px;width:60%;}
.erreur-bordure{caret-color: #FF0000;border: 1px solid red !important;border-left:5px solid red !important;}

.alert {padding:15px;margin:10px auto;width: 90%;border: 1px solid transparent;border-radius: 4px;text-align:center;font-size:22px;}
.alert_info {color: #1a3b9d;background-color: #d9edf7;border: 1px solid #6b87d9;}
.alert_warning {color: #9f0606;background-color: #fcf8e3;border: 1px solid #8a6d3b;}

/*	Bouton envoyer Skew Forward 	*/
.skew-forward {
  display: inline-block;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transform-origin: 0 100%;
  transform-origin: 0 100%;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.skew-forward:hover, .skew-forward:focus, .skew-forward:active {
  -webkit-transform: skew(-10deg);
  transform: skew(-10deg);
}

/************************************************************************************
	LIGHTBOX PERSO
*************************************************************************************/
.petite{cursor:pointer}
.grande{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color: rgba(43, 42, 39, 0.9);display: none;align-items:center;justify-content:center;Z-index:9999;}
.grande img {width:auto;max-width:60%;border:4px white solid;border-radius:5px;}
.lightbox-close{cursor:pointer;display:block;color:#fff;text-decoration:none;font-size:45px;position:absolute;top:10px;right:40px;margin:0;padding:3px 0 0 2px;}	
@media (max-width: 640px) {
	.grande img {max-width:85%;}
	.lightbox-close{font-size:35px;}	
}	

/*================================
	MEDIA-QUERIES
=================================*/
@media (min-width: 1200px) {
	 .h1-like{font-size: 5.8rem;}
}
@media screen and (min-width: 769px) and (max-width: 1200px) {
	.h1-title{font-size:5.4rem;}
	.h1-title span{font-size:2.8rem;}
	.h2-like{font-size:3.2rem;}
	.h3-like{font-size:1.4rem;}
}

@media screen and (max-width: 768px){	
	body{font-size:1.6rem;}
	/* menu */
	header nav ul li a {font-size:1.8rem;}
	header nav .menu-open {font-size:1.6rem;}
	footer{padding:0;}
	.h1-title{font-size:4.6rem;padding-left:0px}
	 .h1-title span{font-size: 2.4rem;font-weight:300;}
	.h1-like{font-size:3.8rem;}
	.h2-like{font-size:2.2rem;}
	
	.flex-contain{flex-flow:column wrap;padding:5px;}
	.flex-item{width:100%;margin:2rem 0;}
	
	.flex-gite{border-bottom:1px solid #bbbbbb;margin-bottom:1rem;}
	.flex-gite{flex-flow:column wrap;padding:5px;}	
      .item-gite{padding-bottom:8px;}	
      .item-gite:nth-child(1) {order:2;}
      .item-gite:nth-child(2) {order:1;}
      .item-gite:nth-child(3) {order:3;}

	.flex-contain-piscine{flex-flow:column wrap;padding:5px;}
		
	.sous_menu li {padding:5px 1%;}
	
	/*.portfolio,.foto_text{width:100%;padding:10px;margin-left:0rem;}
	.colonne_3,.colonne_4{width:100%;}
	formulaire*/
	
	.flex-contact{flex-flow:column wrap;padding:5px;}
	.contact-item{width:100%;margin:0;}	
	fieldset{width:100%;margin:10px;}		
	input[type="text"], input[type="email"], input[type="number"]{width:80%;}
	textarea{width:90%;}
	input[type=submit]{margin:10px;}
	.erreur{width:80%;}
	
  .tooltip:hover span {
    position: fixed;   /* important */
    left: 0;           /* collé au bord gauche de l'écran */
    top: 20%;          /* ajuste selon ton design */
    
    width: 90%;
    max-width: 400px;

    margin: 0;
  }
}

@media screen and (max-width: 480px) {
	body{font-size:1.8rem;}
	
	.h1-title{font-size:3.2rem;padding-left:0px}
	.h1-title span{font-size:2.2rem;padding-left:0px}
	.h2-like{font-size:2.4rem;padding-left:0px}
	.content{padding:10px;}
	.sous_menu li {margin: 0px;padding:5px;}
	.video{width:100%;margin:40px auto;}
	/*.portfolio,.foto_text{padding:5px;margin-left:0rem;width:100%;}
	.portfolio img,.foto_text img{float:;clear: both;margin-right:100%;}
*/	
	.flex-gite{}
      .item-gite:nth-child(3) { display:none;}
	/*formulaire*/
	input[type="text"], input[type="email"], input[type="number"]{width:100%;}
	.erreur, fieldset, textarea, input[type="text"], input[type="email"], input[type="number"]{width:95%;}
	.erreur{width:95%;}
	label{text-align:left;float:none;padding-left:15px;margin-bottom:5px;font-size:0.8em;}
}