.container {
  width: 90%;
  min-width: 320px;
  max-width: 980px;
  position: relative;
  margin: 0 auto;
}

.ligne {
  width: 100%;
  clear: both;
}
.ligne::after {
  content: "";
  display: block;
  clear: both;
}
.ligne:first-child {
  margin-left: 0;
}


/*Forms
---------------------------------------------------------------*/
form .ligne {
  margin: 1rem 0;
}

/* input[type="email"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="url"],
select,
textarea {
  width: 100%;
  padding: 6px 2px;
  border: 1px solid #ccc;
  border-radius: 1px;
  font-size: 12px;
}
textarea {
  height: 120px;
}
input[type="email"]:focus,
input[type="number"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="text"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
select:focus,
textarea:focus {
  box-shadow: 1px 1px 3px #888 inset;
} */



.colx1 ,.colxl1 , .colxm1 , .colxs1 ,
.colx2 ,.colxl2 , .colxm2 , .colxs2 ,
.colx3 ,.colxl3 , .colxm3 , .colxs3 ,
.colx4 ,.colxl4 , .colxm4 , .colxs4 ,
.colx5 ,.colxl5 , .colxm5 , .colxs5 ,
.colx6 ,.colxl6 , .colxm6 , .colxs6 ,
.colx7 ,.colxl7 , .colxm7 , .colxs7 ,
.colx8 ,.colxl8 , .colxm8 , .colxs8 ,
.colx9 ,.colxl9 , .colxm9 , .colxs9 ,
.colx10,.colxl10, .colxm10, .colxs10,
.colx11,.colxl11, .colxm11, .colxs11,
.colx12,.colxl12, .colxm12, .colxs12 {
  width: 100%;
  float: none;
  min-height: 1px;
  position: relative;
}

.colx1  { width: 8.3333333333%; float: left; }
.colx2  { width: 16.6666666667%; float: left; }
.colx3  { width: 25%; float: left; }
.colx4  { width: 33.3333333334%; float: left; }
.colx5  { width: 41.6666666667%; float: left; }
.colx6  { width: 50%; float: left; }
.colx7  { width: 58.3333333333%; float: left; }
.colx8  { width: 66.6666666667%; float: left; }
.colx9  { width: 75%; float: left; }
.colx10 { width: 83.3333333333%; float: left; }
.colx11 { width: 91.6666666667%; float: left; }
.colx12 { width: 100%; float: left; }


@media all and (min-width: 480px) {
  .colxs1  { width: 8.3333333333%; float: left; }
  .colxs2  { width: 16.6666666667%; float: left; }
  .colxs3  { width: 25%; float: left; }
  .colxs4  { width: 33.3333333334%; float: left; }
  .colxs5  { width: 41.6666666667%; float: left; }
  .colxs6  { width: 50%; float: left; }
  .colxs7  { width: 58.3333333333%; float: left; }
  .colxs8  { width: 66.6666666667%; float: left; }
  .colxs9  { width: 75%; float: left; }
  .colxs10 { width: 83.3333333333%; float: left; }
  .colxs11 { width: 91.6666666667%; float: left; }
  .colxs12 { width: 100%; float: left; }
}
@media all and (min-width: 600px) {
  .colxm1  { width: 8.3333333333%; float: left; }
  .colxm2  { width: 16.6666666667%; float: left; }
  .colxm3  { width: 25%; float: left; }
  .colxm4  { width: 33.3333333334%; float: left; }
  .colxm5  { width: 41.6666666667%; float: left; }
  .colxm6  { width: 50%; float: left; }
  .colxm7  { width: 58.3333333333%; float: left; }
  .colxm8  { width: 66.6666666667%; float: left; }
  .colxm9  { width: 75%; float: left; }
  .colxm10 { width: 83.3333333333%; float: left; }
  .colxm11 { width: 91.6666666667%; float: left; }
  .colxm12 { width: 100%; float: left; }
}
@media all and (min-width: 800px) {
  .colxl1  { width: 8.3333333333%; float: left; }
  .colxl2  { width: 16.6666666667%; float: left; }
  .colxl3  { width: 25%; float: left; }
  .colxl4  { width: 33.3333333334%; float: left; }
  .colxl5  { width: 41.6666666667%; float: left; }
  .colxl6  { width: 50%; float: left; }
  .colxl7  { width: 58.3333333333%; float: left; }
  .colxl8  { width: 66.6666666667%; float: left; }
  .colxl9  { width: 75%; float: left; }
  .colxl10 { width: 83.3333333333%; float: left; }
  .colxl11 { width: 91.6666666667%; float: left; }
  .colxl12 { width: 100%; float: left; }

  .desktop_large {display: block;}
  .desktop_large_ib {display: inline-block;}

  .desktop {display: block;}
  .desktop_ib {display: inline-block;}

  .tablet {display: none;}
  .tablet_ib {display: none;}

  .phone {display: none;}
  .phone_ib {display: none;}
}


@media all and (max-width: 799px) {
  .desktop_large {display: none;}
  .desktop_large_ib {display: none;}

  .desktop {display: block;}
  .desktop_ib {display: inline-block;}

  .tablet {display: block;}
  .tablet_ib {display: inline-block;}

  .phone {display: none;}
  .phone_ib {display: none;}
}

@media all and (max-width: 479px) {
  .container {
    width: 100%;
    padding: 0 2%;
  }
  /* input[type="email"],
  input[type="number"],
  input[type="search"],
  input[type="text"],
  input[type="tel"],
  input[type="url"],
  input[type="password"],
  textarea, select {
    width: 98%;
    padding: 10px 4px;
    margin: 0 1%;
  } */

  .desktop_large {display: none;}
  .desktop_large_ib {display: none;}

  .desktop {display: none;}
  .desktop_ib {display: none}

  .tablet {display: block;}
  .tablet_ib {display: inline-block;}

  .phone {display: block;}
  .phone_ib {display: inline-block;}
}