.home .content{
padding-bottom:0;
}
.bandeau{
height:30vh;
overflow: hidden;
position:relative;
}
.bandeau img{
position:absolute;
left:50%; top:50%;
-webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);
width:100%; height: 100%;
object-fit: cover;
}
.domaines{
margin-bottom: 3vw;
position:relative;
}
.domaines .vignet{
margin-bottom: 0.5rem;
}
.domaines a{
color: var(--noir);
}
.domaines a:hover{
color: var(--bleu);
}
.domaines .ttl{
font-weight: 600;
line-height:1.1;
margin-bottom:1rem;
}
@media screen and (orientation: landscape){
.bandeau{
height:60vh;
}
}
@media screen and (min-width: 992px){
.bandeau::before{
content:"";
display:block;
background-color: var(--blanc);
width: 15vw; height: 15vw;
position:absolute;
right:0; top:0;
-webkit-clip-path: polygon(0 0, 100% 100%, 100% 0);
clip-path: polygon(0 0, 100% 100%, 100% 0);
z-index:2;
}
.bandeau::after{
content:"";
display:block;
background-color: var(--fondpage);
width: 6vw; height: 6vw;
position:absolute;
left:0; bottom:-1px;
-webkit-clip-path: polygon(0 0, 100% 100%, 0 100%);
clip-path: polygon(0 0, 100% 100%, 0 100%);
}
.bloc-domaines::before{
content:"";
display:block;
background-color: var(--grisclair);
width: 8vw; height: 8vw;
position:absolute;
right:0; top:0;
-webkit-transform: translateY(-100%); transform: translateY(-100%);
-webkit-clip-path: polygon(100% 0, 0% 100%, 100% 100%);
clip-path: polygon(100% 0, 0% 100%, 100% 100%);
z-index:2;
}
.domaines .vignet{
margin-bottom: 1rem;
}
}
@media screen and (min-width: 1200px){
.domaines .ttl{
font-size:1.25rem;;
}
}