@charset "UTF-8";
html{
	/*background-image:url("fondd.png");*/
	background : rgb(210,210,250);
	/*background-repeat: repeat;
	background-size: cover;
	width: auto;*/
}
body {
  /*overflow-y: hidden;  Hide vertical scrollbar */
  overflow-x: hidden; /* Hide horizontal scrollbar */
  place-items:center;
  display: grid;
}
.addthis_inline_share_toolbox{
    text-align: center;
}
/* The Connected Button */
#LoginConnected {
  position: relative;
  font-size: 30px;
  font-weight: bold;
}
#bod-lev0{
    background:black;
    padding:2px;
    border:2px;
    border-radius:20px;
    width:100%;
}

#bod-lev1{
    top:0px;
    background: linear-gradient( rgb(10,10,10) , rgb(0,0,204) );
    border-radius: 20px;
}

#TachCour{ 
    color : #fff;
    margin: 8px 4px;
    /*:bold;*/
}
#td-rechercher{
    background-color: #00a;
	border: 4px solid rgb(175,175,230);
	border-radius:20px;
	padding:2px;
	margin:4px;
}

#Rechercher-Submit-btn{
	padding: 10px 10px;
	margin:4px;
	color: #ddf;
	background: linear-gradient(to left top ,#000,#6c6);
	box-shadow: 4px 3px 7px grey;
	border-radius:20px;
    float:right;
	border: 4px solid rgb(175,240,175);
}
#Selectioner-Submit-btn{
	padding: 10px 10px;
	margin:4px;
	color: #ddf;
	background: linear-gradient(to left top ,#000,rgb(255, 255, 0));
	box-shadow: 4px 3px 7px grey;
	border-radius:20px;
    float:right;
	border: 4px solid rgb(175,240,175);
}

#div0 {
    position : relative;
    display:inline-block;
    vertical-align:top;

    width : 94%; 
    height:auto;
    min-height:30px;
    background:rgb(160,150,200);
    margin:10px 3%;
	border: 4px solid rgb(0,0,255);
    border-radius:10px;
}

.div1 {
    display:none; /* none  or inline-block; */

    width : 98%;
    top: 0px;
    height:auto;
    margin:2px 1%;
    border-radius:10px;
}
.div2 {
    display:none;  /*none  or inline-block; */
    width : 98%;
    top: 0px;
    height:auto;
    margin:2px 1%;
    border-radius:10px;
}
.div3 {
    display:none;  /*none  or inline-block; */
    width : 98%;
    top: 0px;
    height:auto;
    margin:2px 1%;
    border-radius:10px;
}
.div4 {
    display:none;  /*none  or inline-block; */
    width : 98%;
    top: 0px;
    height:auto;
    margin:2px 1%;
    border-radius:10px;
}
select {
	font :inherit;
	padding : 1px;
	font-size : 15px;
}
select[required]:not(:has([value=""]:checked)){
	border :4px solid #00d500 ;  ;
}
select[required]:has([value=""]:checked){
	border :4px solid red ;
}
/* The Modal (background) */
.modal {
  display:none;
  position:fixed;
  z-index: 1;
  padding-top: 50px;
  left: 4px;
  top: 0;
  right: 0;
  width: auto;
  height: 100%;
  overflow: auto;
  background-color: black;
  opacity: 0.9;
  /*justify-content: center;horiz*/
  /*align-items: center;vertic*/
}
/* Modal Content */
.modal-content {
  position: relative;
  background-color: #00ffff;
  margin: auto;
  padding: 10px;
  width: 70%;
  /*max-width: 1200px;*/
  border-radius:10px;
  opacity: 1;
}
.modalPicture {
  display: inline-block;
}
#DivEnterCode{
  display: none;	
}
/* The Close Button */
.close {
  color: white;
  position: absolute;
  top: 10px;
  right: 25px;
  font-size: 35px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #999;
  text-decoration: none;
  cursor: pointer;
}

#FormCreerClient {
    position : relative;
    text-align:center;
    /*width : 100%;*/
}
#FormCreerHotel {
    position : relative;
    text-align:center;
    /*width : 100%;*/
}

nav li {
	list-style-type: none;
}

nav>ul>li {
	float: left;
	position: relative;
}

nav {
	background-color: #006;
	border: 4px solid rgb(175,175,230);
	border-radius:20px;
	margin:4px;
}

nav>ul::after {
	content: "";
	display: block;
	clear: both;
}

