/* -------------
    SOMMAIRE
------------- */

/*
    @AUTHOR : Nicolas BOUDOT

    PROPRIÉTÉ : POSITION
    Styles liés à la propriété position
*/

/*
    01 - XS
        Position
        Valeurs
            Top
                Base
                Pourcent
                Vh
                Vw
                Pixels
            Right
            Bottom
            Left
        Z-index
    02 - SM
    03 - MD
    04 - LG
    05 - XL
    06 - XXL
*/



/* ---------------------
    01 - XS
        Position
--------------------- */

.p-absolute,
.position-absolute {
    position: absolute;
}

.p-fixed,
.position-fixed {
    position: fixed;
}

.p-relative,
.position-relative {
    position: relative;
}

.p-static,
.position-static {
    position: static;
}

.p-sticky,
.position-sticky {
    position: sticky;
}



/* ---------------------
    01 - XS
        Valeurs
            Inset
--------------------- */

.i-0 {
    inset: 0;
}



/* ---------------------
    01 - XS
        Valeurs
            Top
                Base
--------------------- */

.t-0 {
    top: 0;
}

.t-auto {
    top: auto;
}



/* ---------------------
    01 - XS
        Valeurs
            Top
                Pourcent
--------------------- */

.t-50 {
    top: 50%;
}

    .t-n50 {
        top: -50%;
    }

.t-100 {
    top: 100%;
}

    .t-n100 {
        top: -100%;
    }



/* ---------------------
    01 - XS
        Valeurs
            Top
                Vh
--------------------- */

.t-50vh {
    top: 50vh;
}

    .t-n50vh {
        top: -50vh;
    }

.t-100vh {
    top: 100vh;
}

    .t-n100vh {
        top: -100vh;
    }



/* ---------------------
    01 - XS
        Valeurs
            Top
                Pixels
--------------------- */

.t-3px {
    top: 3px;
}

    .t-n3px {
        top: -3px;
    }

.t-5px {
    top: 5px;
}

    .t-n5px {
        top: -5px;
    }

.t-8px {
    top: 8px;
}

    .t-n8px {
        top: -8px;
    }

.t-10px {
    top: 10px;
}

    .t-n10px {
        top: -10px;
    }

.t-15px {
    top: 15px;
}

    .t-n15px {
        top: -15px;
    }

.t-30px {
    top: 30px;
}

    .t-n30px {
        top: -30px;
    }

.t-40px {
    top: 40px;
}

    .t-n40px {
        top: -40px;
    }

.t-50px {
    top: 50px;
}

    .t-n50px {
        top: -50px;
    }

.t-60px {
    top: 60px;
}

    .t-n60px {
        top: -60px;
    }

.t-70px {
    top: 70px;
}

    .t-n70px {
        top: -70px;
    }

.t-80px {
    top: 80px;
}

    .t-n80px {
        top: -80px;
    }

.t-90px {
    top: 90px;
}

    .t-n90px {
        top: -90px;
    }

.t-100px {
    top: 100px;
}

    .t-n100px {
        top: -100px;
    }



/* ---------------------
    01 - XS
        Valeurs
            Right
                Base
--------------------- */

.r-0 {
    right: 0;
}

.r-auto {
    right: auto;
}



/* ---------------------
    01 - XS
        Valeurs
            Right
                Pourcent
--------------------- */

.r-50 {
    right: 50%;
}

    .r-n50 {
        right: -50%;
    }

.r-100 {
    right: 100%;
}

    .r-n100 {
        right: -100%;
    }



/* ---------------------
    01 - XS
        Valeurs
            Right
                Vw
--------------------- */

.r-50vw {
    right: 50vw;
}

    .r-n50vw {
        right: -50vw;
    }

.r-100vw {
    right: 100vw;
}

    .r-n100vw {
        right: -100vw;
    }


/* ---------------------
    01 - XS
        Valeurs
            Right
                Pixels
--------------------- */


.r-3px {
    right: 3px;
}

    .r-n3px {
        right: -3px;
    }

.r-5px {
    right: 5px;
}

    .r-n5px {
        right: -5px;
    }

.r-8px {
    right: 8px;
}

    .r-n8px {
        right: -8px;
    }

.r-10px {
    right: 10px;
}

    .r-n10px {
        right: -10px;
    }

.r-15px {
    right: 15px;
}

    .r-n15px {
        right: -15px;
    }

.r-30px {
    right: 30px;
}

    .r-n30px {
        right: -30px;
    }

.r-40px {
    right: 40px;
}

    .r-n40px {
        right: -40px;
    }

.r-50px {
    right: 50px;
}

    .r-n50px {
        right: -50px;
    }

.r-60px {
    right: 60px;
}

    .r-n60px {
        right: -60px;
    }

.r-70px {
    right: 70px;
}

    .r-n70px {
        right: -70px;
    }

.r-80px {
    right: 80px;
}

    .r-n80px {
        right: -80px;
    }

.r-90px {
    right: 90px;
}

    .r-n90px {
        right: -90px;
    }

.r-100px {
    right: 100px;
}

    .r-n100px {
        right: -100px;
    }



/* ---------------------
    01 - XS
        Valeurs
            Bottom
                Base
--------------------- */

.b-0 {
    bottom: 0;
}

.b-auto {
    bottom: auto;
}



/* ---------------------
    01 - XS
        Valeurs
            Bottom
                Pourcent
--------------------- */

.b-50 {
    bottom: 50%;
}

    .b-n50 {
        bottom: -50%;
    }

.b-100 {
    bottom: 100%;
}

    .b-n100 {
        bottom: -100%;
    }



/* ---------------------
    01 - XS
        Valeurs
            Bottom
                Vh
--------------------- */

.b-50vh {
    bottom: 50vh;
}

    .b-n50vh {
        bottom: -50vh;
    }

.b-100vh {
    bottom: 100vh;
}

    .b-n100vh {
        bottom: -100vh;
    }


/* ---------------------
    01 - XS
        Valeurs
            Bottom
                Pixels
--------------------- */


.b-3px {
    bottom: 3px;
}

    .b-n3px {
        bottom: -3px;
    }

.b-5px {
    bottom: 5px;
}

    .b-n5px {
        bottom: -5px;
    }

.b-8px {
    bottom: 8px;
}

    .b-n8px {
        bottom: -8px;
    }

.b-10px {
    bottom: 10px;
}

    .b-n10px {
        bottom: -10px;
    }

.b-15px {
    bottom: 15px;
}

    .b-n15px {
        bottom: -15px;
    }

.b-30px {
    bottom: 30px;
}

    .b-n30px {
        bottom: -30px;
    }

.b-40px {
    bottom: 40px;
}

    .b-n40px {
        bottom: -40px;
    }

.b-50px {
    bottom: 50px;
}

    .b-n50px {
        bottom: -50px;
    }

.b-60px {
    bottom: 60px;
}

    .b-n60px {
        bottom: -60px;
    }

.b-70px {
    bottom: 70px;
}

    .b-n70px {
        bottom: -70px;
    }

.b-80px {
    bottom: 80px;
}

    .b-n80px {
        bottom: -80px;
    }

.b-90px {
    bottom: 90px;
}

    .b-n90px {
        bottom: -90px;
    }

.b-100px {
    bottom: 100px;
}

    .b-n100px {
        bottom: -100px;
    }



/* ---------------------
    01 - XS
        Valeurs
            Left
                Base
--------------------- */

.l-0 {
    left: 0;
}

.l-auto {
    left: auto;
}



/* ---------------------
    01 - XS
        Valeurs
            Left
                Pourcent
--------------------- */

.l-50 {
    left: 50%;
}

    .l-n50 {
        left: -50%;
    }

.l-100 {
    left: 100%;
}

    .l-n100 {
        left: -100%;
    }



/* ---------------------
    01 - XS
        Valeurs
            Left
                Vw
--------------------- */

.l-50vw {
    left: 50vw;
}

    .l-n50vw {
        left: -50vw;
    }

.l-100vw {
    left: 100vw;
}

    .l-n100vw {
        left: -100vw;
    }


/* ---------------------
    01 - XS
        Valeurs
            Left
                Pixels
--------------------- */


.l-3px {
    left: 3px;
}

    .l-n3px {
        left: -3px;
    }

.l-5px {
    left: 5px;
}

    .l-n5px {
        left: -5px;
    }

