@charset "utf-8";


#main {
width: 100%;
height: 640px;
background-image: url('../images/bg-home-02.jpg');
background-size: cover;
background-repeat: no-repeat;
}

#main #contrech {
width: 1560px;
margin: auto;
padding-top: 12em;
text-align: center;
}

h1 {
font-size: 4em;
font-weight: 400;
color: #fff;
}

#recherche {
display: grid;
width: 75%;
margin: auto;
/*grid-template-columns: repeat(5, 1fr);*/
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: auto;
gap: 0;
}

#recherche > div {
position: relative;
display: inline-block;
background-color: #fff;
min-width: 10em;
height: 5.5em;
}

#recherche > div:first-child {
border-top-left-radius: 0.5em;
border-bottom-left-radius: 0.5em;
}

#recherche > div:last-child {
background-color: transparent;
}

#recherche > div::after {
position: absolute;
display: block;
width: 1px;
right: 0;
height: 2.5em;
top: 1.5em;
content: '';
background-color: #eee;
}

#recherche > div:last-child::after {
display: none;
}

#recherche > div:last-child a {
line-height: 4em;
font-size: 1.3em;
}

/*#recherche > div a {*/
#recherche #logtype a, #recherche #secteur a, #recherche #dates > a, #recherche #nbpers > a {
display: block;
height: 100%;
line-height: 4em;
color: #333;
font-weight: 500;
text-decoration: none;
}

#recherche > div a span {
display: block;
position: absolute;
width: 100%;
height: 1.5em;
top: 2.5em;
line-height: 1.5em;
font-weight: 400;
color: #aaa;
}

#recherche > div > div {
position: absolute;
display: none;
z-index: 10;
width: 22em;
height: 0;
opacity: 0;
left: 0;
top: 5em;
padding: 2em 0;
background-color: #fff;
transition: all 0.5s ease-out;

border-radius: 0.5em;
-webkit-box-shadow: 0 3px 5px 0 rgba(0,0,0,0.3);
   -moz-box-shadow: 0 3px 5px 0 rgba(0,0,0,0.3);
        box-shadow: 0 3px 5px 0 rgba(0,0,0,0.3);
}

#recherche > div > div.grand {
width: 50em;
text-align: center;
grid-template-columns: repeat(2, 1fr);
grid-auto-rows: auto;
gap: 2em;
}

#recherche > div > div.visible {
display: block;
height: auto;
opacity: 1;
transition: all 0.5s ease-out;
display: grid;
}

#recherche > div > div.grand.visible {
}

#recherche > div > div.grand div { /* Calendriers */
}

#recherche > div > div a.liste {
width: calc(100% - 4em);
padding: 0 2em;
text-align: left;
}

#recherche > div > div p {
line-height: 2em;
color: #333;
font-weight: 500;
text-align: left;
padding: 0 2em;
}

#recherche > div > div a.liste:hover {
background-color: var(--clr1);
}


#recherche .calendrier {
display: inline-block;
box-shadow: unset;
border: 1px solid #eee;
}

#recherche .calendrier:first-child {
/*margin-right: 5em;*/
}

#recherche .contnbr {
position: relative;
width: calc(100% - 4em);
margin: auto;
}

#recherche .contnbr .spin {
position: absolute;
width: 2.5em;
height: 4em;
right: 0;
top: 0;
}

#recherche .contnbr .spin div {
width: 2.5em;
height: 2em;
color: #333;
background-color: #f8f8f8;
text-align: center;
line-height: 2em;
cursor: pointer;
user-select: none;
}

#recherche .contnbr .spin div:hover {
color: #777;
}

#recherche .contnbr .spin div:first-child {
}

#recherche .contnbr .spin div:last-child {
}


#recherche input[type="number"] {
width: calc(100% - 2em);
height: 3em;
border: none;
font-weight: 600;
padding: 1em;

color: #555;
background-color: #f8f8f8;
}




#btrech {
display: inline-block;

/*width: 10em;*/
height: 5.5em;
line-height: 4em;

margin: 0;
padding: 0 !important;

border-top-right-radius: 0.5em;
border-bottom-right-radius: 0.5em;
background-color: var(--clr1) !important;
}

