.form-macabane .navigation-dates { display: flex; flex-wrap: wrap; }
.form-macabane .navigation-dates > * { display: flex; flex-wrap: wrap; width: 100%; }
.form-macabane .navigation-dates > div > * { display: block; flex: 1; border: 1px solid #ccc; padding: 10px; outline: none; }
.form-macabane .navigation-dates button { cursor: pointer; margin: 0 1px 0 0; border-radius: 0; border: none; background-color: #8b8b8b; transition: 0.8s;  }
.form-macabane .navigation-dates button:hover { background-color: #fff; color: #222; }
.form-macabane .navigation-dates input[name="date"] { text-align: center; }
.form-macabane .jours-mois-nav { display: none; }
.form-macabane button[name="godate"] { max-width: 50px; }
.form-macabane input[name="date"] { border-radius: 0; max-height: inherit; }

.disponibilites-dates { display: flex; flex-wrap: wrap; }
.disponibilites-dates .jour { position: relative; display: block; background-color: #ccc; flex: 1; min-width: calc(100% / 7); padding: 10px; border-top: 1px solid #fff; border-right: 1px solid #fff; }
.disponibilites-dates .jour > .dispo { position: relative; display: flex; flex-wrap: wrap; font-size: 0.85rem; line-height: 1rem; text-decoration: none; width: 100%; padding: 5px; margin: 5px auto auto auto; min-width: 40%; color: #fff; border: 2px solid transparent; cursor: pointer; border-radius: 2px; transition: all 1s; }
.disponibilites-dates .jour .dispo.active { background-color: rgba(0, 128, 0, 1); border: 2px solid #005400; }

.disponibilites-dates .jour > * .nb-dispo { margin-left: auto; }
.disponibilites-dates .jour > * .typeH { position: absolute; right: 3px; top: 0px; font-size: 0.8rem; display: none;}
.jc { position: absolute; left: 5px; top: 5px; font-size: 0.9rem; line-height: 16px; }
.jm { font-size: 2rem; display: block; }
.date-display { text-align: center; }

.chambre-desc { font-size: 0.85rem; }
.disponibilites-dates .jour .heb-infos { display: none; }
.disponibilites-dates .jour .dispo.active .heb-infos { display: block; width: 100%; border-top: 1px dotted rgba(255,255,255,0.3); font-size: smaller; padding: 5px 0 0 0; margin-top: 5px; }

.dispo.vert { background-color: rgba(0, 128, 0, 0.5); }
.dispo.rouge { background-color: rgba(128,0,0,0.50); }
.dispo.orange {	background-color: rgba(236,124,0,0.50); }
.complet { background-color: red; }

.dispo.vert:hover { background-color: #005400; }
.dispo input { display: none; }
.dispo.active select { display: block; flex: 0 0 100%; margin-top: 0.2rem; padding: 0; }

@media (min-width: 769px) {
	.form-macabane .navigation-dates { display: flex; flex-wrap: wrap; }
	.form-macabane .jours-mois-nav { display: flex; width: 66.9%; }
	.form-macabane .jour-date-nav { width: 33%; }
}

@media (max-width: 980px) {
	.form-macabane .disponibilites-dates .jour { flex: 1 25%; }
}

@media (max-width: 680px) {
	.form-macabane .disponibilites-dates .jour { flex: 1 50%; }
	.form-macabane .navigation-dates > button { flex: 1 calc(50% - 2px); font-size: 0.8rem; }
	.form-macabane .navigation-dates > .date-du-jour { flex: 1 100%; }
}

@media (max-width: 480px) {
	.form-macabane .disponibilites-dates .jour { flex: 1 100%; }
	.form-macabane .navigation-dates > button { flex: 1 50%; font-size: 0.8rem; }
	.form-macabane .navigation-dates > .date-du-jour { flex: 1 100%; }
}