/**
 * Grille responsive V2
 *
 * Variante de la version 1
 * Dans cette version le conteneur est .grid
 * Les colonnes sont des  et leur taille est définie pour chaque dimension d'écran .[ecran]-s[taille]
 *  - [ecran] peut etre un des valeurs suivantes ls, sc, tl, ta, sm
 *  - [taille] un entier de 1 à 12 inclus.
 *
 * Si aucune taille n'est définie, les colonnes feront la taille maximum (12colonnes) 
 *
 * Pour aligner verticalement les colonnes, grid peur recevoir une class additionnelle valant middle, top, ou bottom.
 *
 */

.grid {
    display: block;
    position: relative;
}

.grid .m1 {
    padding-left: 0.6%;
    padding-right: 0.6%;
}

.grid .ml-s1 {
    margin-left: 8.3333%;
}
.grid .ml-s3 {
    margin-left: 24.9999%;
}
.grid .mr-s3 {
    margin-right: 24.9999%;
}

.grid .s1 {
    width: 8.3333%;
}
.grid .s2 {
    width: 16.6666%;
}
.grid .s3 {
    width: 24.9999%;
}
.grid .s4 {
    width: 33.3332%;
}
.grid .s5 {
    width: 41.6665%;
}
.grid .s6 {
    width: 49.9998%;
}
.grid .s7 {
    width: 58.3331%;
}
.grid .s8 {
    width: 66.6664%;
}
.grid .s9 {
    width: 74.9997%;
}
.grid .s10 {
    width: 83.3333%;
}
.grid .s11 {
    width: 91.6663%;
}
.grid .s12 {
    width: 99.9996%;
}

/** Large Screen **/
@media screen and (min-width: 1200px) {

    .grid [class*="ls-s"] {
        display: inline-block;
        box-sizing: border-box;
    }

    .grid .ls-s1 {
        width: 8.3333%;
    }
    .grid .ls-s2 {
        width: 16.6666%;
    }
    .grid .ls-s3 {
        width: 24.9999%;
    }
    .grid .ls-s4 {
        width: 33.3332%;
    }
    .grid .ls-s5 {
        width: 41.6665%;
    }
    .grid .ls-s6 {
        width: 49.9998%;
    }
    .grid .ls-s7 {
        width: 58.3331%;
    }
    .grid .ls-s8 {
        width: 66.6664%;
    }
    .grid .ls-s9 {
        width: 74.9997%;
    }
    .grid .ls-s10 {
        width: 83.333%;
    }
    .grid .ls-s11 {
        width: 91.6663%;
    }
    .grid .ls-s12 {
        width: 99.9996%;
    }

    .grid .ls-ml-s1 {
        margin-left: 8.3333%;
    }
    .grid .ls-ml-s3 {
        margin-left: 24.9999%;
    }

}

/** Screen **/
@media screen and (min-width: 979px) and (max-width:1199px) {

    .grid [class*="sc-s"] {
        display: inline-block;
        box-sizing: border-box;
    }

    .grid .sc-s1 {
        width: 8.3333%;
    }
    .grid .sc-s2 {
        width: 16.6666%;
    }
    .grid .sc-s3 {
        width: 24.9999%;
    }
    .grid .sc-s4 {
        width: 33.3332%;
    }
    .grid .sc-s5 {
        width: 41.6665%;
    }
    .grid .sc-s6 {
        width: 49.9998%;
    }
    .grid .sc-s7 {
        width: 58.3331%;
    }
    .grid .sc-s8 {
        width: 66.6664%;
    }
    .grid .sc-s9 {
        width: 74.9997%;
    }
    .grid .sc-s10 {
        width: 83.333%;
    }
    .grid .sc-s11 {
        width: 91.6663%;
    }
    .grid .sc-s12 {
        width: 99.9996%;
    }

    .grid .sc-ml-s1 {
        margin-left: 8.3333%;
    }
    .grid .sc-ml-s3 {
        margin-left: 24.9999%;
    }

}

/**  Tablette landscape */
@media screen and (min-width: 768px) and (max-width:978px) {

    .grid [class*="tl-s"] {
        display: inline-block;
        box-sizing: border-box;
    }

    .grid .tl-s1 {
        width: 8.3333%;
    }
    .grid .tl-s2 {
        width: 16.6666%;
    }
    .grid .tl-s3 {
        width: 24.9999%;
    }
    .grid .tl-s4 {
        width: 33.3332%;
    }
    .grid .tl-s5 {
        width: 41.6665%;
    }
    .grid .tl-s6 {
        width: 49.9998%;
    }
    .grid .tl-s7 {
        width: 58.3331%;
    }
    .grid .tl-s8 {
        width: 66.6664%;
    }
    .grid .tl-s9 {
        width: 74.9997%;
    }
    .grid .tl-s10 {
        width: 83.333%;
    }
    .grid .tl-s11 {
        width: 91.6663%;
    }
    .grid .tl-s12 {
        width: 99.9996%;
    }

    .grid .tl-ml-s1 {
        margin-left: 8.3333%;
    }
    .grid .tl-ml-s3 {
        margin-left: 24.9999%;
    }

}

/** Tablette */
@media screen and (min-width: 480px) and (max-width:767px) {

    .grid [class*="ta-s"] {
        display: inline-block;
        box-sizing: border-box;
    }

    .grid .ta-s1 {
        width: 8.3333%;
    }
    .grid .ta-s2 {
        width: 16.6666%;
    }
    .grid .ta-s3 {
        width: 24.9999%;
    }
    .grid .ta-s4 {
        width: 33.3332%;
    }
    .grid .ta-s5 {
        width: 41.6665%;
    }
    .grid .ta-s6 {
        width: 49.9998%;
    }
    .grid .ta-s7 {
        width: 58.3331%;
    }
    .grid .ta-s8 {
        width: 66.6664%;
    }
    .grid .ta-s9 {
        width: 74.9997%;
    }
    .grid .ta-s10 {
        width: 83.333%;
    }
    .grid .ta-s11 {
        width: 91.6663%;
    }
    .grid .ta-s12 {
        width: 99.9996%;
    }

    .grid .ta-ml-s1 {
        margin-left: 8.3333%;
    }
    .grid .ta-ml-s3 {
        margin-left: 24.9999%;
    }

}

/** Smartphone */
@media screen and (max-width:479px) {
    
    .grid [class*="sm-s"] {
        display: inline-block;
        box-sizing: border-box;
    }

    .grid .sm-s1 {
        width: 8.3333%;
    }
    .grid .sm-s2 {
        width: 16.6666%;
    }
    .grid .sm-s3 {
        width: 24.9999%;
    }
    .grid .sm-s4 {
        width: 33.3332%;
    }
    .grid .sm-s5 {
        width: 41.6665%;
    }
    .grid .sm-s6 {
        width: 49.9998%;
    }
    .grid .sm-s7 {
        width: 58.3331%;
    }
    .grid .sm-s8 {
        width: 66.6664%;
    }
    .grid .sm-s9 {
        width: 74.9997%;
    }
    .grid .sm-s10 {
        width: 83.333%;
    }
    .grid .sm-s11 {
        width: 91.6663%;
    }
    .grid .sm-s12 {
        width: 99.9996%;
    }

    .grid .sm-ml-s1 {
        margin-left: 8.3333%;
    }
    .grid .sm-ml-s3 {
        margin-left: 24.9999%;
    }

}