/**
 * Slider d'accueil (ticket #22037)
 * Remplace Revolution Slider 5.1.4 : mêmes dimensions de grille (1240x630),
 * mêmes positions, tailles et couleurs de calques que l'ancien slider.
 */

#slider .tetra-hero {
    position: relative;
    width: 100%;
    overflow: hidden;
}

#slider .tetra-hero__slide {
    position: relative;
    width: 100%;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

/* Grille de référence de l'ancien slider : mise à l'échelle par js/hero.js */
#slider .tetra-hero__grid {
    position: relative;
    width: 1240px;
    height: 630px;
    transform-origin: top left;
}

#slider .tetra-hero__layer {
    position: absolute;
    font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif;
    margin: 0;
}

#slider .tetra-hero__surtitre {
    left: 100px;
    top: 230px;
    z-index: 5;
    white-space: nowrap;
    font-size: 14px;
    line-height: 22px;
    font-weight: 400;
    color: #000;
}

#slider .tetra-hero__marque {
    left: 148px;
    top: 230px;
    z-index: 6;
    white-space: nowrap;
    font-size: 14px;
    line-height: 22px;
    font-weight: 700;
    color: #2b78ee;
}

#slider .tetra-hero__barre {
    left: 63px;
    top: 261px;
    z-index: 7;
    width: 250px;
    height: 3px;
    background-color: #2b78ee;
}

#slider .tetra-hero__titre {
    left: 48px;
    top: 295px;
    z-index: 8;
    min-width: 437px;
    max-width: 437px;
    white-space: normal;
    font-size: 31px;
    line-height: 55px;
    font-weight: 700;
    color: #2b2b2b;
    background-color: #fff;
    padding: 0 10px;
}

#slider .tetra-hero__titre a {
    color: inherit;
    text-decoration: none;
}

#slider .tetra-hero__titre a:hover,
#slider .tetra-hero__titre a:focus {
    color: #2b78ee;
    text-decoration: none;
}

/* Animations d'entrée, reprises de l'ancien slider (départ à 500 ms) */
#slider .tetra-hero__slide.active .tetra-hero__surtitre,
#slider .tetra-hero__slide:only-child .tetra-hero__surtitre {
    animation: tetra-hero-bas 2s cubic-bezier(0.45, 0, 0.55, 1) 0.5s both;
}

#slider .tetra-hero__slide.active .tetra-hero__marque,
#slider .tetra-hero__slide:only-child .tetra-hero__marque {
    animation: tetra-hero-haut 1.5s cubic-bezier(0.65, 0, 0.35, 1) 0.5s both;
}

#slider .tetra-hero__slide.active .tetra-hero__barre,
#slider .tetra-hero__slide:only-child .tetra-hero__barre {
    animation: tetra-hero-bas 2s cubic-bezier(0.76, 0, 0.24, 1) 0.5s both;
}

#slider .tetra-hero__slide.active .tetra-hero__titre,
#slider .tetra-hero__slide:only-child .tetra-hero__titre {
    animation: tetra-hero-gauche 1.5s cubic-bezier(0.16, 1, 0.3, 1) 0.5s both;
}

@keyframes tetra-hero-bas {
    from { opacity: 0; transform: translateY(100%); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes tetra-hero-haut {
    from { transform: translateY(-100%); }
    to   { transform: translateY(0); }
}

@keyframes tetra-hero-gauche {
    from { transform: translateX(-175%); }
    to   { transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
    #slider .tetra-hero__layer {
        animation: none !important;
    }
}

/* Pastilles de navigation, visibles seulement s'il y a plusieurs slides */
#slider .tetra-hero .carousel-indicators {
    bottom: 15px;
    margin-bottom: 0;
}

#slider .tetra-hero .carousel-indicators li {
    border-color: #2b78ee;
}

#slider .tetra-hero .carousel-indicators .active {
    background-color: #2b78ee;
}