.l-8px {
    left: 8px;
}

    .l-n8px {
        left: -8px;
    }

.l-10px {
    left: 10px;
}

    .l-n10px {
        left: -10px;
    }

.l-15px {
    left: 15px;
}

    .l-n15px {
        left: -15px;
    }

.l-30px {
    left: 30px;
}

    .l-n30px {
        left: -30px;
    }

.l-40px {
    left: 40px;
}

    .l-n40px {
        left: -40px;
    }

.l-50px {
    left: 50px;
}

    .l-n50px {
        left: -50px;
    }

.l-60px {
    left: 60px;
}

    .l-n60px {
        left: -60px;
    }

.l-70px {
    left: 70px;
}

    .l-n70px {
        left: -70px;
    }

.l-80px {
    left: 80px;
}

    .l-n80px {
        left: -80px;
    }

.l-90px {
    left: 90px;
}

    .l-n90px {
        left: -90px;
    }

.l-100px {
    left: 100px;
}

    .l-n100px {
        left: -100px;
    }

    /* Spécifique : Pour masquer un élément hors de la vue mais l'avoir dans le DOM pour le SEO */
    .l-n10000px {
        left: -10000px;
    }



/* ---------------------
    01 - XS
        Z-index
--------------------- */

.z-0 {
    z-index: 0;
}

.z-1 {
    z-index: 1;
}

    .z-n1 {
        z-index: -1;
    }



/* ---------------------
    02 - SM
        Position
--------------------- */

@media (min-width: 576px) {
    .p-sm-absolute {
        position: absolute;
    }

    .p-sm-fixed {
        position: fixed;
    }

    .p-sm-relative {
        position: relative;
    }

    .p-sm-static {
        position: static;
    }

    .p-sm-sticky {
        position: sticky;
    }
}



/* ---------------------
    02 - SM
        Valeurs
            Inset
--------------------- */

@media (min-width: 576px) {
    .i-sm-0 {
        inset: 0;
    }
}


/* ---------------------
    02 - SM
        Valeurs
            Top
                Base
--------------------- */

@media (min-width: 576px) {
    .t-sm-0 {
        top: 0;
    }

    .t-sm-auto {
        top: auto;
    }
}



/* ---------------------
    02 - SM
        Valeurs
            Top
                Pourcent
--------------------- */

@media (min-width: 576px) {
    .t-sm-50 {
        top: 50%;
    }

        .t-sm-n50 {
            top: -50%;
        }

    .t-sm-100 {
        top: 100%;
    }

        .t-sm-n100 {
            top: -100%;
        }
}


/* ---------------------
    02 - SM
        Valeurs
            Top
                Vh
--------------------- */

@media (min-width: 576px) {
    .t-sm-50vh {
        top: 50vh;
    }

        .t-sm-n50vh {
            top: -50vh;
        }

    .t-sm-100vh {
        top: 100vh;
    }

        .t-sm-n100vh {
            top: -100vh;
        }
}



/* ---------------------
    02 - SM
        Valeurs
            Top
                Pixels
--------------------- */

@media (min-width: 576px) {
    .t-sm-3px {
        top: 3px;
    }

        .t-sm-n3px {
            top: -3px;
        }

    .t-sm-5px {
        top: 5px;
    }

        .t-sm-n5px {
            top: -5px;
        }

    .t-sm-8px {
        top: 8px;
    }

        .t-sm-n8px {
            top: -8px;
        }

    .t-sm-10px {
        top: 10px;
    }

        .t-sm-n10px {
            top: -10px;
        }

    .t-sm-15px {
        top: 15px;
    }

        .t-sm-n15px {
            top: -15px;
        }

    .t-sm-30px {
        top: 30px;
    }

        .t-sm-n30px {
            top: -30px;
        }

    .t-sm-40px {
        top: 40px;
    }

        .t-sm-n40px {
            top: -40px;
        }

    .t-sm-50px {
        top: 50px;
    }

        .t-sm-n50px {
            top: -50px;
        }

    .t-sm-60px {
        top: 60px;
    }

        .t-sm-n60px {
            top: -60px;
        }

    .t-sm-70px {
        top: 70px;
    }

        .t-sm-n70px {
            top: -70px;
        }

    .t-sm-80px {
        top: 80px;
    }

        .t-sm-n80px {
            top: -80px;
        }

    .t-sm-90px {
        top: 90px;
    }

        .t-sm-n90px {
            top: -90px;
        }

    .t-sm-100px {
        top: 100px;
    }

        .t-sm-n100px {
            top: -100px;
        }
}



/* ---------------------
    02 - SM
        Valeurs
            Right
                Base
--------------------- */

@media (min-width: 576px) {
    .r-sm-0 {
        right: 0;
    }

    .r-sm-auto {
        right: auto;
    }
}



/* ---------------------
    02 - SM
        Valeurs
            Right
                Pourcent
--------------------- */

@media (min-width: 576px) {
    .r-sm-50 {
        right: 50%;
    }

        .r-sm-n50 {
            right: -50%;
        }

    .r-sm-100 {
        right: 100%;
    }

        .r-sm-n100 {
            right: -100%;
        }
}



/* ---------------------
    02 - SM
        Valeurs
            Right
                Vw
--------------------- */

@media (min-width: 576px) {
    .r-sm-50vw {
        right: 50vw;
    }

        .r-sm-n50vw {
            right: -50vw;
        }

    .r-sm-100vw {
        right: 100vw;
    }

        .r-sm-n100vw {
            right: -100vw;
        }
}


/* ---------------------
    02 - SM
        Valeurs
            Right
                Pixels
--------------------- */

@media (min-width: 576px) {
    .r-sm-3px {
        right: 3px;
    }

        .r-sm-n3px {
            right: -3px;
        }

    .r-sm-5px {
        right: 5px;
    }

        .r-sm-n5px {
            right: -5px;
        }

    .r-sm-8px {
        right: 8px;
    }

        .r-sm-n8px {
            right: -8px;
        }

    .r-sm-10px {
        right: 10px;
    }

        .r-sm-n10px {
            right: -10px;
        }

    .r-sm-15px {
        right: 15px;
    }

        .r-sm-n15px {
            right: -15px;
        }

    .r-sm-30px {
        right: 30px;
    }

        .r-sm-n30px {
            right: -30px;
        }

    .r-sm-40px {
        right: 40px;
    }

        .r-sm-n40px {
            right: -40px;
        }

    .r-sm-50px {
        right: 50px;
    }

        .r-sm-n50px {
            right: -50px;
        }

    .r-sm-60px {
        right: 60px;
    }

        .r-sm-n60px {
            right: -60px;
        }

    .r-sm-70px {
        right: 70px;
    }

        .r-sm-n70px {
            right: -70px;
        }

    .r-sm-80px {
        right: 80px;
    }

        .r-sm-n80px {
            right: -80px;
        }

    .r-sm-90px {
        right: 90px;
    }

        .r-sm-n90px {
            right: -90px;
        }

    .r-sm-100px {
        right: 100px;
    }

        .r-sm-n100px {
            right: -100px;
        }
}



/* ---------------------
    02 - SM
        Valeurs
            Bottom
                Base
--------------------- */

@media (min-width: 576px) {
    .b-sm-0 {
        bottom: 0;
    }

    .b-sm-auto {
        bottom: auto;
    }
}



/* ---------------------
    02 - SM
        Valeurs
            Bottom
                Pourcent
--------------------- */

@media (min-width: 576px) {
    .b-sm-50 {
        bottom: 50%;
    }

        .b-sm-n50 {
            bottom: -50%;
        }

    .b-sm-100 {
        bottom: 100%;
    }

        .b-sm-n100 {
            bottom: -100%;
        }
}



/* ---------------------
    02 - SM
        Valeurs
            Bottom
                Vh
--------------------- */

@media (min-width: 576px) {
    .b-sm-50vh {
        bottom: 50vh;
    }

        .b-sm-n50vh {
            bottom: -50vh;
        }

    .b-sm-100vh {
        bottom: 100vh;
    }

        .b-sm-n100vh {
            bottom: -100vh;
        }
}


/* ---------------------
    02 - SM
        Valeurs
            Bottom
                Pixels
--------------------- */

