/* ==================================================
   HERO
================================================== */

.accueil-hero{
    position:relative;
    width:100vw;
    margin-top:-40px;
    margin-left:calc(50% - 50vw);
    overflow:hidden;
}

.accueil-carousel{
    position:relative;
    width:100vw;
    height:calc(100vh - 70px);
    min-height:500px;
    overflow:hidden;
    background:#772faf;
}

/* Slides */

.accueil-slide{
    position:absolute;
    inset:0;
    z-index:1;
    display:block;
    overflow:hidden;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity .8s ease, visibility 0s linear .8s;
}

.accueil-slide.active{
    z-index:2;
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transition:opacity .8s ease;
}

/* Fond */

.accueil-slide-bg{
    position:absolute;
    inset:0;
    z-index:1;
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    transform:scale(1.05);
    will-change:transform;
}

.accueil-slide.active .accueil-slide-bg{
    animation:heroBackgroundDezoom 6s linear forwards;
}

@keyframes heroBackgroundDezoom{
    from{
        transform:scale(1.05);
    }

    to{
        transform:scale(1);
    }
}

/* Premier plan */

.accueil-slide-foreground{
    position:absolute;
    z-index:2;
    left:50%;
    display:block;
    width:auto;
    height:80%;
    max-width:none;
    max-height:none;
    object-fit:contain;
    pointer-events:none;
    will-change:margin-left;
}

.accueil-slide-foreground.pos-top{
    top:0;
    bottom:auto;
    margin-top:0;
    transform:translateX(-50%);
}

.accueil-slide-foreground.pos-center{
    top:50%;
    bottom:auto;
    transform:translate(-50%,-50%);
}

.accueil-slide-foreground.pos-bottom{
    top:auto;
    bottom:0;
    margin-bottom:0;
    transform:translateX(-50%);
}

/* Mouvement du premier plan */

.accueil-slide.active .move-left{
    animation:heroFloatLeftMobile 12s linear infinite;
}

.accueil-slide.active .move-right{
    animation:heroFloatRightMobile 12s linear infinite;
}

@keyframes heroFloatLeftMobile{
    0%,100%{ margin-left:20px; }
    25%,75%{ margin-left:0; }
    50%{ margin-left:-20px; }
}

@keyframes heroFloatRightMobile{
    0%,100%{ margin-left:-20px; }
    25%,75%{ margin-left:0; }
    50%{ margin-left:20px; }
}

/* Forme basse */

.accueil-hero-bottom{
    position:absolute;
    z-index:3;
    left:0;
    right:0;
    bottom:0;
    width:100%;
    height:300px;
    background:url("../img/hero-bot-bg.png") repeat-x center bottom;
    pointer-events:none;
}

/* Flèches */

.accueil-carousel-prev,
.accueil-carousel-next{
    position:absolute;
    z-index:10;
    top:50%;
    padding:0;
    border:0;
    background:none;
    color:#772faf;
    font-family:'Tovari Sans',sans-serif;
    font-size:50px;
    line-height:1;
    cursor:pointer;
    transform:translateY(-50%);
    transition:transform .2s ease,color .2s ease;
}

.accueil-carousel-prev{ left:20px; }
.accueil-carousel-next{ right:20px; }

.accueil-carousel-prev:hover{
    color:#36e983;
    transform:translateY(-50%) scale(1.2) rotate(-3deg);
}

.accueil-carousel-next:hover{
    color:#36e983;
    transform:translateY(-50%) scale(1.2) rotate(3deg);
}

/* Tablette */

@media(min-width:600px){

    .accueil-slide.active .move-left{
        animation-name:heroFloatLeftTablet;
    }

    .accueil-slide.active .move-right{
        animation-name:heroFloatRightTablet;
    }

    @keyframes heroFloatLeftTablet{
        0%,100%{ margin-left:35px; }
        25%,75%{ margin-left:0; }
        50%{ margin-left:-35px; }
    }

    @keyframes heroFloatRightTablet{
        0%,100%{ margin-left:-35px; }
        25%,75%{ margin-left:0; }
        50%{ margin-left:35px; }
    }
}

/* Desktop */

@media(min-width:1040px){

    .accueil-hero{
        margin-top:-60px;
    }

    .accueil-carousel{
        height:calc(100vh - 90px);
        min-height:650px;
        max-height:1000px;
    }

    .accueil-slide.active .move-left{
        animation-name:heroFloatLeftDesktop;
    }

    .accueil-slide.active .move-right{
        animation-name:heroFloatRightDesktop;
    }

    @keyframes heroFloatLeftDesktop{
        0%,100%{ margin-left:50px; }
        25%,75%{ margin-left:0; }
        50%{ margin-left:-50px; }
    }

    @keyframes heroFloatRightDesktop{
        0%,100%{ margin-left:-50px; }
        25%,75%{ margin-left:0; }
        50%{ margin-left:50px; }
    }

    .accueil-carousel-prev{ left:35px; }
    .accueil-carousel-next{ right:35px; }
}

.accueil-projets button, .accueil-carousel button { -webkit-tap-highlight-color:transparent; }