/** ----------------- Grille ------------------ **/
/** Pour en savoir plus sur le système de grille  https://comvdq.atlassian.net/wiki/spaces/EX/pages/2590572545/Fondations+E400#Syst%C3%A8me-de-grille **/

.line::before,.line::after {
    content: " ";
    display: table
}

.line::after {
    clear: both
}

.group,.lastGroup,.lastUnit,.unit {
    overflow: hidden;
    background-clip: padding-box !important;
    float: left
}
.rightUnit {
    float: right;
}

.lastUnit,.unit {
    padding-left: 10px;
    padding-right: 10px
}

.lastUnit,.lastGroup {
    float: none;
    width: auto
}

.col12of12{
    width: 100%;
}
.col11of12 {
    width: calc((100% / 12) * 11);
}
.col10of12 {
    width: calc((100% / 12) * 10);
}
.col9of12 {
    width: 75%;
}
.col8of12 {
    width: calc((100% / 12) * 8);
}
.col7of12 {
    width: calc((100% / 12) * 7);
}
.col6of12 {
    width: 50%;
}
.col5of12 {
    width: calc((100% / 12) * 5);
}
.col4of12 {
    width: calc((100% / 12) * 4);
}
.col3of12 {
    width: 25%;
}
.col2of12 {
    width: calc((100% / 12) * 2);
}
.col1of12 {
    width: calc(100% / 12);
}
.col6of6 {
    width: 100%
}
.col5of6 {
    width: calc((100% / 6) * 5);
}
.col4of6 {
    width: calc((100% / 6) * 4);
}
.col3of6 {
    width: 50%;
}
.col2of6 {
    width: calc((100% / 6) * 2);
}
.col1of6 {
    width: calc(100% / 6);
}
.col4of4 {
    width: 100%
}

.col3of4 {
    width: 75%
}

.col2of4 {
    width: 50%
}

.col1of4 {
    width: 25%
}
.col3of3 {
    width: 100%
}
.col2of3 {
    width: calc((100% / 3) * 2);
}

.col1of3 {
    width: calc(100% / 3);
}
.col2of2 {
    width: 100%
}

.col1of2 {
    width: 50%
}

.col1of1 {
    width: 100%
}

@media screen and (max-width: 1024px) {
    .col1of4\@tablet {
        width:25%
    }

    .col1of3\@tablet {
        width: 33.33333333%
    }

    .col1of2\@tablet {
        width: 50%
    }

    .col1of1\@tablet {
        width: 100%
    }
}

@media screen and (max-width: 960px) {
    .col2of6,.col4of12 {
        width: 50%;
    }
    .col5of12, .col6of12, .col7of12 {
        width: 100%;
    }
    .col1of4\@xlphone {
        width:25%
    }

    .col1of3\@xlphone {
        width: 33.33333333%
    }

    .col1of2\@xlphone {
        width: 50%
    }

    .col1of1\@xlphone {
        width: 100%
    }
}

@media screen and (max-width: 640px) {
    .col1of2,.col1of3,.col1of4,.col2of3,.col2of4,.col3of4,.col2of6,.col3of6,.col4of6,.col5of6,.col3of12,.col4of12,.col5of12,.col6of12,.col7of12,.col8of12,.col9of12,.col10of12,.col11of12 {
        width:100%
    }

    .col1of6,.col1of12,.col2of12 {
        width: 50%
    }

    .col1of2.nochange {
        width: 50%
    }

    .col1of3.nochange {
        width: 33.33333333%
    }

    .col1of4\@phone {
        width: 25%
    }

    .col1of3\@phone {
        width: 33.33333333%
    }

    .col1of2\@phone {
        width: 50%
    }

    .col1of1\@phone {
        width: 100%
    }
}

@media screen and (max-width: 500px) {
    .unit,.group {
        float:none;
        display: block
    }

    .nochange {
        float: left
    }

    .col2of8,.col6of8 {
        width: 100%
    }
}