/* CSS Document */

.flex-line { display: flex; flex-wrap: wrap; }

.flex-line > * { width: auto; }
.flex-line .icon-date { margin-right: 5px; }

/* HEBERGEMENTS */
.hebergement { border: 1px solid #ccc; margin-bottom: 1rem; }
.header-hebergement { padding: .5rem; background: #d6d6d6; display: flex; flex-wrap: wrap; border-bottom: 2px solid #ccc; }
.header-hebergement .infos-b { width: 100%; }
.hebergement h4 { display: inline-block; text-transform: none; font-weight: bold; font-size: 1.1rem; line-height:32px; margin: auto 0; background-image: url(../img/bed.svg); background-repeat: no-repeat; padding: 0 0 0 36px; background-size: 32px; }
.hebergement.tente h4 { background-image: url(../img/tente.svg); }
.hebergement.chambre h4 { background-image: url(../img/chambre.svg); }
.hebergement.camping-car h4 { background-image: url(../img/camping-car.svg); }
.hebergement.dortoir h4 { background-image: url(../img/dortoir.svg); }

.choix-pension { display: flex; margin-left: auto; white-space: nowrap; }
.choix-pension label { margin: auto 5px; }

.liste-prix { line-height: 36px; }
.liste-prix label {  margin-left: 5px; }
.liste-prix label small { font-size: .9rem; }
.liste-prix .prix { font-weight: bold; margin-left: auto; }
.liste-prix > div { display: flex; flex-wrap: wrap; align-items: baseline; padding: 0.5rem; border-bottom: 1px dotted #ccc; transition: 0.7s all; }
.liste-prix > div:last-child { border-bottom: none; }
.liste-prix > div:hover { background-color: #ccc; }
.liste-extra { border-top: 1px solid #ccc; }

.tpp { font-size: smaller; font-weight: bold; margin-left: auto; }

#estimation-total { display: flex; flex-direction: row; padding: 0.4rem 0; text-align: center; font-weight: bold; border-top: 3px double; }

@media (max-width: 680px) {
	.header-hebergement  { display: block; }
	.choix-pension { padding: .3rem 0; margin: .5rem 0; white-space: nowrap; border-top: 1px dotted #999; border-bottom: 1px dotted #999; }
	.hebergement h4 { font-size: 0.9rem; }
}
@media (max-width: 480px) {
	.ligne-normal > .counter-bloc { order: 4; width: 50%; }
	.ligne-normal > .prix { order: 4; }
	.ligne-normal > label { width: 100%; order: 2; margin-top: .5rem; }
}