@media (min-width: 576px) {
    .b-sm-3px {
        bottom: 3px;
    }

        .b-sm-n3px {
            bottom: -3px;
        }

    .b-sm-5px {
        bottom: 5px;
    }

        .b-sm-n5px {
            bottom: -5px;
        }

    .b-sm-8px {
        bottom: 8px;
    }

        .b-sm-n8px {
            bottom: -8px;
        }

    .b-sm-10px {
        bottom: 10px;
    }

        .b-sm-n10px {
            bottom: -10px;
        }

    .b-sm-15px {
        bottom: 15px;
    }

        .b-sm-n15px {
            bottom: -15px;
        }

    .b-sm-30px {
        bottom: 30px;
    }

        .b-sm-n30px {
            bottom: -30px;
        }

    .b-sm-40px {
        bottom: 40px;
    }

        .b-sm-n40px {
            bottom: -40px;
        }

    .b-sm-50px {
        bottom: 50px;
    }

        .b-sm-n50px {
            bottom: -50px;
        }

    .b-sm-60px {
        bottom: 60px;
    }

        .b-sm-n60px {
            bottom: -60px;
        }

    .b-sm-70px {
        bottom: 70px;
    }

        .b-sm-n70px {
            bottom: -70px;
        }

    .b-sm-80px {
        bottom: 80px;
    }

        .b-sm-n80px {
            bottom: -80px;
        }

    .b-sm-90px {
        bottom: 90px;
    }

        .b-sm-n90px {
            bottom: -90px;
        }

    .b-sm-100px {
        bottom: 100px;
    }

        .b-sm-n100px {
            bottom: -100px;
        }
}



/* ---------------------
    02 - SM
        Valeurs
            Left
                Base
--------------------- */

@media (min-width: 576px) {
    .l-sm-0 {
        left: 0;
    }

    .l-sm-auto {
        left: auto;
    }
}



/* ---------------------
    02 - SM
        Valeurs
            Left
                Pourcent
--------------------- */

@media (min-width: 576px) {
    .l-sm-50 {
        left: 50%;
    }

        .l-sm-n50 {
            left: -50%;
        }

    .l-sm-100 {
        left: 100%;
    }

        .l-sm-n100 {
            left: -100%;
        }
}



/* ---------------------
    02 - SM
        Valeurs
            Left
                Vw
--------------------- */

@media (min-width: 576px) {
    .l-sm-50vw {
        left: 50vw;
    }

        .l-sm-n50vw {
            left: -50vw;
        }

    .l-sm-100vw {
        left: 100vw;
    }

        .l-sm-n100vw {
            left: -100vw;
        }
}


/* ---------------------
    02 - SM
        Valeurs
            Left
                Pixels
--------------------- */

@media (min-width: 576px) {
    .l-sm-3px {
        left: 3px;
    }

        .l-sm-n3px {
            left: -3px;
        }

    .l-sm-5px {
        left: 5px;
    }

        .l-sm-n5px {
            left: -5px;
        }

    .l-sm-8px {
        left: 8px;
    }

        .l-sm-n8px {
            left: -8px;
        }

    .l-sm-10px {
        left: 10px;
    }

        .l-sm-n10px {
            left: -10px;
        }

    .l-sm-15px {
        left: 15px;
    }

        .l-sm-n15px {
            left: -15px;
        }

    .l-sm-30px {
        left: 30px;
    }

        .l-sm-n30px {
            left: -30px;
        }

    .l-sm-40px {
        left: 40px;
    }

        .l-sm-n40px {
            left: -40px;
        }

    .l-sm-50px {
        left: 50px;
    }

        .l-sm-n50px {
            left: -50px;
        }

    .l-sm-60px {
        left: 60px;
    }

        .l-sm-n60px {
            left: -60px;
        }

    .l-sm-70px {
        left: 70px;
    }

        .l-sm-n70px {
            left: -70px;
        }

    .l-sm-80px {
        left: 80px;
    }

        .l-sm-n80px {
            left: -80px;
        }

    .l-sm-90px {
        left: 90px;
    }

        .l-sm-n90px {
            left: -90px;
        }

    .l-sm-100px {
        left: 100px;
    }

        .l-sm-n100px {
            left: -100px;
        }

        /* Spécifique : Pour masquer un élément hors de la vue mais l'avoir dans le DOM pour le SEO */
        .l-sm-n10000px {
            left: -10000px;
        }
}



/* ---------------------
    02 - SM
        Z-index
--------------------- */

@media (min-width: 576px) {
    .z-sm-0 {
        z-index: 0;
    }

    .z-sm-1 {
        z-index: 1;
    }

        .z-sm-n1 {
            z-index: -1;
        }
}



/* ---------------------
    03 - MD
        Position
--------------------- */

@media (min-width: 768px) {
    .p-md-absolute {
        position: absolute;
    }

    .p-md-fixed {
        position: fixed;
    }

    .p-md-relative {
        position: relative;
    }

    .p-md-static {
        position: static;
    }

    .p-md-sticky {
        position: sticky;
    }
}



/* ---------------------
    03 - MD
        Valeurs
            Inset
--------------------- */

@media (min-width: 768px) {
    .i-md-0 {
        inset: 0;
    }
}


/* ---------------------
    03 - MD
        Valeurs
            Top
                Base
--------------------- */

@media (min-width: 768px) {
    .t-md-0 {
        top: 0;
    }

    .t-md-auto {
        top: auto;
    }
}



/* ---------------------
    03 - MD
        Valeurs
            Top
                Pourcent
--------------------- */

@media (min-width: 768px) {
    .t-md-50 {
        top: 50%;
    }

        .t-md-n50 {
            top: -50%;
        }

    .t-md-100 {
        top: 100%;
    }

        .t-md-n100 {
            top: -100%;
        }
}


/* ---------------------
    03 - MD
        Valeurs
            Top
                Vh
--------------------- */

@media (min-width: 768px) {
    .t-md-50vh {
        top: 50vh;
    }

        .t-md-n50vh {
            top: -50vh;
        }

    .t-md-100vh {
        top: 100vh;
    }

        .t-md-n100vh {
            top: -100vh;
        }
}



/* ---------------------
    03 - MD
        Valeurs
            Top
                Pixels
--------------------- */

@media (min-width: 768px) {
    .t-md-3px {
        top: 3px;
    }

        .t-md-n3px {
            top: -3px;
        }

    .t-md-5px {
        top: 5px;
    }

        .t-md-n5px {
            top: -5px;
        }

    .t-md-8px {
        top: 8px;
    }

        .t-md-n8px {
            top: -8px;
        }

    .t-md-10px {
        top: 10px;
    }

        .t-md-n10px {
            top: -10px;
        }

    .t-md-15px {
        top: 15px;
    }

        .t-md-n15px {
            top: -15px;
        }

    .t-md-30px {
        top: 30px;
    }

        .t-md-n30px {
            top: -30px;
        }

    .t-md-40px {
        top: 40px;
    }

        .t-md-n40px {
            top: -40px;
        }

    .t-md-50px {
        top: 50px;
    }

        .t-md-n50px {
            top: -50px;
        }

    .t-md-60px {
        top: 60px;
    }

        .t-md-n60px {
            top: -60px;
        }

    .t-md-70px {
        top: 70px;
    }

        .t-md-n70px {
            top: -70px;
        }

    .t-md-80px {
        top: 80px;
    }

        .t-md-n80px {
            top: -80px;
        }

    .t-md-90px {
        top: 90px;
    }

        .t-md-n90px {
            top: -90px;
        }

    .t-md-100px {
        top: 100px;
    }

        .t-md-n100px {
            top: -100px;
        }
}



/* ---------------------
    03 - MD
        Valeurs
            Right
                Base
--------------------- */

@media (min-width: 768px) {
    .r-md-0 {
        right: 0;
    }

    .r-md-auto {
        right: auto;
    }
}



/* ---------------------
    03 - MD
        Valeurs
            Right
                Pourcent
--------------------- */

@media (min-width: 768px) {
    .r-md-50 {
        right: 50%;
    }

        .r-md-n50 {
            right: -50%;
        }

    .r-md-100 {
        right: 100%;
    }

        .r-md-n100 {
            right: -100%;
        }
}



/* ---------------------
    03 - MD
        Valeurs
            Right
                Vw
--------------------- */

@media (min-width: 768px) {
    .r-md-50vw {
        right: 50vw;
    }

        .r-md-n50vw {
            right: -50vw;
        }

    .r-md-100vw {
        right: 100vw;
    }

        .r-md-n100vw {
            right: -100vw;
        }
}


