/* --------------------------------------- */
/* ---------- MOBILE XS - 300px ---------- */
@media (min-width:1px) {

    /* mise en page */
    main {
        position: relative;
        padding-top: 3rem;
    }

    .bus-text-color {
        color:#87185D;
    }

    section ul {
        padding-left: 32px!important;
    }
    
    section li {
        font-family: 'Cabin', sans-serif;
        font-size: 16px;
    }

    /* section intro */
    .sec-intro-bus {
        position: relative;
        overflow: hidden;
        padding: 9rem 0rem 19rem 0rem;
        margin-bottom: 12rem;
    }

    #LOTTIE-welwot-bus {
        width: 100%;
        margin: auto;
        max-width: 34rem;
    }

    .hero-bulles-haut {
        position: absolute;
        top: 0px;
        width: 3000px;
        left: 50%;
        transform: translate(-50%, 0);
        -webkit-transform: translate(-50%, 0);
        background: rgb(255,255,255);
        background: linear-gradient(180deg, rgba(243,166,221,0.3981967787114846) 50%, rgba(255,255,255,0) 100%);
    }

    #LOTTIE-hero-haut-mob {
        margin: auto;
        width: 200vw;
        max-width: 800px;
    }

    #LOTTIE-hero-haut-tab {
        margin: auto;
        width: 155vw;
        max-width: 1450px;
    }

    #LOTTIE-hero-haut-desk {
        margin: auto;
        width: 160vw;
        max-width: 3000px;
    }

    .hero-bulles-bas {
        position: absolute;
        bottom: 0px;
        width: 3000px;
        left: 50%;
        transform: translate(-50%, 0);
        -webkit-transform: translate(-50%, 0);
        background: rgb(255,255,255);
        background: linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(243,166,221,0.3981967787114846) 30%, rgba(243,166,221,0.4009978991596639) 70%, rgba(255,255,255,0) 100%);
    }

    #LOTTIE-hero-bas-mob {
        margin: auto;
        width: 200vw;
        max-width: 800px;
    }
    
    #LOTTIE-hero-bas-tab {
        margin: auto;
        width: 130vw;
        max-width: 1450px;
    }

    #LOTTIE-hero-bas-desk {
        margin: auto;
        width: 115vw;
        max-width: 3000px;
    }



    /* info bus 01 */
    .sec-info-bus-01 {
        scroll-margin-top: 10rem;
    }

    .contenu-info-bus-01, .contenu-info-bus-02 {
        width: 85%;
        max-width: 95rem;
        margin:auto;
    }

    #LOTTIE-services-bus {
        width: 100%;
        max-width: 30rem;
        margin: 2.5rem auto;
    }

    #LOTTIE-boitier-bus {
        width: 100%;
        max-width: 35rem;
        margin: 2rem auto;
    }



    /* section cartes infos */
    .sec-infocartes-bus {
        padding: 12rem 0rem;
        overflow: hidden;
    }

    .contenu-infocartes {
        width: 85%;
        max-width: 95rem;
        margin:auto;
    }

    .card-bleu {
        background: #F7FBFF;
        background-repeat: no-repeat;
        background-position: left top,
                            right top,
                            left bottom,
                            right bottom;
        background-size: 3rem 3rem,
                        3rem 3rem,
                        3rem 3rem,
                        3rem 3rem;
        background-image:   url("data:image/svg+xml,%3C?xml version='1.0' encoding='utf-8'?%3E %3C!-- Generator: Adobe Illustrator 25.4.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E %3Csvg version='1.1' id='Calque_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 32.5 32.6' style='enable-background:new 0 0 32.5 32.6;' xml:space='preserve'%3E %3Cstyle type='text/css'%3E .st0%7Bfill:none;stroke:%232196F3;stroke-width:2;%7D .st1%7Bfill:none;stroke:%232196F3;stroke-width:1.5;%7D %3C/style%3E %3Cpolyline class='st0' points='1,32.7 1,1 32.5,1 '/%3E %3Cpolyline class='st1' points='7.8,26.2 7.8,7.9 26.1,7.9 '/%3E %3C/svg%3E"),
                            url("data:image/svg+xml,%3C?xml version='1.0' encoding='utf-8'?%3E %3C!-- Generator: Adobe Illustrator 25.4.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E %3Csvg version='1.1' id='Calque_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 32.5 32.6' style='enable-background:new 0 0 32.5 32.6;' xml:space='preserve'%3E %3Cstyle type='text/css'%3E .st0%7Bfill:none;stroke:%232196F3;stroke-width:2;%7D .st1%7Bfill:none;stroke:%232196F3;stroke-width:1.5;%7D %3C/style%3E %3Cpolyline class='st0' points='0,1 31.5,1 31.5,32.7 '/%3E %3Cpolyline class='st1' points='6.4,7.9 24.7,7.9 24.7,26.2 '/%3E %3C/svg%3E"),
                            url("data:image/svg+xml,%3C?xml version='1.0' encoding='utf-8'?%3E %3C!-- Generator: Adobe Illustrator 25.4.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E %3Csvg version='1.1' id='Calque_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 32.5 32.6' style='enable-background:new 0 0 32.5 32.6;' xml:space='preserve'%3E %3Cstyle type='text/css'%3E .st0%7Bfill:none;stroke:%232196F3;stroke-width:2;%7D .st1%7Bfill:none;stroke:%232196F3;stroke-width:1.5;%7D %3C/style%3E %3Cpolyline class='st0' points='32.5,31.7 1,31.7 1,0 '/%3E %3Cpolyline class='st1' points='26.1,24.8 7.8,24.8 7.8,6.5 '/%3E %3C/svg%3E"),
                            url("data:image/svg+xml,%3C?xml version='1.0' encoding='utf-8'?%3E %3C!-- Generator: Adobe Illustrator 25.4.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E %3Csvg version='1.1' id='Calque_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 32.5 32.6' style='enable-background:new 0 0 32.5 32.6;' xml:space='preserve'%3E %3Cstyle type='text/css'%3E .st0%7Bfill:none;stroke:%232196F3;stroke-width:2;%7D .st1%7Bfill:none;stroke:%232196F3;stroke-width:1.5;%7D %3C/style%3E %3Cpolyline class='st0' points='31.5,0 31.5,31.7 0,31.7 '/%3E %3Cpolyline class='st1' points='24.7,6.5 24.7,24.8 6.4,24.8 '/%3E %3C/svg%3E");
        padding: 1.5rem 1.5rem;
        height: 100%;
        max-width: 30rem;
        margin: auto;
        transition: transform 0.5s ease;
    }

    .card-bleu:hover {
        transform: scale(1.03);
    }

    .card-bleu h3 {
        text-align: center;
        font-size: 40px;
    }

    .col-card-mid {
        margin: 6rem 0rem;
    }



    /* blobs bleus */
    #blob-gauche01 {
        position: absolute;
        z-index: -10;
        width: 80%;
        top: -4rem;
        right: -4rem;
    }

    #blob-gauche02 {
        position: absolute;
        z-index: -10;
        width: 100%;
        bottom: -3rem;
        left: -5rem;
    }

    #blob-milieu01 {
        position: absolute;
        z-index: -10;
        display: none;
    }

    #blob-milieu02 {
        position: absolute;
        z-index: -10;
        width: 120%;
        bottom: -2rem;
        right: -6rem;
    }

    #blob-droite01 {
        position: absolute;
        z-index: -10;
        width: 100%;
        bottom: -3rem;
        right: 4rem;
    }



    /* transition */
    .sec-transition-bus {
        padding: 8rem 0rem;
        margin-bottom: 6rem;
        background-image: url("../images/welwot-bus/backmobile-transition-left.svg"), url("../images/welwot-bus/backmobile-transition-right.svg");
        background-size: 6rem, 6rem;
        background-position-x: 5%, 95%;
        background-position-y: 85%, 15%;
        background-repeat: no-repeat, no-repeat;
    }

    .sec-transition-bus .row {
        text-align: center;
        width: 90%;
        max-width: 30rem;
        margin: auto;
    }

    .sec-transition-bus h4, .sec-cta-bus h4 {
        font-size: 20px;
    }



    /* CTA fin de page */
    .sec-cta-bus {
        padding:12rem 0rem;
        background-image: url("../images/welwot-bus/backmobile-cta-right.svg"), url("../images/welwot-bus/backmobile-cta-left.svg");
        background-size: 6rem, 6rem;
        background-position-x: 95%, 5%;
        background-position-y: 78%, 22%;
        background-repeat: no-repeat, no-repeat;
    }

    .sec-cta-bus .row {
        text-align: center;
        width: 90%;
        max-width: 45rem;
        margin: auto;
    }

    .bouton-cta {
        height: 3.3rem;
        padding: 0rem 2.8rem;
        margin: auto;
        width: auto;
        border: none;
        border-radius: 3.3rem 0px;
        font-family: 'Teko', sans-serif;
        font-size: 24px;
        color: #fff;
        transition: all 0.2s ease-in-out, border 0s, color 0s;
        background: rgba(135,24,93,1);
        background: linear-gradient(90deg, rgba(135,24,93,1) 0%, rgba(104,11,66,1) 100%);
    }

    .bouton-cta:hover {
        border-radius: 0px 3.3rem;
        background: rgb(100,181,246);
        background: linear-gradient(90deg, rgba(100,181,246,1) 0%, rgba(33,150,243,1) 100%);
    }

    .lien-cta {
        width:fit-content;
        width: -moz-fit-content;
        margin:auto;
        border-radius: 3.3rem 0px;
    }

    .lien-cta:hover {
        border-radius: 0px 3.3rem;
    }

}