nav>ul>li>a {
	padding: 20px 30px;
	margin:10px;
	color: #ddf;
	background: linear-gradient(to left top ,#000,#66e);
	box-shadow: 4px 3px 7px grey;
	border-radius:20px;
}


nav a {
	display: inline-block;
	text-decoration: none;
}

h1 {
	text-align: center;
	color: bisque;
}

.horizontal-align {
	display:/*flex*/inline-block;
	justify-content: center;
	align-items: center;
	vertical-align: top;
	width: 90%;
	height: auto;
	padding: 20px 30px;
	margin: 20px 5%;
	box-sizing: border-box;
	border: 1px solid;
	background:rgb(110,80,236); 
	text-align : center;
	border-radius: 12px;
	color : white;
}
.item {
    width: 100%;
	display: none; /*----------suivi de inline-block ------------------------- */
	vertical-align: top;
	height: auto;
	min-height: 100px;
	padding: 25px;
	box-sizing: border-box;
	border: 1px solid #ccc;				
	background : rgb(235,215,255);;
	margin: 5px 15px;
    border-radius: 12px;
}
.item h3{
    font-family: Arial, sans-serif;
    text-align: center; /* Centrer le titre */
    margin-top: 0;
    margin-bottom: 15px;
    color : darkblue;
}
.item p{
    /* 1. Typographie */
    font-family: 'Times New Roman', serif; /* Police classique de lecture */
    font-size: 1rem;
    color: #343a40;
    
    /* 2. Règle clé pour l'interligne (essentiel) */
    line-height: 1.6; 
    
    /* 3. 🔑 La règle pour aligner le texte de bord à bord */
    text-align: justify; 
    
    /* 4. Amélioration de la justification pour le français */
    hyphens: auto; 
}
#baspage{
	text-align: center;
	font-size: 12px;
	color: blue;
	background : White;
}
.galerieimg{
	width: 70px;
	height: 60px;
	margin : 0px;
	border : 1px solid #000000;
	text-align : center;
}
.galerieimgflag{
	width: 18px;
	height: 15px;
	margin : 0px;
	border : 1px solid #000000;
	text-align : center;
	opacity : 0.9;
}
#symb_required{
	color : yellow;;
  	font-size: 25px;
  	font-weight: bold ;
}
#symb_requiredPub{
	color : red;
  	font-size: 25px;
  	font-weight: bold ;
}
#expr_required{
	color : white;
  	font-size: 15px;
  	font-weight: bold ;
  	text-decoration : underline;
}
#expr_required2{
	color : white;
  	font-size: 15px;
  	font-weight: bold ;
  	/*text-decoration : underline;*/
}
#expr_requiredPub{
	color : black;
  	font-size: 15px;
  	font-weight: bold ;
  	text-decoration : underline;
}
#expr_style2{
	color : maroon;
  	font-size: 15px;
  	text-decoration : underline;
}
/* --------Slider :  ------------------------------*/
* {box-sizing:border-box}

/* Slideshow container */
.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
  border-radius:10px;
  background-color : rgb(0 0 0 / 80%);
  border-color:blue;
  border-width:2px;
}

/* Hide the images by default */
.mySlides {
  display: block;
  opacity :0.4;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}

/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 18px;
  background : black;
  border-radius: 5px;
  padding: 2px 3px;
  position: absolute;
  bottom: 8px;
  /*width: 100%; supprimé car résultat dangereux sur mon smartphone*/
  text-align: left;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
  text-align: left;
}

/* The dots/bullets/indicators */
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: rgb(192, 192, 192);
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
  margin:3px;
}

.active, .dot:hover {
  background-color: rgb(6, 255, 6);
}

/* Fading animation */
.fade {
  animation-name: fadeIn;
  animation-duration: 1.5s;
}

@keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}
/*------------------------------SubFormPay--------------------------------------*/
/* Customize the label (the container) */
.paymodcontainer {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 18px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default checkbox */
.paymodcontainer input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.paymodcheckmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #408080;
}

/* On mouse-over, add a grey background color */
.paymodcontainer:hover input ~ .paymodcheckmark {
  background-color: #8080ff;
}

/* When the checkbox is checked, add a blue background */
.paymodcontainer input:checked ~ .paymodcheckmark {
  background-color: #2196F3;
}

/* Create the checkmark/indicator (hidden when not checked) */
.paymodcheckmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.paymodcontainer input:checked ~ .paymodcheckmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.paymodcontainer .paymodcheckmark:after {
  left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
/*-----------------------------  fin slider        ----------------------------------------*/

#start-payment-button {
    cursor: pointer;
    position: relative;
    background-color: blueviolet;
    color: #fff;
    max-width: 30%;
    padding: 10px;
    font-weight: 600;
    font-size: 14px;
    border-radius: 10px;
    border: none;
    transition: all .1s ease-in;
}
/*--------------------rotate img debut------------------------------------------------------------------*/
.flagsrotate{
  position:relative;
  margin-left: auto;
  margin-right: auto;
  width:70px;/*original :300px;*/
  height:40px;/*original :200px;*/
  transform-style:preserve-3d;
  animation:rotate var(--durrot) linear infinite;
}

.galleryrotate{
	--degrot:24deg;/*24 -> pour 15 images ; 24*15=360 */
  position:relative;
  margin-left: auto;
  margin-right: auto;
  width:135px;/*original :300px;*/
  height:90px;/*original :200px;*/
  transform-style:preserve-3d;
  animation:rotate 35s linear infinite;
}

@keyframes rotate{
  from{
    transform:perspective(2400px) rotateY(0deg);/*original:1200px;*/
  }
  
  to{
    transform:perspective(2400px) rotateY(-360deg);/*original:1200px;*/
  }
}

.galleryrotate span{
  position:absolute;
  width:100%;
  height:100%;
  /*margin:10px;*/
  transform-origin:center;
  transform-style:preserve-3d;
  transform:rotateY(calc(var(--i) * var(--degrot))) translateZ(340px); /*original :* 45deg, translateZ(380px);*/
}

.galleryrotate span img{
  position:absolute;
  width:100%;
  height:100%;
  object-fit:cover;
}
.flagsrotate span{
  position:absolute;
  width:100%;
  height:100%;
  /*margin:10px;*/
  transform-origin:center;
  transform-style:preserve-3d;
  transform:rotateY(calc(var(--i) * 360/var(--nbitemrot) * 1deg)) translateZ(var(--trslt)); /*original :* 45deg, translateZ(380px);*/
}

.flagsrotate span img{
  position:absolute;
  width:100%;
  height:100%;
  object-fit:cover;
}
/*--------------------rotate img fin------------------------------------------------------------------*/
/*-------------------------------lodging amenuities -----------------------------------------------------*/
.imgico {
	width: 30px;
	height: 30px;
}
.LittleText{
	font-weight: bold;
	color: black;
	font-size:12px;
}
/*-------------------------------lodging amenuities fin-----------------------------------------------------*/