@charset "utf-8";


.container {
width: calc(100% - 2em);
padding: 1em;
background-color: #f8f8f8;
}

section#main {
display: grid;
width: 100%;
display: grid;
margin: 0 auto;
grid-template-columns: 1fr 1fr;
grid-auto-rows: auto;
gap: 2em;
}

#carte {
height: 1500px;
}

.marker {
background-image: url("../images/mapbox-marker.png");
width: 20px;
height: 48px;
cursor: pointer;
}


#liste {
}

#rech ul {
list-style-type: none;
display: block;
margin: 1em 0 5em 0;
padding: 0;
}

#rech ul li {
position: relative;
display: block;

background-color: #fff;
border: 1px solid #eee;
border-radius: 0.3em;
padding: 1em;
margin-bottom: 1.5em;
transition: all 0.5s ease-in;
}

#rech ul li a {
position: relative;
display: grid;
grid-template-columns: 1fr 3fr;
grid-auto-rows: auto;
gap: 1em;
text-decoration: none;
}

#rech ul li a img {
vertical-align: top;
border-radius: 0.3em;
width: 100%;

}

p.tarif {
margin: 0.5em 0;
color: #333;
font-size: 1.1em;
font-weight: 700;
}

#rech ul li a .infos {
}

#rech ul li a .pictos {
font-weight: 500;
font-size: 0.92em;
}

#rech ul li a .pictos span {
margin-right: 1em;
font-weight: 500;
color: #777;
}

#rech ul li a .pictos span::before {
font-family: Fontello;
color: var(--clr1);
font-size: 1.3em;
margin-right: 0.5em;
}

#rech ul li a .pictos span:first-child::before { content: '\e806'; }
#rech ul li a .pictos span:nth-child(2)::before { content: '\f236'; }
#rech ul li a .pictos span:nth-child(3)::before { content: '\f2cc'; }


#rech ul li.hidden {
opacity: 0;
transition: all 0.5s ease-in;
}

.pagination {
text-align: center;
margin: 2em auto;
}

.pagination a, .pagination span {
display: inline-block;
width: 2rem;
height: 2rem;
margin-right: 0.5em;
line-height: 2rem;
/*font-size: 0.8em;*/
font-weight: 600;
text-decoration: none;
color: #333;
}

.pagination a:nth-child(-n+1), .pagination span:nth-child(-n+1), .pagination a:nth-last-child(-n+1), .pagination span:nth-last-child(-n+1) {
font-family: Fontello;
}

.pagination a:last-child, .pagination span:last-child {
margin-right:0;
}

.pagination a:hover {
background-color: var(--clr3);
color: #fff;
border-radius: 50%;
}

.pagination span:not(.actif) {
opacity: 0.5;
}

.pagination span.actif {
background-color: var(--clr3);
color: #fff;
border-radius: 50%;
}

.pagination.alpha a, .pagination.alpha span {
font-family: inherit;
font-weight: inherit;
}

.pagination a.reset, .pagination span.reset {
font-family: Fontello;
}



@media only screen and (min-width: 1200px) and (max-width: 1599px) {
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
	h1 {
	padding: 0 1rem;
	}

	.container {
	width: calc(100% - 2em);
	margin: auto;
	padding: 0 1em;
	}

	section#main {
	width: 100%;
	}

}

@media only screen /*and (min-width: 768px)*/ and (max-width: 991px) {
	h1 {
	padding: 0 1rem;
	}

	.container {
	width: calc(100% - 2em);
	margin: auto;
	padding: 0 1em;
	}

	section#main {
	width: 100%;
    grid-template-columns: 1fr;
	}

	#galerie #autres ul {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-auto-rows: auto;
	gap: 0.875em;
	}

	#galerie #autres ul li:first-child {
	grid-column: span 2;
	grid-row: span 2;
	}

}

@media only screen and (min-width: 576px) and (max-width: 767px) {
}

@media only screen and (max-width: 575px) {
}