#btrech a {
display: block;
width: 100%;
height: 100%;
color: #fff !important;
padding: 0 !important;
font-size: 1em;
text-align: center;
text-transform: uppercase;
font-weight: 500;
text-decoration: none;
}

#recherche #divsect {
width: 20em;
}

#recherche .calendrier {
width: 20em;
}


h2 {
margin: 2em 0 1em 0;
font-size: 2em;
font-weight: 500;
color: #333;
}

h2::after {
display: block;
content: '';
width: 2.7em;
height: 3px;
margin-top: 0.5em;
background-color: var(--clr1);
}

#headlast {
position: relative;
}

#filtres {
position: absolute;
top: 0;
right: 0;
}

#filtres a {
display: inline-block;
margin: 0 0 0 1em;
padding: .5em 1em;
background-color: #f8f8f8;
color: var(--clr3);
font-weight: 500;
letter-spacing: 0;
text-transform: uppercase;
text-decoration: none;
border-radius: 0.3em;
transition: all 0.2s ease-in;
}

#filtres a.actif {
background-color: var(--clr1);
color: #fff;
transition: all 0.2s ease-in;
}

#last {
width: 1560px;
margin: auto;
padding: 0;
}

#last p {
margin-top: 0;
/*margin-bottom: 2.5rem;*/

font-size: .875em;
font-weight: 400;
color: #696969;
text-align: left;
}

#last ul {
list-style-type: none;
display: grid;
margin: 2em 0 5em 0;
padding: 0;
height: auto;
/*
grid-template-columns: repeat(3, calc(33.3% - 2em));
grid-gap: 2em;
grid-auto-columns: 1fr;
*/

grid-template-columns: repeat(4, 1fr);
grid-auto-rows: auto;
gap: 2em;
}

#last ul li {
position: relative;
grid-column: auto;
grid-row: auto;
width: 100%;
/*height: 260px;*/
opacity: 1;
transition: all 0.5s ease-in;
}

#last ul li a {
position: relative;
display: block;
}

#last ul li a img {
vertical-align: top;
border-radius: 0.3em;
width: 100%;
/*height: 260px;*/
}

#last ul li a .infos {
position: absolute;
width: calc(100% - 1.6em);
bottom: 0;
padding: 0.8em;
background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.8) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
border-bottom-left-radius: 0.3em;
border-bottom-right-radius: 0.3em;
}

#last ul li a .pictos {
font-weight: 500;
font-size: 0.92em;
color: #fff;
margin: 0.5em 0 0 0;
}

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

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

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


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

h3 {
/*width: 100%;
padding: 0.25em 0;
margin: 0;
font-weight: 500;
font-size: 1.14em;*/
border-bottom: 1px solid #777;
color: #fff;
}


#bottom {
width: 100%;
text-align: center;
}

#tout {
display: inline-block;
margin: 5em 0;
padding: 1em 2em;
text-decoration: none;
font-weight: 500;
border-radius: 0.3em;
background-color: var(--clr1);
color: var(--clr3);
}



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

	#last {
	width: 1200px;
	}

	#last ul {
	grid-template-columns: repeat(3, 1fr);
	overflow: hidden;
	}

}


@media only screen and (min-width: 992px) and (max-width: 1199px) {
	#main #contrech {
	width: 100%;
	}

	#last {
	width: calc(100% - 2em);
	padding: 0 1em;
	}

	#last ul {
	grid-template-columns: repeat(3, 1fr);
	overflow: hidden;
	}

}


@media only screen and (min-width: 768px) and (max-width: 991px) {
	#main #contrech {
	width: 100%;
	}

	h1 {
	font-size: 2.5em;
	}

	#last {
	width: calc(100% - 2em);
	padding: 0 1em;
	}

	#last ul {
	grid-template-columns: repeat(2, 1fr);
	overflow: hidden;
	}

}


@media only screen /*and (min-width: 576px)*/ and (max-width: 767px) {
	#main #contrech {
	width: 100%;
	}

	h1 {
	font-size: 2.5em;
	}

	#last {
	width: calc(100% - 2em);
	padding: 0 1em;
	}

	#last ul {
	grid-template-columns: repeat(1, 1fr);
	overflow: hidden;
	}

}


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

}
*/