/* ---------------------
    03 - MD
        Valeurs
            Right
                Pixels
--------------------- */

@media (min-width: 768px) {
    .r-md-3px {
        right: 3px;
    }

        .r-md-n3px {
            right: -3px;
        }

    .r-md-5px {
        right: 5px;
    }

        .r-md-n5px {
            right: -5px;
        }

    .r-md-8px {
        right: 8px;
    }

        .r-md-n8px {
            right: -8px;
        }

    .r-md-10px {
        right: 10px;
    }

        .r-md-n10px {
            right: -10px;
        }

    .r-md-15px {
        right: 15px;
    }

        .r-md-n15px {
            right: -15px;
        }

    .r-md-30px {
        right: 30px;
    }

        .r-md-n30px {
            right: -30px;
        }

    .r-md-40px {
        right: 40px;
    }

        .r-md-n40px {
            right: -40px;
        }

    .r-md-50px {
        right: 50px;
    }

        .r-md-n50px {
            right: -50px;
        }

    .r-md-60px {
        right: 60px;
    }

        .r-md-n60px {
            right: -60px;
        }

    .r-md-70px {
        right: 70px;
    }

        .r-md-n70px {
            right: -70px;
        }

    .r-md-80px {
        right: 80px;
    }

        .r-md-n80px {
            right: -80px;
        }

    .r-md-90px {
        right: 90px;
    }

        .r-md-n90px {
            right: -90px;
        }

    .r-md-100px {
        right: 100px;
    }

        .r-md-n100px {
            right: -100px;
        }
}



/* ---------------------
    03 - MD
        Valeurs
            Bottom
                Base
--------------------- */

@media (min-width: 768px) {
    .b-md-0 {
        bottom: 0;
    }

    .b-md-auto {
        bottom: auto;
    }
}



/* ---------------------
    03 - MD
        Valeurs
            Bottom
                Pourcent
--------------------- */

@media (min-width: 768px) {
    .b-md-50 {
        bottom: 50%;
    }

        .b-md-n50 {
            bottom: -50%;
        }

    .b-md-100 {
        bottom: 100%;
    }

        .b-md-n100 {
            bottom: -100%;
        }
}



/* ---------------------
    03 - MD
        Valeurs
            Bottom
                Vh
--------------------- */

@media (min-width: 768px) {
    .b-md-50vh {
        bottom: 50vh;
    }

        .b-md-n50vh {
            bottom: -50vh;
        }

    .b-md-100vh {
        bottom: 100vh;
    }

        .b-md-n100vh {
            bottom: -100vh;
        }
}


/* ---------------------
    03 - MD
        Valeurs
            Bottom
                Pixels
--------------------- */

@media (min-width: 768px) {
    .b-md-3px {
        bottom: 3px;
    }

        .b-md-n3px {
            bottom: -3px;
        }

    .b-md-5px {
        bottom: 5px;
    }

        .b-md-n5px {
            bottom: -5px;
        }

    .b-md-8px {
        bottom: 8px;
    }

        .b-md-n8px {
            bottom: -8px;
        }

    .b-md-10px {
        bottom: 10px;
    }

        .b-md-n10px {
            bottom: -10px;
        }

    .b-md-15px {
        bottom: 15px;
    }

        .b-md-n15px {
            bottom: -15px;
        }

    .b-md-30px {
        bottom: 30px;
    }

        .b-md-n30px {
            bottom: -30px;
        }

    .b-md-40px {
        bottom: 40px;
    }

        .b-md-n40px {
            bottom: -40px;
        }

    .b-md-50px {
        bottom: 50px;
    }

        .b-md-n50px {
            bottom: -50px;
        }

    .b-md-60px {
        bottom: 60px;
    }

        .b-md-n60px {
            bottom: -60px;
        }

    .b-md-70px {
        bottom: 70px;
    }

        .b-md-n70px {
            bottom: -70px;
        }

    .b-md-80px {
        bottom: 80px;
    }

        .b-md-n80px {
            bottom: -80px;
        }

    .b-md-90px {
        bottom: 90px;
    }

        .b-md-n90px {
            bottom: -90px;
        }

    .b-md-100px {
        bottom: 100px;
    }

        .b-md-n100px {
            bottom: -100px;
        }
}



/* ---------------------
    03 - MD
        Valeurs
            Left
                Base
--------------------- */

@media (min-width: 768px) {
    .l-md-0 {
        left: 0;
    }

    .l-md-auto {
        left: auto;
    }
}



/* ---------------------
    03 - MD
        Valeurs
            Left
                Pourcent
--------------------- */

@media (min-width: 768px) {
    .l-md-50 {
        left: 50%;
    }

        .l-md-n50 {
            left: -50%;
        }

    .l-md-100 {
        left: 100%;
    }

        .l-md-n100 {
            left: -100%;
        }
}



/* ---------------------
    03 - MD
        Valeurs
            Left
                Vw
--------------------- */

@media (min-width: 768px) {
    .l-md-50vw {
        left: 50vw;
    }

        .l-md-n50vw {
            left: -50vw;
        }

    .l-md-100vw {
        left: 100vw;
    }

        .l-md-n100vw {
            left: -100vw;
        }
}


/* ---------------------
    03 - MD
        Valeurs
            Left
                Pixels
--------------------- */

@media (min-width: 768px) {
    .l-md-3px {
        left: 3px;
    }

        .l-md-n3px {
            left: -3px;
        }

    .l-md-5px {
        left: 5px;
    }

        .l-md-n5px {
            left: -5px;
        }

    .l-md-8px {
        left: 8px;
    }

        .l-md-n8px {
            left: -8px;
        }

    .l-md-10px {
        left: 10px;
    }

        .l-md-n10px {
            left: -10px;
        }

    .l-md-15px {
        left: 15px;
    }

        .l-md-n15px {
            left: -15px;
        }

    .l-md-30px {
        left: 30px;
    }

        .l-md-n30px {
            left: -30px;
        }

    .l-md-40px {
        left: 40px;
    }

        .l-md-n40px {
            left: -40px;
        }

    .l-md-50px {
        left: 50px;
    }

        .l-md-n50px {
            left: -50px;
        }

    .l-md-60px {
        left: 60px;
    }

        .l-md-n60px {
            left: -60px;
        }

    .l-md-70px {
        left: 70px;
    }

        .l-md-n70px {
            left: -70px;
        }

    .l-md-80px {
        left: 80px;
    }

        .l-md-n80px {
            left: -80px;
        }

    .l-md-90px {
        left: 90px;
    }

        .l-md-n90px {
            left: -90px;
        }

    .l-md-100px {
        left: 100px;
    }

        .l-md-n100px {
            left: -100px;
        }

        /* Spécifique : Pour masquer un élément hors de la vue mais l'avoir dans le DOM pour le SEO */
        .l-md-n10000px {
            left: -10000px;
        }
}



/* ---------------------
    03 - MD
        Z-index
--------------------- */

@media (min-width: 768px) {
    .z-md-0 {
        z-index: 0;
    }

    .z-md-1 {
        z-index: 1;
    }

        .z-md-n1 {
            z-index: -1;
        }
}



/* ---------------------
    04 - LG
        Position
--------------------- */

@media (min-width: 992px) {
    .p-lg-absolute {
        position: absolute;
    }

    .p-lg-fixed {
        position: fixed;
    }

    .p-lg-relative {
        position: relative;
    }

    .p-lg-static {
        position: static;
    }

    .p-lg-sticky {
        position: sticky;
    }
}



/* ---------------------
    04 - LG
        Valeurs
            Inset
--------------------- */

@media (min-width: 992px) {
    .i-lg-0 {
        inset: 0;
    }
}



/* ---------------------
    04 - LG
        Valeurs
            Top
                Base
--------------------- */

@media (min-width: 992px) {
    .t-lg-0 {
        top: 0;
    }

    .t-lg-auto {
        top: auto;
    }
}



/* ---------------------
    04 - LG
        Valeurs
            Top
                Pourcent
--------------------- */

@media (min-width: 992px) {
    .t-lg-50 {
        top: 50%;
    }

        .t-lg-n50 {
            top: -50%;
        }

    .t-lg-100 {
        top: 100%;
    }

        .t-lg-n100 {
            top: -100%;
        }
}


/* ---------------------
    04 - LG
        Valeurs
            Top
                Vh
--------------------- */

