/** GRILLE DE 12 **/
/** COLONNE **/
/** http://www.responsivegridsystem.com/playground/ **/

/* MOBILE */
[class*="col-"] 
{
    width: 100%;
}

/* INITIALISATION COLONNE  */
.col 
{
  display: block;
  float:left;
  /*margin: 1.5% 0 1.5% 0%;*/
    /*margin: 1.5% 0 20px 0%;*/
    margin-top:1.5%;
    margin-right:0;
    /*margin-bottom:20px;*/
    margin-left:0%;
}


/*  GROUPING  */
.group:before, .group:after { content:""; display:table; }
.group:after { clear:both;}
.group { zoom:1; /* For IE 6/7 */ }

/** ROW **/
.row {
  clear: both;
  padding: 0px;
  margin: 0px;
}

/** COLONNE VIDE PUSH ON AFFICHE PAS **/
.push {display: none;}


/** possibilité d'une double colonne en format petit **/
@media only screen and (min-width: 300px) and (max-width:449px) 
{
    /*.col { margin-left:3%; }
    .col:first-child { margin-left: 0; }*/
  
    .col-m-12 {width: 100%; margin-left:0} /** pourquoi ? **/
    .col-m-6 {width: 48.5%; margin-left:3%;}
    .col-m-6:nth-child(2n+1)
    { 
      clear:left; 
      margin-left: 0;
    }
}

/** TABLETTE PORTRAIT  **/  
@media only screen and (min-width: 450px) and (max-width:767px) 
{
    .col { margin-left:3%; }
    .col:first-child { margin-left: 0; }
  
    .col-p-12 {width: 100%; margin-left:0;clear:left;} /** pourquoi ? **/
    .col-p-11 {width: 91.41%;}
    .col-p-10 {width: 82.83%;}
    .col-p-9 {width: 74.25%;}
    .col-p-8 {width: 65.66%;}
    .col-p-7 {width: 57.08%;}
    .col-p-6 {width: 48.5%;}
    .col-p-5 {width: 39.91%;}
    .col-p-4 {width: 31.33%;}
    .col-p-3 {width: 22.75%;}
    .col-p-2 {width: 14.16%;}
    .col-p-1 {width: 5.583%;}

    .col-p-6:nth-child(2n+1), .col-p-4:nth-child(3n+1), .col-p-3:nth-child(4n+1), .col-p-2:nth-child(6n+1)
    { 
      clear:left; 
      margin-left: 0;
    }

    /** laisse une colonne vide **/ 
    .push { visibility:hidden; display:block;}

    .col-1-9 {width: 8.444%; margin-top:0;}
    .col-2-9 {width: 19.88%; margin-top:0;}
    .col-3-9 {width: 31.33%; margin-top:0;}
    .col-4-9 {width: 42.77%; margin-top:0;}
    .col-5-9 {width: 54.22%%; margin-top:0;}
    .col-6-9 {width: 65.66%; margin-top:0;}
    .col-7-9 {width:77.11%; margin-top:0;}
    .col-8-9 {width: 88.55%%; margin-top:0;}
    .col-9-9 {width:100%; margin-top:0;}

    /** gestion des listes de bloc identique à l'intérieur d'une row */
    .col-3-9:nth-child(3n+1)
    { 
      clear:left; 
      margin-left: 0;
    }

    /** double colonne à droite **/
    .col-p-12.right .bloc {width:48.5%;float:left;margin-left:3%;}
    .col-p-12.right .bloc:first-child {margin-left:0;}
    .col-p-12.right .bloc:nth-child(2n+1) {clear:left;margin-left:0;}

}



/* TABLETTE PAYSAGE */  
@media only screen and (min-width: 768px) and (max-width:1023px) 
{
    .col { margin-left:3%; }
    .col:first-child { margin-left: 0; }

    .col.right {margin-left:0;}
  
    .col-l-12 {width: 100%; margin-left:0;}
    .col-l-11 {width: 91.41%;}
    .col-l-10 {width: 82.83%;}
    .col-l-9 {width: 74.25%;}
    .col-l-8 {width: 65.66%;}
    .col-l-7 {width: 57.08%;}
    .col-l-6 {width: 48.5%;}
    .col-l-5 {width: 39.91%;}
    .col-l-4 {width: 31.33%;}
    .col-l-3 {width: 22.75%;}
    .col-l-2 {width: 14.16%;}
    .col-l-1 {width: 5.583%;}


    .col-l-6:nth-child(2n+1), .col-l-4:nth-child(3n+1), .col-l-3:nth-child(4n+1), .col-l-2:nth-child(6n+1)
    { 
      clear:left; 
      margin-left: 0;
    }

    /** laisse une colonne vide **/ 
    .push { visibility:hidden; display:block;}
}

/** DESKTOP **/

@media only screen and (min-width: 1024px)
{
    .col { margin-bottom:1.5%; }
    .col { margin-left:3%; }
    .col:first-child { margin-left: 0; }


    .col-12 {width: 100%;}
    .col-11 {width: 91.41%;}
    .col-10 {width: 82.83%;}
    .col-9 {width: 74.25%;}
    .col-8 {width: 65.66%;}
    .col-7 {width: 57.08%;}
    .col-6 {width: 48.5%;}
    .col-5 {width: 39.91%;}
    .col-4 {width: 31.33%;}
    .col-3 {width: 22.75%;}
    .col-2 {width: 14.16%;}
    .col-1 {width: 5.583%;}

    /** gestion des listes de bloc identique à l'intérieur d'une row */
    .col-6:nth-child(2n+1), .col-4:nth-child(3n+1), .col-3:nth-child(4n+1), .col-2:nth-child(6n+1)
    { 
      clear:left; 
      margin-left: 0;
    }

    .col-1-9 {width: 8.444%; margin-top:0;}
    .col-2-9 {width: 19.88%; margin-top:0;}
    .col-3-9 {width: 31.33%; margin-top:0;}
    .col-4-9 {width: 42.77%; margin-top:0;}
    .col-5-9 {width: 54.22%%; margin-top:0;}
    .col-6-9 {width: 65.66%; margin-top:0;}
    .col-7-9 {width:77.11%; margin-top:0;}
    .col-8-9 {width: 88.55%%; margin-top:0;}
    .col-9-9 {width:100%; margin-top:0;}

    /** gestion des listes de bloc identique à l'intérieur d'une row */
    .col-3-9:nth-child(3n+1)
    { 
      clear:left; 
      margin-left: 0;
    }

    /** laisse une colonne vide **/ 
    .push { visibility:hidden; display:block;}

}