.slider{ position:relative; }
.slider::after{ 
    display:block; content:""; width:200px; height:10px; background-color: var(--bleu); position:absolute; left:10%; bottom:0; z-index:9;
    -webkit-transform: translateY(50%); transform: translateY(50%);
}
.slider .swiper{ height:40vh; background-color:var(--grisfonce); }
.slider .swiper-slide{ background-size:cover; background-repeat:no-repeat; background-position:center; position:relative; }
.slider .swiper-slide .accroche{ position:absolute; left:10%; bottom:1rem; font-size:8vw; font-weight:700; text-align:left; line-height:105%; text-shadow: 0 0 10px var(--ombre); z-index:2; color: var(--blanc); }
.slider .accroche .upline{ font-weight: 400; font-size:1rem; line-height:2rem; }
.slider .swiper-slide::after{
    content:""; display:block; position:absolute; left:0; bottom:0; width:100%; height:50%; z-index:1;
    background: -moz-linear-gradient(top,  rgba(0,0,0,0) 0%, rgba(0,0,0,.7) 100%);
    background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,.7) 100%);
    background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,.7) 100%); 
    mix-blend-mode: multiply;
}
.slider .swiper-pagination{ bottom:unset; top:1rem;}
.slider .swiper-pagination-bullet{ width:12px; height:12px; opacity:1; background-color:var(--blanc); }
.slider .swiper-pagination-bullet-active{ background: var(--rouge); }

.introduction{
    padding:2rem 0; text-align:left; line-height:150%;
}
.introduction .intro{ padding:0 10%; position:relative; }

.metiers{ background: var(--grisfonce) url(img/fd-metiers.jpg) no-repeat center / cover; padding:2rem 10%; position:relative; }
.metiers > .row{ position:relative; z-index:2; }
.metiers .filtre{ position:absolute; left:0; top:0; width:100%; height:100%; background-color:rgba(0,0,0,.6); z-index:1; }
.metiers h2{ font-weight:400; font-size:3.5rem; text-transform:uppercase; color: var(--blanc); }
.metiers a{display:block; color:var(--blanc); text-align:left;}
.metiers a .vignette{ background-color: var(--blanc); background-size:cover; background-repeat: no-repeat; background-position:center; border:1px solid var(--noir);}
.metiers a .titre{display:block; text-transform:uppercase; margin:1rem 0;}

.actualites{ padding:2rem 10%; text-align:left; }
.actualites h2{ font-size:3rem; text-transform:uppercase; margin:0 0 0.5em 0;}
.actualites img{ width:100%; height:auto; margin:1rem 0;}
.actualites .actu{ margin:1rem 0;}

.down{ display:none; }

@media screen and (orientation: landscape){
    .slider .swiper{ height:75vh}
    .slider .swiper-slide .accroche{ font-size:5vw; bottom:2rem; max-width:60%; }
    .metiers h2{ text-align:center; }
}
@media screen and (min-width:1280px){
    .introduction .intro{ padding:0 20% 3rem 20%; }
    .metiers a:hover{ -webkit-transform:scale(1.1); transform:scale(1.1); }
    .introduction .intro::before{
        content:""; display:block; width:1px; height:200px; position:absolute; left: 18.5%; top:0; background-color: var(--bleu);
        -webkit-transform:translateY(-30%); transform:translateY(-30%);
    }
    .introduction .intro::after{
        content:""; display: block; width:200px; height:10px; background-color: var(--bleu);  position:absolute; right:0; bottom:0;
        -webkit-transform:translateX(-200%); transform:translateX(-200%);
    }
    @-webkit-keyframes down{
        0%{ -webkit-transform:translateY(0) } 50%{ -webkit-transform:translateY(100%) } 100%{ -webkit-transform:translateY(0) }
    }
    @keyframes down{
        0%{ transform:translateY(0) } 50%{ transform:translateY(100%) } 100%{ transform:translateY(0) }
    }
    .down{
        display:block; position:absolute; right:10%; bottom:1rem; width:20px; height:40px; background: url(img/todown.svg) no-repeat center / cover; z-index:9;
        -webkit-animation-name: down; -webkit-animation-duration: 1s; -webkit-animation-fill-mode: both; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear;
        animation-name: down; animation-duration: 1s; animation-fill-mode: both; animation-iteration-count: infinite; animation-timing-function: linear;
        transition:all 0.2s ease; 
    }
    .down.passif{ opacity:0.25; -webkit-animation-name: none; animation-name: none; }
    .actualites{ padding:4rem 10%; }
}

@media screen and (min-width:1680px){
    .slider .swiper-pagination-bullet{ width:16px; height:16px;}
    .introduction{
        padding:4rem 0;
    }
    .introduction .intro{ padding:0 25% 3rem 25%; }
    .introduction .intro::before{ left: 22.5%; }
    .metiers{ padding:4rem 10%;}
}