﻿
.miniCalendrier {
    width: 350px;
    border: 1px solid #ccc;
    font-family: Arial, sans-serif;
	display:inline-block;
	margin:10px;
	position:relative;
}

.miniCalendrier .mois {
    background-color: #eee;
    text-align: center;
    font-size: 18px;
    padding: 10px;
}

.miniCalendrier .jours-semaine {
    display: flex;
    background-color: #ccc;
    color: #fff;
}

.miniCalendrier .jour {
    flex: 1;
    text-align: center;
    padding: 10px;
}

.miniCalendrier .jours .jour {
	position:relative;
	border:1px solid red;
}
.miniCalendrier .jours .jour .tarif{
	bottom:-1px;
	right:2px;	
	font-size:8px;
	position:absolute;
	color:black;
	font-weight: 100;
}
.disabled  .tarif{
	display:none;
}

.miniCalendrier .jours {
	display: grid;
    grid-template-columns: repeat(7, 1fr);
	width:350px;
}

.miniCalendrier .inactif {
    color: #ccc;
}
.miniCalendrier .jour {
    flex: 1;
    text-align: center;
    padding: 9px;
    margin: 1px;
	/*width: 30px;*/
}

.miniCalendrier .jours .jour{
	background-color:#f8f8f8;	
	border:1px solid transparent;
	/*transform: skewX(-15deg);*/
}
.miniCalendrier .jours .jour .numeroJour, .miniCalendrier .jours a .jour .numeroJour{
	color:#333333;
	/*transform: skewX(15deg);*/
}
/*
.jourDebut {
	transform: skewX(-45deg);	
}
.jourDebut .numeroJour{
	transform: skewX(45deg);	
}
/**/
.miniCalendrier .jours .reserve{
	background-color:#ffdddd;	
	border:1px solid transparent;
}
.miniCalendrier .jours .inactif{
}
.miniCalendrier .jours .inactif .numeroJour{
	color:#ccc;	
	font-size: 0.6em;
    margin-top: 4px;
}
.miniCalendrier .jours .selected{
	background-color:#00a700!important;	
}
/*
.selected:last-child .tarif{
	display:none;
}
.selected:first-child .tarif{
	display:block;
}
/**/
.miniCalendrier .jours .selected .numeroJour{
	color:#ffffff!important;	
	font-weight:bold!important;
}
.miniCalendrier .jours .disponible{
	background-color:#ddffdd;	
	border:1px solid #ddffdd;
}
.miniCalendrier .jours .plateforme1 .numeroJour{
	/*color:#ffffff;*/
}
.miniCalendrier .jours .plateforme1, .plateforme1{
	/*background-color:#77bac5;	*/
	/*background-color:#03f4f4;*/
	background-color:#628638;
	color:#ffffff;
}
.miniCalendrier .jours .plateforme2, .plateforme2{
	/*background-color:#ffb3c1;	*/
	background-color: #ff385c;
	color:#ffffff;
}
.miniCalendrier .jours .plateforme2 .numeroJour, .miniCalendrier .jours .plateforme2 .tarif{
	color:#ffffff;
}
.miniCalendrier .jours .plateforme3, .plateforme3{
	background-color:#245abc;	
	color:#ffffff;
}
.miniCalendrier .jours .plateforme3 .numeroJour, .miniCalendrier .jours .plateforme3 .tarif{
	color:#ffffff;
}
.miniCalendrier .jours .plateforme4, .plateforme4{
	background-color:#ec5a13;	
	color:#ffffff;
}


.miniCalendrier .jours .plateforme2.plateforme3{
	background-color:#ff385c;	
	outline: 9px solid #245abc;
	outline-offset: -9px;/**/
}
.miniCalendrier .jours .plateforme1.plateforme3{
	background-color:#628638;
	outline: 9px solid #245abc;
	outline-offset: -9px;/**/
}
.miniCalendrier .jours .plateforme1.plateforme2{
	background-color:#ff385c;
	outline: 9px solid #628638;
	outline-offset: -9px;/**/
}
.miniCalendrier .jours .plateforme1.plateforme2.plateforme3{
	background-color:#ff385c;
	outline: 5px solid #245abc;
	outline-offset: -5px;/**/
}
.miniCalendrier .jours .plateforme1.plateforme2.plateforme3 .numeroJour{
	background-color:#628638;
}

.miniCalendrier .jours .clicable1{
	font-weight:600;
	background-color:#ddffdd;	
	border:1px solid #0e970e;
}
.miniCalendrier .jours .clicable1 .numerojour{
	color:#0e970e!important;
}
.miniCalendrier .jours .clicable1:hover{
	background-color:#0e970e;
}
.miniCalendrier .jours .notclicable{
	font-weight:300;
	border:1px solid transparent;
	/*pointer-events: none!important;*/
	cursor: not-allowed!important;
}
/**/
.miniCalendrier .jours a:has(> .notclicable) {
	pointer-events: none!important;
}
/**/
.miniCalendrier .jours .reserve:hover{
	/*background-color:#ff002f!important;	*/
	/*filter: grayscale(1);*/
	/*
	cursor: not-allowed;
	/**/
}
.miniCalendrier .jours .clicable1:hover .numeroJour{
	color:#ffffff!important;	
}
.miniCalendrier .jours .clicable1:hover .tarif, .miniCalendrier .jours .selected .tarif{
	color:#ffffff!important;
}

