@import "../fonts.css";
@import "../vars.css";
@import "../commom.css";


/* -------------------------------------------------------------------------- */
    /* INDEX */
/* -------------------------------------------------------------------------- */

.blocTopHome {height: 100vh;position: relative;overflow: hidden;padding: 0;background:#FFF;z-index: 1;}

.splideIntro{height:calc(100vh - 176px);overflow: hidden;position:relative;}

.splideIntro li img{object-fit: cover;-o-object-fit: cover;width: 100%;height: 100%;}
.splideIntro .accroche {position: absolute;top: 75%;transform: translateY(-75%);color:#FFFFFF;padding:0 6%;}
.splideIntro .accroche .titre{font-size: 95px;line-height: 0.96;}
.splideIntro .accroche .sousTitre{font-size:35px;line-height:1;padding-top:0.5rem;font-weight:300;}

.loader {width: 100%;height:100vh;background: #FE4438;z-index: 1000;display: flex;position: fixed;align-content:center;transition: all 0.8s ease-in-out;transform-origin:top;}
.loader.done {transform:scaleY(0);transition: all 0.5s ease-in-out;-webkit-transition: -webkit-transform 1s ease-in-out;}
.loader img {align-self: center;margin: auto;opacity:1;transition: opacity 0.5s linear 1s;}
.loader img.masque{opacity:0;transition:opacity 0.5s linear;}
.filtre {position: absolute; height: 100%; width: 100%; max-width: 900px; top: 0; left: 0; background: linear-gradient(.25turn ,rgba(0, 0, 0,0.8), rgba(0,0,0,0));}

.splideIntro .splide__pagination__page{border:1px solid #FFF;background:transparent;height:14px;width:14px;opacity:1;}
.splideIntro .splide__pagination__page.is-active{transform:scale(1);background:#FFF;}
.splideIntro .splide__pagination{top: 83%;transform: translateY(-85%);left: unset;right: 6.5%;height: 14px;padding: 0;}
.textIntro{background-color:#EEE9E9;padding:1.5rem 6%;min-height:176px}
.splide__slide{overflow:hidden;}
/*
.splide__slide img{transform: translate3d(24%,0,0) scale3d(1.2,1.2,1.2);transition: none;}
.splide__slide.is-active img{transform: translateZ(0) scaleX(1);transition: transform 1.3s cubic-bezier(0,.68,.62,.99),-webkit-transform 1.3s cubic-bezier(0,.68,.62,.99);transform-origin: center left;}
.splide__slide.is-prev img,
.splide__slide.is-next img {transform: translate3d(-30%,0,0) scaleX(1);transition: transform .8s cubic-bezier(.39,.11,.15,1.01),-webkit-transform .8s cubic-bezier(.39,.11,.15,1.01);}
*/
.splideIntro .splide__slide img{transform: scale3d(1.1,1.1,1);transition: none;transform-origin: center center;}
.splideIntro .splide__slide.is-active img{transform:scaleX(1);transition: transform 1.3s,-webkit-transform 1.3s ;transform-origin: center center;}
.splideIntro .splide__slide.is-prev img,
.splideIntro .splide__slide.is-next img {transform: scale3d(1.1,1.1,1.1);transition: transform 1.3s ,-webkit-transform 1.3s ;transform-origin: center center;}


.splide__slide.is-active .accroche .titre{
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    opacity: 1;
    -webkit-transition: opacity .5s ease-out .9s,-webkit-transform .5s cubic-bezier(0,.68,.62,.99) .9s;
    -o-transition: transform .5s cubic-bezier(0,.68,.62,.99) .9s,opacity .5s ease-out .9s;
    transition: transform .5s cubic-bezier(0,.68,.62,.99) .9s,opacity .5s ease-out .9s;
    transition: transform .5s cubic-bezier(0,.68,.62,.99) .9s,opacity .5s ease-out .9s,-webkit-transform .5s cubic-bezier(0,.68,.62,.99) .9s;}
.splide__slide.is-active .accroche .sousTitre {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    opacity: 1;
    -webkit-transition: opacity .5s ease-out 1.1s,-webkit-transform .5s cubic-bezier(0,.68,.62,.99) 1.1s;
    -o-transition: transform .5s cubic-bezier(0,.68,.62,.99) 1.1s,opacity .5s ease-out 1.1s;
    transition: transform .5s cubic-bezier(0,.68,.62,.99) 1.1s,opacity .5s ease-out 1.1s;
    transition: transform .5s cubic-bezier(0,.68,.62,.99) 1.1s,opacity .5s ease-out 1.1s,-webkit-transform .5s cubic-bezier(0,.68,.62,.99) 1.1s;}

.splide__slide.is-prev .accroche .titre,
.splide__slide.is-next .accroche .sousTitre {
    -webkit-transform: translate3d(-40px,0,0);
    transform: translate3d(-40px,0,0);
    opacity: 0;
    -webkit-transition: opacity .3s ease-out 0s,-webkit-transform .3s ease-out 0s;
    -o-transition: transform .3s ease-out 0s,opacity .3s ease-out 0s;
    transition: transform .3s ease-out 0s,opacity .3s ease-out 0s;
    transition: transform .3s ease-out 0s,opacity .3s ease-out 0s,-webkit-transform .3s ease-out 0s;
}

.splide__slide .accroche .titre, .splide__slide .accroche .sousTitre  {
    -webkit-transform: translate3d(-40px,0,0);
    transform: translate3d(-40px,0,0);
    will-change: transform;
    opacity: 0;
    -webkit-transition: none;
    -o-transition: none;
    transition: none;
    }


.textIntro h1, .textIntro p{color:var(--red);font-weight:300;font-size:2.1875rem;line-height:1.21;display:inline;}

.blocRefUne{background:#FFF;padding:50px 6% 0;position:relative;z-index: 1;}
.blocRefUne h2{font-weight:600;font-size:28px;line-height:1;color:var(--red);}
.blocRefUne ul {list-style:none;padding: 0;}
.blocRefUne ul li {position:relative;}
.blocRefUne ul li .picture{position:relative;overflow:hidden;width: 100%;aspect-ratio: 14/6;}
.blocRefUne ul li .picture .bgPict{background-color:var(--red);opacity: 0;    position: absolute;    top: 400px;    left: 0;    z-index: 2;    width: 100%;    height: 100%;    display: block;    -webkit-transition: opacity .6s ease-out .5s;    -o-transition: opacity .6s ease-out .5s;    transition: opacity .6s ease-out .5s;    will-change: opacity;    -webkit-backface-visibility: hidden;    backface-visibility: hidden;  }
.blocRefUne ul li .picture img{position:absolute;width:100%;height:100%;object-fit:cover;-o-object-fit:cover;-webkit-transform: scaleX(1);
    transform: scaleX(1);
    -webkit-transition: -webkit-transform .3s ease-in-out;
    -o-transition: transform .3s ease-in-out;
    transition: transform .3s ease-in-out;
    transition: transform .3s ease-in-out,-webkit-transform .3s ease-in-out;
    will-change: transform;z-index:3;top: 400px;
    opacity: 0;}
.blocRefUne ul li .picture.visible .bgPict{opacity:1;top: 0px;transition:all .3s ease-out}
.blocRefUne ul li .picture.visible img{opacity:1;top:0;transition:opacity 1s ease-out .5s, top .3s ease-in-out;/*transition:all .8s cubic-bezier(.17,.67,.47,.97)*/}
.blocRefUne ul li .picture img:hover{-webkit-transform: scale3d(1.05,1.05,1.05);
    transform: scale3d(1.05,1.05,1.05);
    -webkit-transition: -webkit-transform .4s cubic-bezier(.23,1,.32,1) 0s;
    -o-transition: transform .4s cubic-bezier(.23,1,.32,1) 0s;
    transition: transform .4s cubic-bezier(.23,1,.32,1) 0s;
    transition: transform .4s cubic-bezier(.23,1,.32,1) 0s,-webkit-transform .4s cubic-bezier(.23,1,.32,1) 0s;}
.blocRefUne ul li .nomClient{position:relative;}
.blocRefUne ul li .nomClient p:nth-child(1){color:var(--red);font-weight:700;font-size:20px;text-transform:uppercase;}
.blocRefUne ul li .nomClient p:nth-child(2){font-weight:300;font-size:20px;}
.blocLien{padding:1rem 6% 6rem ;background: var(--white);position:relative;z-index: 1;}
.blocLien .lienFleche{position:relative;color:var(--red);font-size:var(--font25);font-weight:700;line-height:1;padding: 2rem 75px 2rem 0;background-image:url('https://www.red-agency.fr/template/site/img/redArrowRight-57.png'); background-repeat:no-repeat;background-position:center right; background-size:55px 50px;}
.blocLogos {padding:3rem 6% 4rem ;background:#E9E9E9;position:relative;z-index: 1;}
.blocLogos h2{text-align:center;font-size:40px;font-weight:600;color:var(--red);text-transform:uppercase;}
.blocLogos .splideLogos{margin-top:2.5rem;}
.blocLogos .c_logo{width: 171px;height:140px;margin: 0.5rem auto 1.5rem;}
.blocLogos .c_logo img {max-width:100%;max-height:100%;margin:auto;}
.blocLogos .nom{color:var(--red);font-size:15px;font-weight:400;text-align:center;text-transform: uppercase; line-height: 1.04;}


/* Écran 15', 16' et 17' */
@media screen and (min-device-width: 1200px) and (max-device-width: 1800px) and (-webkit-min-device-pixel-ratio: 1){

}

@media screen and (min-device-width: 1200px) and (max-device-width: 1400px) and (-webkit-min-device-pixel-ratio: 1){

}

/* Écran 13 pouces ou HDPI */
/* @media screen and (min-device-width: 992px) and (max-device-width: 1440px){ */
@media screen and (min-device-width: 992px) and (max-device-width: 1280px){


}

/* Smartphone Portrait / Paysage & Tablette Portrait */
@media(max-width: 810px){

    .splideIntro{height:calc(100vh - 195px)}
    .splideIntro .accroche .titre{font-size:42px;}
    .splideIntro .accroche .sousTitre{font-size:20px;}
    .textIntro{min-height:145px;padding:1.5rem 8%;}
    .textIntro h1, .textIntro p{font-size:20px;line-height:1.1;}


    .splideIntro .splide__pagination{top:78%;right:8%;}

    .blocRefUne{padding-top:1.5rem;}
    .blocRefUne h2{font-size:18px}
    .blocRefUne ul{margin-bottom:0;}
    .blocRefUne ul li .nomClient p:nth-child(1),
    .blocRefUne ul li .nomClient p:nth-child(2){font-size:12px;}
    .blocLien{padding: 1rem 6% 1.5rem;}
    .blocLien .lienFleche{font-size:12px;background-size:21px 18px;padding-right:31px;}
    .blocLogos h2{font-size:18px;}

    .blocLogos .splideLogos{margin-top:1.5rem;}
    .blocLogos .c_logo{width:100px;height:80px;margin: 0.5rem auto}
    .blocLogos .nom{font-size:12px;}

    .blocLogos .red-arrow {opacity:1;background-color:unset;width:45px;height:39px;}
    .blocLogos .red-arrow svg{display:none;}
    .blocLogos .red-prev{background : url('https://www.red-agency.fr/template/site/img/arrow-red-prev.svg')}
    .blocLogos .red-next{background : url('https://www.red-agency.fr/template/site/img/arrow-red-next.svg')}
}

/* Petit Smartphone  */
@media(max-width: 430px){

}