/* ----------------------------------------------- */
/* ---------- PETIT TABLETTE SM - 576px ---------- */
@media (min-width:576px) {

    /* section intro */
    .sec-intro-bus {
        padding: 10rem 0rem 20rem 0rem;
    }

    /* section cartes infos */
    #LOTTIE-welwot-bus {
        width: 34rem;
    }

    .card-bleu {
        padding: 2rem 3rem;
    }

    .lottie-card-bleu {
        max-width: 25rem;
        margin:auto;
        margin-bottom: 1rem;
    }



    /* blobs bleus */
    #blob-gauche01 {
        width: 60%;
        top: -4rem;
        right: -2rem;
    }

    #blob-gauche02 {
        width: 65%;
        bottom: -4rem;
        left: -5rem;
    }

    #blob-milieu01 {
        display: block;
        width: 60%;
        top: -3rem;
        right: -4rem;
    }

    #blob-milieu02 {
        width: 70%;
        bottom: -2rem;
        right: 14rem;
    }

    #blob-droite01 {
        width: 70%;
        bottom: -4rem;
        right: -5rem;
    }



    /* transition */
    .sec-transition-bus {
        background-position-x: 10%, 90%;
    }

    .sec-transition-bus .row {
        max-width: 35rem;
    }

    .sec-transition-bus h4 {
        font-size: 24px;
    }


}



