.metiers{
margin:2rem 0;
}
.metiers a{
margin-bottom:1rem;
}
.metiers .vignet{
margin-bottom:1rem;
background-color: var(--grisclair);
position:relative;
overflow:hidden;
}
.metiers a .vignet img{
position:absolute;
left:50%; top:50%;
-webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);
-webkit-transition: all 0.2s ease; transition: all 0.2s ease;
width:100%; height:100%;
object-fit: cover;
}
.metiers a:hover .vignet img{
-webkit-transform: translate(-50%, -50%) scale(1.1); transform: translate(-50%, -50%) scale(1.1);
}
.metiers .ttl{
text-align: left;
font-weight: bold;
}
.tri{
margin:2rem 0;
}
.tri .tag{
border:1px solid var(--vertfonce);
color: var(--vertfonce);
background-color: var(--blanc);
padding:0.5rem 1.5rem;
flex: 1 1 auto;
}
.tri .tag:hover, .tri .tag.active{
background-color: var(--vert);
color: var(--blanc);
border-color:var(--vert);
}
.filterDiv{
display:none;
margin-top:0;
}
.filterDiv.show{
display:block;
}
.filterDiv a .ttl{
text-align:left;
font-weight: 500;
}
.filterDiv a .vignet{
background-color: var(--grisclair);
overflow: hidden;
position:relative;
}
.filterDiv a .vignet img{
position:absolute;
left:50%; top:50%;
-webkit-transform: translate(-50%, -50%);transform: translate(-50%, -50%);
-webkit-transition: all 0.2s ease; transition: all 0.2s ease;
width:100%; height: 100%;
object-fit: cover;
}
.filterDiv a:hover .vignet img{
-webkit-transform: translate(-50%, -50%) scale(1.1); transform: translate(-50%, -50%) scale(1.1);
}
@media screen and (min-width:800px){
}