#menu-filtre-regions {
margin-bottom: 20px;
text-align: center;
}
#menu-filtre-regions .filtre {
padding: 10px 20px;
margin: 5px;
background-color: #8300E9;
border: 1px solid #8300E9;
color: white;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: background-color 0.3s;
border-radius: 50px;
}
#menu-filtre-regions .filtre:hover {
background-color: #BE6BFF;
}
@supports (display: grid) {
#grille-camps {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 28px;
max-width: 1610px;
margin: 0 auto;
}
}
@supports not (display: grid) {
#grille-camps {
display: flex;
flex-wrap: wrap; gap: 20px;
}
.camp-bloc {
flex: 1 1 250px; max-width: 100%; }
} .camp-bloc {
padding: 23px;
text-align: center;
cursor: pointer;
position: relative;
overflow: visible;
color: #434343;
font-size: 13px;
background-size: 100% 100%;
} .camp-bloc-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 0.3s ease-in-out;
z-index: 1;
font-size: 28px;
font-weight: 800;
color: white;
background-repeat: no-repeat;
background-size: 78%;
background-position: center;
} .camp-bloc:hover .camp-bloc-overlay {
opacity: 1;
}
.camp-bloc:hover .camp-bloc-image {
opacity: .2;
}
.camp-bloc-link {
display: block;
position: absolute;
top: 0;
width: 100%;
height: 100%;
}
.camp-bloc img {
max-width: 100%;
height: auto;
}
.camp-bloc-image {
position: relative;
width: 100%;
padding-top: 56.25%; overflow: hidden;
border-radius: 20px;
}
.camp-bloc-image img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.camp-bloc p {
margin: 10px;
padding: 0;
}
p.camp-bloc-title {
font-size: 23px;
font-weight: 500;
color: #FCED00;
font-weight: bold;
}
p.camp-bloc-region {
font-weight: 300;
font-size: 18px;
color:white;
}
@media all and (max-width: 1200px) {
#grille-camps {
grid-template-columns: repeat(3, 1fr);
}
#grille-camps::before {
left: 0;
}
#grille-camps::after {
display: none;
}		
}
@media all and (max-width: 980px) {
#grille-camps {
grid-template-columns: repeat(2, 1fr);
}
#grille-camps::before {
display: none;
}		
}
@media all and (max-width: 768px) {
}
@media all and (max-width: 590px) {
#grille-camps {
grid-template-columns: repeat(1, 1fr);
}
}