@media (min-width: 992px) {
    .t-lg-50vh {
        top: 50vh;
    }

        .t-lg-n50vh {
            top: -50vh;
        }

    .t-lg-100vh {
        top: 100vh;
    }

        .t-lg-n100vh {
            top: -100vh;
        }
}



/* ---------------------
    04 - LG
        Valeurs
            Top
                Pixels
--------------------- */

@media (min-width: 992px) {
    .t-lg-3px {
        top: 3px;
    }

        .t-lg-n3px {
            top: -3px;
        }

    .t-lg-5px {
        top: 5px;
    }

        .t-lg-n5px {
            top: -5px;
        }

    .t-lg-8px {
        top: 8px;
    }

        .t-lg-n8px {
            top: -8px;
        }

    .t-lg-10px {
        top: 10px;
    }

        .t-lg-n10px {
            top: -10px;
        }

    .t-lg-15px {
        top: 15px;
    }

        .t-lg-n15px {
            top: -15px;
        }

    .t-lg-30px {
        top: 30px;
    }

        .t-lg-n30px {
            top: -30px;
        }

    .t-lg-40px {
        top: 40px;
    }

        .t-lg-n40px {
            top: -40px;
        }

    .t-lg-50px {
        top: 50px;
    }

        .t-lg-n50px {
            top: -50px;
        }

    .t-lg-60px {
        top: 60px;
    }

        .t-lg-n60px {
            top: -60px;
        }

    .t-lg-70px {
        top: 70px;
    }

        .t-lg-n70px {
            top: -70px;
        }

    .t-lg-80px {
        top: 80px;
    }

        .t-lg-n80px {
            top: -80px;
        }

    .t-lg-90px {
        top: 90px;
    }

        .t-lg-n90px {
            top: -90px;
        }

    .t-lg-100px {
        top: 100px;
    }

        .t-lg-n100px {
            top: -100px;
        }
}



/* ---------------------
    04 - LG
        Valeurs
            Right
                Base
--------------------- */

@media (min-width: 992px) {
    .r-lg-0 {
        right: 0;
    }

    .r-lg-auto {
        right: auto;
    }
}



/* ---------------------
    04 - LG
        Valeurs
            Right
                Pourcent
--------------------- */

@media (min-width: 992px) {
    .r-lg-50 {
        right: 50%;
    }

        .r-lg-n50 {
            right: -50%;
        }

    .r-lg-100 {
        right: 100%;
    }

        .r-lg-n100 {
            right: -100%;
        }
}



/* ---------------------
    04 - LG
        Valeurs
            Right
                Vw
--------------------- */

@media (min-width: 992px) {
    .r-lg-50vw {
        right: 50vw;
    }

        .r-lg-n50vw {
            right: -50vw;
        }

    .r-lg-100vw {
        right: 100vw;
    }

        .r-lg-n100vw {
            right: -100vw;
        }
}


/* ---------------------
    04 - LG
        Valeurs
            Right
                Pixels
--------------------- */

@media (min-width: 992px) {
    .r-lg-3px {
        right: 3px;
    }

        .r-lg-n3px {
            right: -3px;
        }

    .r-lg-5px {
        right: 5px;
    }

        .r-lg-n5px {
            right: -5px;
        }

    .r-lg-8px {
        right: 8px;
    }

        .r-lg-n8px {
            right: -8px;
        }

    .r-lg-10px {
        right: 10px;
    }

        .r-lg-n10px {
            right: -10px;
        }

    .r-lg-15px {
        right: 15px;
    }

        .r-lg-n15px {
            right: -15px;
        }

    .r-lg-30px {
        right: 30px;
    }

        .r-lg-n30px {
            right: -30px;
        }

    .r-lg-40px {
        right: 40px;
    }

        .r-lg-n40px {
            right: -40px;
        }

    .r-lg-50px {
        right: 50px;
    }

        .r-lg-n50px {
            right: -50px;
        }

    .r-lg-60px {
        right: 60px;
    }

        .r-lg-n60px {
            right: -60px;
        }

    .r-lg-70px {
        right: 70px;
    }

        .r-lg-n70px {
            right: -70px;
        }

    .r-lg-80px {
        right: 80px;
    }

        .r-lg-n80px {
            right: -80px;
        }

    .r-lg-90px {
        right: 90px;
    }

        .r-lg-n90px {
            right: -90px;
        }

    .r-lg-100px {
        right: 100px;
    }

        .r-lg-n100px {
            right: -100px;
        }
}



/* ---------------------
    04 - LG
        Valeurs
            Bottom
                Base
--------------------- */

@media (min-width: 992px) {
    .b-lg-0 {
        bottom: 0;
    }

    .b-lg-auto {
        bottom: auto;
    }
}



/* ---------------------
    04 - LG
        Valeurs
            Bottom
                Pourcent
--------------------- */

@media (min-width: 992px) {
    .b-lg-50 {
        bottom: 50%;
    }

        .b-lg-n50 {
            bottom: -50%;
        }

    .b-lg-100 {
        bottom: 100%;
    }

        .b-lg-n100 {
            bottom: -100%;
        }
}



/* ---------------------
    04 - LG
        Valeurs
            Bottom
                Vh
--------------------- */

@media (min-width: 992px) {
    .b-lg-50vh {
        bottom: 50vh;
    }

        .b-lg-n50vh {
            bottom: -50vh;
        }

    .b-lg-100vh {
        bottom: 100vh;
    }

        .b-lg-n100vh {
            bottom: -100vh;
        }
}


/* ---------------------
    04 - LG
        Valeurs
            Bottom
                Pixels
--------------------- */

@media (min-width: 992px) {
    .b-lg-3px {
        bottom: 3px;
    }

        .b-lg-n3px {
            bottom: -3px;
        }

    .b-lg-5px {
        bottom: 5px;
    }

        .b-lg-n5px {
            bottom: -5px;
        }

    .b-lg-8px {
        bottom: 8px;
    }

        .b-lg-n8px {
            bottom: -8px;
        }

    .b-lg-10px {
        bottom: 10px;
    }

        .b-lg-n10px {
            bottom: -10px;
        }

    .b-lg-15px {
        bottom: 15px;
    }

        .b-lg-n15px {
            bottom: -15px;
        }

    .b-lg-30px {
        bottom: 30px;
    }

        .b-lg-n30px {
            bottom: -30px;
        }

    .b-lg-40px {
        bottom: 40px;
    }

        .b-lg-n40px {
            bottom: -40px;
        }

    .b-lg-50px {
        bottom: 50px;
    }

        .b-lg-n50px {
            bottom: -50px;
        }

    .b-lg-60px {
        bottom: 60px;
    }

        .b-lg-n60px {
            bottom: -60px;
        }

    .b-lg-70px {
        bottom: 70px;
    }

        .b-lg-n70px {
            bottom: -70px;
        }

    .b-lg-80px {
        bottom: 80px;
    }

        .b-lg-n80px {
            bottom: -80px;
        }

    .b-lg-90px {
        bottom: 90px;
    }

        .b-lg-n90px {
            bottom: -90px;
        }

    .b-lg-100px {
        bottom: 100px;
    }

        .b-lg-n100px {
            bottom: -100px;
        }
}



/* ---------------------
    04 - LG
        Valeurs
            Left
                Base
--------------------- */

@media (min-width: 992px) {
    .l-lg-0 {
        left: 0;
    }

    .l-lg-auto {
        left: auto;
    }
}



/* ---------------------
    04 - LG
        Valeurs
            Left
                Pourcent
--------------------- */

@media (min-width: 992px) {
    .l-lg-50 {
        left: 50%;
    }

        .l-lg-n50 {
            left: -50%;
        }

    .l-lg-100 {
        left: 100%;
    }

        .l-lg-n100 {
            left: -100%;
        }
}



/* ---------------------
    04 - LG
        Valeurs
            Left
                Vw
--------------------- */

@media (min-width: 992px) {
    .l-lg-50vw {
        left: 50vw;
    }

        .l-lg-n50vw {
            left: -50vw;
        }

    .l-lg-100vw {
        left: 100vw;
    }

        .l-lg-n100vw {
            left: -100vw;
        }
}


/* ---------------------
    04 - LG
        Valeurs
            Left
                Pixels
--------------------- */

