/*  SLICK CAROUSEL .......................................................... */

/*  BASE STYLES: slick.css */
    .slick-slider { position: relative; display: block; box-sizing: border-box; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-touch-callout: none; -khtml-user-select: none; -ms-touch-action: pan-y; touch-action: pan-y; -webkit-tap-highlight-color: transparent; }
    .slick-list {position: relative;display: block;overflow: hidden;margin: 0;padding: 0;}
    .slick-list:focus { outline: none; }
    .slick-list.dragging { cursor: pointer; cursor: hand; }
    .slick-slider .slick-track,
    .slick-slider .slick-list { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
    .slick-track {position: relative;top: 0px;left: 0;display: block;margin-left: auto;margin-right: auto;}
    .slick-track:before,
    .slick-track:after { display: table; content: ''; }
    .slick-track:after { clear: both; }
    .slick-loading .slick-track { visibility: hidden; }
    .slick-slide { display: none; float: left; height: 100%; min-height: 1px; }
    [dir='rtl'] .slick-slide { float: right; }
    .slick-slide img { display: block; }
    .slick-slide.slick-loading img { display: none; }
    .slick-slide.dragging img { pointer-events: none; }
    .slick-initialized .slick-slide { display: block; }
    .slick-loading .slick-slide { visibility: hidden; }
    .slick-vertical .slick-slide { display: block; height: auto; border: 1px solid transparent; }
    .slick-arrow.slick-hidden { display: none; }

    /* Dots */
    .slick-dots { position: absolute; bottom: -45px; display: block; width: 100%; padding: 0; list-style: none; text-align: center; }
    .slick-dots li { position: relative; display: inline-block; width: 20px; height: 20px; margin: 0 5px; padding: 0; cursor: pointer; }
    .slick-dots li button {font-size: 0;line-height: 0;display: block;width: 20px;height: 20px;padding: 5px;cursor: pointer;color: transparent;border: 0;outline: none;background: transparent;/* background: red; */}
    .slick-dots li button:hover,
    .slick-dots li button:focus { outline: none; }
    .slick-dots li button:hover:before,
    .slick-dots li button:focus:before { opacity: 1; }
    .slick-dots li button:before {position: absolute;font-size: 6px;line-height: 20px;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 10px;height: 10px;padding: 0;border-radius: 50%;content: ' ';opacity: 0.25;background-color: black;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;transition: opacity 0.3s ease-out;}
    .slick-dots li.slick-active button:before { opacity: .75; color: black; }


/*  USER STYLES ............................................................. */
    .slick-slider {user-select: text;}
    .slick-list.draggable {user-select: none; cursor: move;}
    


/*  HOME / MAIN BANNER
    Carousel principal. */
    :root{
        --carouselMB-bottom-padding: 2em;
    }

        @media (min-width: 125rem) {
            :root {--carouselMB-bottom-padding: 4em;}
        }

    .jsCarouselMB { }
    .jsCarouselMB__item,
    .jsCarouselMB .slick-list,
    .jsCarouselMB .slick-track {height: 100%;width: 100%;overflow: visible;}

    /* Slide de carousel */
    .iCarouselMB {position: relative;width: 100%;height: 100%;}
    .iCarouselMB__btn{
        position: absolute;
        z-index: 3;
        left: 50%;
        top: 100%;
        white-space: nowrap;
        opacity: 1;
        transition: opacity 1s, transform 1s;
        transition-delay: 1.3s;
        transform: translate(-50%, -50%);
    }

    /**
     * CTA & slider controls
     * Contenu fixe à côté des slides
    **/
    /* Slide de carousel */
    .iCarouselMB {position: relative;width: 100%;height: 100%;}
    .iCarouselMB__btn{
        position: absolute;
        z-index: 3;
        left: 50%;
        top: 100%;
        white-space: nowrap;
        opacity: 1;
        transition: opacity 1s, transform 1s;
        transition-delay: 1.3s;
        transform: translate(-50%, -50%);
    }
    .iCarouselMB__content{
        padding: 3em var(--width-wide-right) 0 var(--width-wide-left);
        z-index: 10;
        position: relative;
    }
    .iCarouselMB__img {transition:transform 1s, opacity 1s; }
    .willAnimate .iCarouselMB__img {transform: translateX(100%); }

    .iCarouselMB__title{
        transition: clip-path 1.5s;
        transition-delay: 0.8s;
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    }
    .willAnimate .iCarouselMB__title{
        clip-path: polygon(0 0, 0% 0, 0% 100%, 0 100%);
    }
    .iCarouselMB__content h2{
        text-transform: uppercase;
    }
    .iCarouselMB__content h2 span{
        display: block;
        -webkit-text-stroke-width: 2px;
        -webkit-text-stroke-color: var(--color-base-on-dark);
        padding-left: calc(var(--carouselMB-left-padding) - var(--width-wide-right));
    }
        .iCarouselMB__content h2 span.big{
            width: 100%;
            font-size: 9vw;
            text-align: justify;
            clip-path: polygon(0 0, 50% 0, 50% 100%, 0 100%);
        }
            .iCarouselMB__content h2 span.big.solid + .outlined{
                position: absolute;
                top: 0;
                left: 0;
                color: transparent;
                clip-path: polygon(50% 0, 100% 0, 100% 100%, 50% 100%);
            }
        .iCarouselMB__content h2 span:after{
            /* content: ""; */
            display: inline-block;
            width: 100%;
        }

        .iCarouselMB__content h2 span.big.noclip{
            clip-path: none;
        }
    @media (max-width: 991px){
        .iCarouselMB__content{
            padding-left: 0;
            padding-right: 0;
        }
        .iCarouselMB__title{
            margin-bottom: 2em;
        }
        .iCarouselMB__content h2 span{
            padding-left: 0;
            font-size: 0.7em;
        }
        .iCarouselMB__content h2 span.big{
            clip-path: none;
            font-size: 1em;
        }
        .iCarouselMB__content h2 span.big.solid + .outlined{
            display: none;
        }
    }
    .willAnimate .iCarouselMB__btn{
        opacity: 0;
        transform: translate(calc(-50% - 2vw), -50%);
    }
    .iCarouselMB__btn.btn--fixedSize{width: auto; min-width: 17em; padding-left: 3em; padding-right: 3em;}
    .iCarouselMB__img {position: absolute;z-index: 1;top: 0;bottom: 0;right: 0;width: 50%;overflow: hidden;padding-right: var(--width-wide-right);}
    .iCarouselMB__img img {width: 100%;height: 100%;object-fit: cover;position: relative;z-index: 1;}
    .iCarouselMB__imgUnder {background-color: var(--color-blue);position: absolute;z-index: 2;top: 0;bottom: 0;left: 0;right: 0;transform: scaleX(0);transform-origin: 100% 0%;}

        /* Ajuster la position de l'image sur desktop pour mieux voir la personne. */
        @media (min-width:992px) {
            .iCarouselMB__btn{
                top: 73vh;
                transform: none;
            }
            .iCarouselMB__img img {width: 130%;}
        }

        /* 1 col sur mobile. */
        @media (max-width:991px) {
            .iCarouselMB__img {position: relative;width: 100%;top: auto;bottom: auto;right: auto;height: 52vw;padding-right: 0;}
        }
    .iCarouselMB__thumbnails{
        width: 20%;
        margin: 0 3vw -.5em 0;
        align-self: flex-end;
    }
    .iCarouselMB__thumbnails .slick-track{
        width: 100% !important;
        cursor: pointer;
    }
    .iCarouselMB__thumb{
        padding: .5em;
        transition: border-color .5s ease;
        transition-delay: 0;
    }
        .iCarouselMB__thumb:not(:last-child){
            margin-bottom: 0;
        }
        .iCarouselMB__thumb.slick-current{
            border-color: var(--color-blue);
            transition-delay: .8s;
        }

    .jsCarouselMB__item{
        padding-bottom: var(--carouselMB-bottom-padding);
    }

    @media (max-width: 991px){
        .iCarouselMB__thumbnails{
            display: none;
        }
        .jsCarouselMB__item{
            padding-bottom: 0;
        }
    }

    /* Before initialized. */
    .jsCarouselMB > *:not(:first-child) {display:none;}
    .jsCarouselMB.slick-initialized {display:block;}

    /* KILL l'animation de slick entre les slides sur desktop puisque c'est un custom animation.
    Sync l'animation de opacity avec l'animation JS. */
    @media (min-width:992px) {
        .jsCarouselMB .slick-track {transition:none !important;}

        .jsCarouselMB__item {opacity: 0;visibility: hidden;transition:opacity 1s 0.4s !important;}
        .jsCarouselMB__item:first-child {opacity: 1; visibility: visible;}
        .jsCarouselMB.slick-initialized .jsCarouselMB__item {visibility: visible;}
    }