.miniCalendrier .lienMois{
	text-decoration:none;
	color:grey;
	/*
	font-size:48px;
	height:10px;
	width:30px;
	/**/
	display:inline-block;
}
.miniCalendrier .lienMois div{
	/*height:100%;* /
	min-height:100px;
	/*width:30px;*/
	text-decoration:none;
	color:grey;
	font-size:18px;
	/*border:1px solid grey;*/
	display:inline-block;
	/*margin-top:100px;*/
	display: flex;
	justify-content:center;
	align-content:center;
	flex-direction:column;
	/*background-color:red;/*/
}
.miniCalendrier .lienMoisPrev{
	float:left;
}
.miniCalendrier .lienMoisNext{
	float:right;
}
/*
.miniCalendrier .lienMois:first-child{
	float:left;
}
.miniCalendrier .lienMois:last-child{
	float:right;
}
/**/




.nbJours{
	font-size:12px;
	font-weight:600;
	font-style:italic;
}


.liste-col ul {
	column-count: 1;
	list-style-position: inside;
}

.liste-col ul.deuxcolonnes {
	column-count: 2;
	list-style-position: inside;
}
.liste-col ul li {
	display: inline-block;
	/*width: calc(100% / 2);*/
	width:100%;
	box-sizing: border-box;
	list-style: disc inside;
	position:relative;
	margin-left:15px;
}
.liste-col ul li:before {
	position:absolute;
	content:"∎";
	font-size:10px;
	left:-15px;
	top:3px;
	color: var(--blue);
}
.equipement ul:nth-child(2) {
    margin-top: 0px;
}

#carte{
	position:relative;
	overflow:hidden;
	width:100%;
	height:436px;
}
#carte iframe{
	position:absolute;
	border:0px;
	top:-60px;/**/
}
.miniCalendrier .jours .disabled{	
	filter: grayscale(1)!important;
}
.fermerCalendrier {
    position: absolute;
    top: -13px;
    right: -13px;
    /*border: 1px solid grey;*/
    border-radius: 50px;
    width: 26px;
    height: 26px;
    color: white;
	background-color: var(--blue);
    text-align: center;
    font-weight: 600;
	box-shadow: 1px 1px 12px #555;
}
.fermerCalendrier:hover{
    background-color: red;
}

.contenu_editor {
    padding: 40px 40px;
}

.contenu_editor .pieces {    
    padding: 0px 0px;
}
.contenu_editor > h2{
	margin: 32px 0 10px;
}
.contenu_editor a, .description a {
    color: var(--blue);
    font-weight: 500;
    border-bottom: 2px solid;
}
.btn{
	width:100%;
}
.btn:hover{
	width: 100%;
	border: 2px solid var(--blue);
	cursor: pointer;
}

.reservation{
	position:relative;
}
#divcalendrier{
	position:absolute;
	top:150px;
	right:50px;
	/*border:1px solid var(--blue);*/
	box-shadow: 1px 1px 12px #555;
	margin:50px;
	padding:10px;
	border-radius:10px;	
	width:760px;									
	/*height:300px;*/
	background-color:white;
}
.cachee{
	display:none;
}
#arrivee, #depart{
	/*width:50px;*/
}
[type="date"]::-webkit-inner-spin-button {
	display: none;
}
[type="date"]::-webkit-calendar-picker-indicator {
	display: none;
}
.loading {
	text-align:center;
	padding:150px 20px;;
}
.loading img{
	margin:0px auto 15px auto;
}
.loading label{
	font-style:italic;
	font-weight:300;
	color:#FE5F10;
	text-align:center;
	font-size:12px;
}

@media (max-width: 1280px) {
    .contenu_editor iframe {
        max-width:calc(100% - 80px);
        max-height: calc(55vw - 80px);
    }
}

@media (max-width: 1000px) {
    .contenu_editor iframe {
		max-width: calc(100% - 0px);
		max-height: calc(56vw - 40px);
    }
    #divcalendrier{
		top:50px;
		width:390px;									
	}
}

@media (max-width: 520px) {
	.miniCalendrier {
	    width: 313px;
	}
	.miniCalendrier .jours {
	    width: 313px;
	}
	.miniCalendrier .jour {
	    padding: 8px;
	}
	#divcalendrier {
	    width: 334px;
	}
	#divcalendrier {
	    padding: 0px;
	    right: -48px;
	}
}

