.uppercase{
text-transform: uppercase;
}
.heading{
z-index:2
}
.heading .inner{
min-height: 325px;
z-index:2
}
.heading::after{
content:"";
display:block;
width:100%;; height:6px;
background: linear-gradient(to left,  var(--bleufonce)  0% ,var(--vert) 100%);
position:absolute;
left:0; top:100%;
z-index:2
}
.heading .filtre{
background: linear-gradient(to right,  rgba(0,0,0,0.7)  0%,rgba(0,0,0,0.4) 25%, rgba(0,0,0,0) 50%);
position: absolute;
left:0;
top:0;
width:100%;
height:100%;
z-index:1;
mix-blend-mode: darken
}
.heading .ariane{
font-size: 0.7rem;
color: var(--blanc);
padding:1rem 0;
text-shadow: 0 0 2px rgb(0,0,0);
display: flex;
justify-content: end;
gap:0 1rem;
}
.heading .ariane > span{
background-color: rgba(0,0,0,.5);
padding:0.25rem 1rem;
border-radius:2rem;
}
.heading .ariane a{
color: var(--blanc)
}
.heading .h1{
font-weight: normal;
font-size:2.5rem;
position:absolute;
bottom:2rem;
color: var(--blanc);
}
@media screen and (min-width:1200px){
.heading .h1{
font-size:3.2rem;
max-width:60%
}
}
@media screen and (min-width:1680px){
.heading .h1{
max-width:50%
}
}
@media screen and (min-width:1920px){
}