@media (min-width: 992px) {
    .l-lg-3px {
        left: 3px;
    }

        .l-lg-n3px {
            left: -3px;
        }

    .l-lg-5px {
        left: 5px;
    }

        .l-lg-n5px {
            left: -5px;
        }

    .l-lg-8px {
        left: 8px;
    }

        .l-lg-n8px {
            left: -8px;
        }

    .l-lg-10px {
        left: 10px;
    }

        .l-lg-n10px {
            left: -10px;
        }

    .l-lg-15px {
        left: 15px;
    }

        .l-lg-n15px {
            left: -15px;
        }

    .l-lg-30px {
        left: 30px;
    }

        .l-lg-n30px {
            left: -30px;
        }

    .l-lg-40px {
        left: 40px;
    }

        .l-lg-n40px {
            left: -40px;
        }

    .l-lg-50px {
        left: 50px;
    }

        .l-lg-n50px {
            left: -50px;
        }

    .l-lg-60px {
        left: 60px;
    }

        .l-lg-n60px {
            left: -60px;
        }

    .l-lg-70px {
        left: 70px;
    }

        .l-lg-n70px {
            left: -70px;
        }

    .l-lg-80px {
        left: 80px;
    }

        .l-lg-n80px {
            left: -80px;
        }

    .l-lg-90px {
        left: 90px;
    }

        .l-lg-n90px {
            left: -90px;
        }

    .l-lg-100px {
        left: 100px;
    }

        .l-lg-n100px {
            left: -100px;
        }

        /* Spécifique : Pour masquer un élément hors de la vue mais l'avoir dans le DOM pour le SEO */
        .l-lg-n10000px {
            left: -10000px;
        }
}



/* ---------------------
    04 - LG
        Z-index
--------------------- */

@media (min-width: 992px) {
    .z-lg-0 {
        z-index: 0;
    }

    .z-lg-1 {
        z-index: 1;
    }

        .z-lg-n1 {
            z-index: -1;
        }
}



/* ---------------------
    05 - XL
        Position
--------------------- */

@media (min-width: 1200px) {
    .p-xl-absolute {
        position: absolute;
    }

    .p-xl-fixed {
        position: fixed;
    }

    .p-xl-relative {
        position: relative;
    }

    .p-xl-static {
        position: static;
    }

    .p-xl-sticky {
        position: sticky;
    }
}



/* ---------------------
    05 - XL
        Valeurs
            Inset
--------------------- */

@media (min-width: 1200px) {
    .i-xl-0 {
        inset: 0;
    }
}



/* ---------------------
    05 - XL
        Valeurs
            Top
                Base
--------------------- */

@media (min-width: 1200px) {
    .t-xl-0 {
        top: 0;
    }

    .t-xl-auto {
        top: auto;
    }
}



/* ---------------------
    05 - XL
        Valeurs
            Top
                Pourcent
--------------------- */

@media (min-width: 1200px) {
    .t-xl-50 {
        top: 50%;
    }

        .t-xl-n50 {
            top: -50%;
        }

    .t-xl-100 {
        top: 100%;
    }

        .t-xl-n100 {
            top: -100%;
        }
}


/* ---------------------
    05 - XL
        Valeurs
            Top
                Vh
--------------------- */

@media (min-width: 1200px) {
    .t-xl-50vh {
        top: 50vh;
    }

        .t-xl-n50vh {
            top: -50vh;
        }

    .t-xl-100vh {
        top: 100vh;
    }

        .t-xl-n100vh {
            top: -100vh;
        }
}



/* ---------------------
    05 - XL
        Valeurs
            Top
                Pixels
--------------------- */

@media (min-width: 1200px) {
    .t-xl-3px {
        top: 3px;
    }

        .t-xl-n3px {
            top: -3px;
        }

    .t-xl-5px {
        top: 5px;
    }

        .t-xl-n5px {
            top: -5px;
        }

    .t-xl-8px {
        top: 8px;
    }

        .t-xl-n8px {
            top: -8px;
        }

    .t-xl-10px {
        top: 10px;
    }

        .t-xl-n10px {
            top: -10px;
        }

    .t-xl-15px {
        top: 15px;
    }

        .t-xl-n15px {
            top: -15px;
        }

    .t-xl-30px {
        top: 30px;
    }

        .t-xl-n30px {
            top: -30px;
        }

    .t-xl-40px {
        top: 40px;
    }

        .t-xl-n40px {
            top: -40px;
        }

    .t-xl-50px {
        top: 50px;
    }

        .t-xl-n50px {
            top: -50px;
        }

    .t-xl-60px {
        top: 60px;
    }

        .t-xl-n60px {
            top: -60px;
        }

    .t-xl-70px {
        top: 70px;
    }

        .t-xl-n70px {
            top: -70px;
        }

    .t-xl-80px {
        top: 80px;
    }

        .t-xl-n80px {
            top: -80px;
        }

    .t-xl-90px {
        top: 90px;
    }

        .t-xl-n90px {
            top: -90px;
        }

    .t-xl-100px {
        top: 100px;
    }

        .t-xl-n100px {
            top: -100px;
        }
}



/* ---------------------
    05 - XL
        Valeurs
            Right
                Base
--------------------- */

@media (min-width: 1200px) {
    .r-xl-0 {
        right: 0;
    }

    .r-xl-auto {
        right: auto;
    }
}



/* ---------------------
    05 - XL
        Valeurs
            Right
                Pourcent
--------------------- */

@media (min-width: 1200px) {
    .r-xl-50 {
        right: 50%;
    }

        .r-xl-n50 {
            right: -50%;
        }

    .r-xl-100 {
        right: 100%;
    }

        .r-xl-n100 {
            right: -100%;
        }
}



/* ---------------------
    05 - XL
        Valeurs
            Right
                Vw
--------------------- */

@media (min-width: 1200px) {
    .r-xl-50vw {
        right: 50vw;
    }

        .r-xl-n50vw {
            right: -50vw;
        }

    .r-xl-100vw {
        right: 100vw;
    }

        .r-xl-n100vw {
            right: -100vw;
        }
}


/* ---------------------
    05 - XL
        Valeurs
            Right
                Pixels
--------------------- */

@media (min-width: 1200px) {
    .r-xl-3px {
        right: 3px;
    }

        .r-xl-n3px {
            right: -3px;
        }

    .r-xl-5px {
        right: 5px;
    }

        .r-xl-n5px {
            right: -5px;
        }

    .r-xl-8px {
        right: 8px;
    }

        .r-xl-n8px {
            right: -8px;
        }

    .r-xl-10px {
        right: 10px;
    }

        .r-xl-n10px {
            right: -10px;
        }

    .r-xl-15px {
        right: 15px;
    }

        .r-xl-n15px {
            right: -15px;
        }

    .r-xl-30px {
        right: 30px;
    }

        .r-xl-n30px {
            right: -30px;
        }

    .r-xl-40px {
        right: 40px;
    }

        .r-xl-n40px {
            right: -40px;
        }

    .r-xl-50px {
        right: 50px;
    }

        .r-xl-n50px {
            right: -50px;
        }

    .r-xl-60px {
        right: 60px;
    }

        .r-xl-n60px {
            right: -60px;
        }

    .r-xl-70px {
        right: 70px;
    }

        .r-xl-n70px {
            right: -70px;
        }

    .r-xl-80px {
        right: 80px;
    }

        .r-xl-n80px {
            right: -80px;
        }

    .r-xl-90px {
        right: 90px;
    }

        .r-xl-n90px {
            right: -90px;
        }

    .r-xl-100px {
        right: 100px;
    }

        .r-xl-n100px {
            right: -100px;
        }
}



/* ---------------------
    05 - XL
        Valeurs
            Bottom
                Base
--------------------- */

@media (min-width: 1200px) {
    .b-xl-0 {
        bottom: 0;
    }

    .b-xl-auto {
        bottom: auto;
    }
}



/* ---------------------
    05 - XL
        Valeurs
            Bottom
                Pourcent
--------------------- */

@media (min-width: 1200px) {
    .b-xl-50 {
        bottom: 50%;
    }

        .b-xl-n50 {
            bottom: -50%;
        }

    .b-xl-100 {
        bottom: 100%;
    }

        .b-xl-n100 {
            bottom: -100%;
        }
}



/* ---------------------
    05 - XL
        Valeurs
            Bottom
                Vh
--------------------- */

@media (min-width: 1200px) {
    .b-xl-50vh {
        bottom: 50vh;
    }

        .b-xl-n50vh {
            bottom: -50vh;
        }

    .b-xl-100vh {
        bottom: 100vh;
    }

        .b-xl-n100vh {
            bottom: -100vh;
        }
}