/* ----------------------------------------- */
/* ---------- TABLETTE MD - 768px ---------- */
@media (min-width:768px) {

    /* intro MD */
    .sec-intro-bus {
        padding: 12rem 0rem 18rem 0rem;
    }

    .hero-bulles-haut {
        padding-bottom: 0rem;
    }

    .hero-bulles-bas {
        padding:2rem 0rem;
    }



    /* blobs bleus */
    #blob-gauche01 {
        width: 35%;
        top: -9vw;
        right: 7vw;
    }

    #blob-gauche02 {
        width: 40%;
        bottom: -6vw;
        left: 2vw;
    }

    #blob-milieu01 {
        width: 40%;
        top: -5vw;
        right: 3vw;
    }

    #blob-milieu02 {
        width: 55%;
        bottom: -6vw;
        right: 36vw;
    }

    #blob-droite01 {
        width: 50%;
        bottom: -9vw;
        right: 2vw;
    }


}



/* -------------------------------------- */
/* ---------- ECRAN LG - 992px ---------- */
@media (min-width:992px) {

    li {
        font-size: 18px;
    }

    /* section intro */
    .sec-intro-bus {
        padding: 14rem 0rem 20rem 0rem;
    }

    #LOTTIE-welwot-bus {
        width: 100%;
        max-width: 36rem;
    }

    #LOTTIE-hero-haut-tab {
        width: 130vw;
    }

    #LOTTIE-hero-bas-tab {
        width: 102vw;
    }

    /* transition */
    .sec-transition-bus .row {
        max-width: 50rem;
    }

    /* CTA bas de page */
    .sec-cta-bus .row {
        width: 70%;
        max-width: 75rem;
    }

    .sec-cta-bus {
        background-image: url("../images/welwot-bus/background-cta-left.svg"), url("../images/welwot-bus/background-cta-right.svg");
        background-size: 14rem, 13rem;
        background-position-x: 2%, 98%;
        background-position-y: 40%, 42%;
        background-repeat: no-repeat, no-repeat;
    }

}