/* ---------------------
    05 - XL
        Valeurs
            Bottom
                Pixels
--------------------- */

@media (min-width: 1200px) {
    .b-xl-3px {
        bottom: 3px;
    }

        .b-xl-n3px {
            bottom: -3px;
        }

    .b-xl-5px {
        bottom: 5px;
    }

        .b-xl-n5px {
            bottom: -5px;
        }

    .b-xl-8px {
        bottom: 8px;
    }

        .b-xl-n8px {
            bottom: -8px;
        }

    .b-xl-10px {
        bottom: 10px;
    }

        .b-xl-n10px {
            bottom: -10px;
        }

    .b-xl-15px {
        bottom: 15px;
    }

        .b-xl-n15px {
            bottom: -15px;
        }

    .b-xl-30px {
        bottom: 30px;
    }

        .b-xl-n30px {
            bottom: -30px;
        }

    .b-xl-40px {
        bottom: 40px;
    }

        .b-xl-n40px {
            bottom: -40px;
        }

    .b-xl-50px {
        bottom: 50px;
    }

        .b-xl-n50px {
            bottom: -50px;
        }

    .b-xl-60px {
        bottom: 60px;
    }

        .b-xl-n60px {
            bottom: -60px;
        }

    .b-xl-70px {
        bottom: 70px;
    }

        .b-xl-n70px {
            bottom: -70px;
        }

    .b-xl-80px {
        bottom: 80px;
    }

        .b-xl-n80px {
            bottom: -80px;
        }

    .b-xl-90px {
        bottom: 90px;
    }

        .b-xl-n90px {
            bottom: -90px;
        }

    .b-xl-100px {
        bottom: 100px;
    }

        .b-xl-n100px {
            bottom: -100px;
        }
}



/* ---------------------
    05 - XL
        Valeurs
            Left
                Base
--------------------- */

@media (min-width: 1200px) {
    .l-xl-0 {
        left: 0;
    }

    .l-xl-auto {
        left: auto;
    }
}



/* ---------------------
    05 - XL
        Valeurs
            Left
                Pourcent
--------------------- */

@media (min-width: 1200px) {
    .l-xl-50 {
        left: 50%;
    }

        .l-xl-n50 {
            left: -50%;
        }

    .l-xl-100 {
        left: 100%;
    }

        .l-xl-n100 {
            left: -100%;
        }
}



/* ---------------------
    05 - XL
        Valeurs
            Left
                Vw
--------------------- */

@media (min-width: 1200px) {
    .l-xl-50vw {
        left: 50vw;
    }

        .l-xl-n50vw {
            left: -50vw;
        }

    .l-xl-100vw {
        left: 100vw;
    }

        .l-xl-n100vw {
            left: -100vw;
        }
}


/* ---------------------
    05 - XL
        Valeurs
            Left
                Pixels
--------------------- */

@media (min-width: 1200px) {
    .l-xl-3px {
        left: 3px;
    }

        .l-xl-n3px {
            left: -3px;
        }

    .l-xl-5px {
        left: 5px;
    }

        .l-xl-n5px {
            left: -5px;
        }

    .l-xl-8px {
        left: 8px;
    }

        .l-xl-n8px {
            left: -8px;
        }

    .l-xl-10px {
        left: 10px;
    }

        .l-xl-n10px {
            left: -10px;
        }

    .l-xl-15px {
        left: 15px;
    }

        .l-xl-n15px {
            left: -15px;
        }

    .l-xl-30px {
        left: 30px;
    }

        .l-xl-n30px {
            left: -30px;
        }

    .l-xl-40px {
        left: 40px;
    }

        .l-xl-n40px {
            left: -40px;
        }

    .l-xl-50px {
        left: 50px;
    }

        .l-xl-n50px {
            left: -50px;
        }

    .l-xl-60px {
        left: 60px;
    }

        .l-xl-n60px {
            left: -60px;
        }

    .l-xl-70px {
        left: 70px;
    }

        .l-xl-n70px {
            left: -70px;
        }

    .l-xl-80px {
        left: 80px;
    }

        .l-xl-n80px {
            left: -80px;
        }

    .l-xl-90px {
        left: 90px;
    }

        .l-xl-n90px {
            left: -90px;
        }

    .l-xl-100px {
        left: 100px;
    }

        .l-xl-n100px {
            left: -100px;
        }

        /* Spécifique : Pour masquer un élément hors de la vue mais l'avoir dans le DOM pour le SEO */
        .l-xl-n10000px {
            left: -10000px;
        }
}



/* ---------------------
    05 - XL
        Z-index
--------------------- */

@media (min-width: 1200px) {
    .z-xl-0 {
        z-index: 0;
    }

    .z-xl-1 {
        z-index: 1;
    }

        .z-xl-n1 {
            z-index: -1;
        }
}



/* ---------------------
    06 - XXL
        Position
--------------------- */

@media (min-width: 1400px) {
    .p-xxl-absolute {
        position: absolute;
    }

    .p-xxl-fixed {
        position: fixed;
    }

    .p-xxl-relative {
        position: relative;
    }

    .p-xxl-static {
        position: static;
    }

    .p-xxl-sticky {
        position: sticky;
    }
}



/* ---------------------
    06 - XXL
        Valeurs
            Inset
--------------------- */

@media (min-width: 1400px) {
    .i-xxl-0 {
        inset: 0;
    }
}



/* ---------------------
    06 - XXL
        Valeurs
            Top
                Base
--------------------- */

@media (min-width: 1400px) {
    .t-xxl-0 {
        top: 0;
    }

    .t-xxl-auto {
        top: auto;
    }
}



/* ---------------------
    06 - XXL
        Valeurs
            Top
                Pourcent
--------------------- */

@media (min-width: 1400px) {
    .t-xxl-50 {
        top: 50%;
    }

        .t-xxl-n50 {
            top: -50%;
        }

    .t-xxl-100 {
        top: 100%;
    }

        .t-xxl-n100 {
            top: -100%;
        }
}


/* ---------------------
    06 - XXL
        Valeurs
            Top
                Vh
--------------------- */

@media (min-width: 1400px) {
    .t-xxl-50vh {
        top: 50vh;
    }

        .t-xxl-n50vh {
            top: -50vh;
        }

    .t-xxl-100vh {
        top: 100vh;
    }

        .t-xxl-n100vh {
            top: -100vh;
        }
}



/* ---------------------
    06 - XXL
        Valeurs
            Top
                Pixels
--------------------- */

@media (min-width: 1400px) {
    .t-xxl-3px {
        top: 3px;
    }

        .t-xxl-n3px {
            top: -3px;
        }

    .t-xxl-5px {
        top: 5px;
    }

        .t-xxl-n5px {
            top: -5px;
        }

    .t-xxl-8px {
        top: 8px;
    }

        .t-xxl-n8px {
            top: -8px;
        }

    .t-xxl-10px {
        top: 10px;
    }

        .t-xxl-n10px {
            top: -10px;
        }

    .t-xxl-15px {
        top: 15px;
    }

        .t-xxl-n15px {
            top: -15px;
        }

    .t-xxl-30px {
        top: 30px;
    }

        .t-xxl-n30px {
            top: -30px;
        }

    .t-xxl-40px {
        top: 40px;
    }

        .t-xxl-n40px {
            top: -40px;
        }

    .t-xxl-50px {
        top: 50px;
    }

        .t-xxl-n50px {
            top: -50px;
        }

    .t-xxl-60px {
        top: 60px;
    }

        .t-xxl-n60px {
            top: -60px;
        }

    .t-xxl-70px {
        top: 70px;
    }

        .t-xxl-n70px {
            top: -70px;
        }

    .t-xxl-80px {
        top: 80px;
    }

        .t-xxl-n80px {
            top: -80px;
        }

    .t-xxl-90px {
        top: 90px;
    }

        .t-xxl-n90px {
            top: -90px;
        }

    .t-xxl-100px {
        top: 100px;
    }

        .t-xxl-n100px {
            top: -100px;
        }
}



/* ---------------------
    06 - XXL
        Valeurs
            Right
                Base
--------------------- */

@media (min-width: 1400px) {
    .r-xxl-0 {
        right: 0;
    }

    .r-xxl-auto {
        right: auto;
    }
}



/* ---------------------
    06 - XXL
        Valeurs
            Right
                Pourcent
--------------------- */

@media (min-width: 1400px) {
    .r-xxl-50 {
        right: 50%;
    }

        .r-xxl-n50 {
            right: -50%;
        }

    .r-xxl-100 {
        right: 100%;
    }

        .r-xxl-n100 {
            right: -100%;
        }
}



/* ---------------------
    06 - XXL
        Valeurs
            Right
                Vw
--------------------- */

@media (min-width: 1400px) {
    .r-xxl-50vw {
        right: 50vw;
    }

        .r-xxl-n50vw {
            right: -50vw;
        }

    .r-xxl-100vw {
        right: 100vw;
    }

        .r-xxl-n100vw {
            right: -100vw;
        }
}


/* ---------------------
    06 - XXL
        Valeurs
            Right
                Pixels
--------------------- */

@media (min-width: 1400px) {
    .r-xxl-3px {
        right: 3px;
    }

        .r-xxl-n3px {
            right: -3px;
        }

    .r-xxl-5px {
        right: 5px;
    }

        .r-xxl-n5px {
            right: -5px;
        }

    .r-xxl-8px {
        right: 8px;
    }

        .r-xxl-n8px {
            right: -8px;
        }

    .r-xxl-10px {
        right: 10px;
    }

        .r-xxl-n10px {
            right: -10px;
        }

    .r-xxl-15px {
        right: 15px;
    }

        .r-xxl-n15px {
            right: -15px;
        }

    .r-xxl-30px {
        right: 30px;
    }

        .r-xxl-n30px {
            right: -30px;
        }

    .r-xxl-40px {
        right: 40px;
    }

        .r-xxl-n40px {
            right: -40px;
        }

    .r-xxl-50px {
        right: 50px;
    }

        .r-xxl-n50px {
            right: -50px;
        }

    .r-xxl-60px {
        right: 60px;
    }

        .r-xxl-n60px {
            right: -60px;
        }

    .r-xxl-70px {
        right: 70px;
    }

        .r-xxl-n70px {
            right: -70px;
        }

    .r-xxl-80px {
        right: 80px;
    }

        .r-xxl-n80px {
            right: -80px;
        }

    .r-xxl-90px {
        right: 90px;
    }

        .r-xxl-n90px {
            right: -90px;
        }

    .r-xxl-100px {
        right: 100px;
    }

        .r-xxl-n100px {
            right: -100px;
        }
}



/* ---------------------
    06 - XXL
        Valeurs
            Bottom
                Base
--------------------- */

@media (min-width: 1400px) {
    .b-xxl-0 {
        bottom: 0;
    }

    .b-xxl-auto {
        bottom: auto;
    }
}



/* ---------------------
    06 - XXL
        Valeurs
            Bottom
                Pourcent
--------------------- */

@media (min-width: 1400px) {
    .b-xxl-50 {
        bottom: 50%;
    }

        .b-xxl-n50 {
            bottom: -50%;
        }

    .b-xxl-100 {
        bottom: 100%;
    }

        .b-xxl-n100 {
            bottom: -100%;
        }
}



/* ---------------------
    06 - XXL
        Valeurs
            Bottom
                Vh
--------------------- */

@media (min-width: 1400px) {
    .b-xxl-50vh {
        bottom: 50vh;
    }

        .b-xxl-n50vh {
            bottom: -50vh;
        }

    .b-xxl-100vh {
        bottom: 100vh;
    }

        .b-xxl-n100vh {
            bottom: -100vh;
        }
}


/* ---------------------
    06 - XXL
        Valeurs
            Bottom
                Pixels
--------------------- */

@media (min-width: 1400px) {
    .b-xxl-3px {
        bottom: 3px;
    }

        .b-xxl-n3px {
            bottom: -3px;
        }

    .b-xxl-5px {
        bottom: 5px;
    }

        .b-xxl-n5px {
            bottom: -5px;
        }

    .b-xxl-8px {
        bottom: 8px;
    }

        .b-xxl-n8px {
            bottom: -8px;
        }

    .b-xxl-10px {
        bottom: 10px;
    }

        .b-xxl-n10px {
            bottom: -10px;
        }

    .b-xxl-15px {
        bottom: 15px;
    }

        .b-xxl-n15px {
            bottom: -15px;
        }

    .b-xxl-30px {
        bottom: 30px;
    }

        .b-xxl-n30px {
            bottom: -30px;
        }

    .b-xxl-40px {
        bottom: 40px;
    }

        .b-xxl-n40px {
            bottom: -40px;
        }

    .b-xxl-50px {
        bottom: 50px;
    }

        .b-xxl-n50px {
            bottom: -50px;
        }

    .b-xxl-60px {
        bottom: 60px;
    }

        .b-xxl-n60px {
            bottom: -60px;
        }

    .b-xxl-70px {
        bottom: 70px;
    }

        .b-xxl-n70px {
            bottom: -70px;
        }

    .b-xxl-80px {
        bottom: 80px;
    }

        .b-xxl-n80px {
            bottom: -80px;
        }

    .b-xxl-90px {
        bottom: 90px;
    }

        .b-xxl-n90px {
            bottom: -90px;
        }

    .b-xxl-100px {
        bottom: 100px;
    }

        .b-xxl-n100px {
            bottom: -100px;
        }
}



/* ---------------------
    06 - XXL
        Valeurs
            Left
                Base
--------------------- */

@media (min-width: 1400px) {
    .l-xxl-0 {
        left: 0;
    }

    .l-xxl-auto {
        left: auto;
    }
}



/* ---------------------
    06 - XXL
        Valeurs
            Left
                Pourcent
--------------------- */

@media (min-width: 1400px) {
    .l-xxl-50 {
        left: 50%;
    }

        .l-xxl-n50 {
            left: -50%;
        }

    .l-xxl-100 {
        left: 100%;
    }

        .l-xxl-n100 {
            left: -100%;
        }
}



/* ---------------------
    06 - XXL
        Valeurs
            Left
                Vw
--------------------- */

@media (min-width: 1400px) {
    .l-xxl-50vw {
        left: 50vw;
    }

        .l-xxl-n50vw {
            left: -50vw;
        }

    .l-xxl-100vw {
        left: 100vw;
    }

        .l-xxl-n100vw {
            left: -100vw;
        }
}


/* ---------------------
    06 - XXL
        Valeurs
            Left
                Pixels
--------------------- */

@media (min-width: 1400px) {
    .l-xxl-3px {
        left: 3px;
    }

        .l-xxl-n3px {
            left: -3px;
        }

    .l-xxl-5px {
        left: 5px;
    }

        .l-xxl-n5px {
            left: -5px;
        }

    .l-xxl-8px {
        left: 8px;
    }

        .l-xxl-n8px {
            left: -8px;
        }

    .l-xxl-10px {
        left: 10px;
    }

        .l-xxl-n10px {
            left: -10px;
        }

    .l-xxl-15px {
        left: 15px;
    }

        .l-xxl-n15px {
            left: -15px;
        }

    .l-xxl-30px {
        left: 30px;
    }

        .l-xxl-n30px {
            left: -30px;
        }

    .l-xxl-40px {
        left: 40px;
    }

        .l-xxl-n40px {
            left: -40px;
        }

    .l-xxl-50px {
        left: 50px;
    }

        .l-xxl-n50px {
            left: -50px;
        }

    .l-xxl-60px {
        left: 60px;
    }

        .l-xxl-n60px {
            left: -60px;
        }

    .l-xxl-70px {
        left: 70px;
    }

        .l-xxl-n70px {
            left: -70px;
        }

    .l-xxl-80px {
        left: 80px;
    }

        .l-xxl-n80px {
            left: -80px;
        }

    .l-xxl-90px {
        left: 90px;
    }

        .l-xxl-n90px {
            left: -90px;
        }

    .l-xxl-100px {
        left: 100px;
    }

        .l-xxl-n100px {
            left: -100px;
        }

        /* Spécifique : Pour masquer un élément hors de la vue mais l'avoir dans le DOM pour le SEO */
        .l-xxl-n10000px {
            left: -10000px;
        }
}



/* ---------------------
    06 - XXL
        Z-index
--------------------- */

@media (min-width: 1400px) {
    .z-xxl-0 {
        z-index: 0;
    }

    .z-xxl-1 {
        z-index: 1;
    }

        .z-xxl-n1 {
            z-index: -1;
        }
}