/* -------------------------------------- */
/* ---------- ECRAN XL - 1200px ---------- */
@media (min-width:1200px) {

    #LOTTIE-services-bus {
        max-width: 40rem;
        margin: auto 0px auto auto;
    }

    #LOTTIE-boitier-bus {
        max-width: 45rem;
        margin: auto auto auto 0px;
    }

    .col-card-mid {
        margin: 0rem 3rem;
    }

    /* blobs bleus */
    #blob-gauche01 {
        width: 70%;
        top: -4vw;
        right: -3vw;
    }

    #blob-gauche02 {
        width: 60%;
        bottom: -4vw;
        left: -2vw;
    }

    #blob-milieu01 {
        width: 65%;
        top: -4vw;
        right: -2vw;
    }

    #blob-milieu02 {
        width: 75%;
        bottom: -4vw;
        right: 9vw;
    }

    #blob-droite01 {
        width: 75%;
        bottom: -5vw;
        right: -4vw;
    }

    /* transition */
    .sec-transition-bus {
        background-image: url("../images/welwot-bus/background-transition-left.svg"), url("../images/welwot-bus/background-transition-right.svg");
        background-size: 14rem, 13rem;
        background-position-x: 16%, 87%;
        background-position-y: 50%, 50%;
        background-repeat: no-repeat, no-repeat;
    }

    .sec-transition-bus .row {
        text-align: center;
        width: 60%;
        max-width: 75rem;
        margin: auto;
    }

}



/* ---------------------------------------------- */
/* ---------- ECRAN LARGE XXL - 1400px ---------- */
@media (min-width:1400px) {

    /* intro */
    .sec-intro-bus {
        padding: 14rem 0rem 20rem 0rem;
    }

    #LOTTIE-welwot-bus {
        max-width: 42rem;
        margin-right: 3rem;
    }

    .intro-texte {
        width: 45rem;
        margin: auto;
        margin-left: 2rem;
    }

    .hero-bulles-bas {
        padding: 0rem;
    }

    .titre-serrer {
        letter-spacing: -1px;
    }



    /* blobs bleus */
    #blob-gauche01 {
        width: 65%;
        top: -7rem;
        right: -1rem;
    }

    #blob-gauche02 {
        width: 85%;
        bottom: -3rem;
        left: -7rem;
    }

    #blob-milieu01 {
        width: 75%;
        top: -4rem;
        right: 2rem;
    }

    #blob-milieu02 {
        width: 95%;
        bottom: -2rem;
        right: -2rem;
    }

    #blob-droite01 {
        width: 90%;
        top: -7rem;
        right: -8rem;
    }



    /* CTA bas de page */
    .sec-cta-bus {
        max-width: 110rem;
    }

    .sec-cta-bus h4 {
        font-size: 24px;
    }


}



/* ---------------------------------------------- */
/* ---------- CAS PARTICULIER XXL - 2200px ---------- */
@media (min-width:2200px) {

    .hero-bulles-haut, .hero-bulles-bas {
        width: 200vw;
    }

    .sec-intro-bus {
        padding: 17rem 0rem 27rem 0rem;
    }

    /* transition */
    .sec-transition-bus {
        max-width: 115rem;
    }

}