/*561010*/
h2,h3.order{
text-align: center;
}


.grid-container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  gap: 1px 1px;
  grid-template-areas: "catalogue";
}

.catalogue {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  gap: 1px 1px;
  grid-template-areas: "rayon";
  grid-area: catalogue;
}

.rayon { grid-area: rayon; }




@media all and (-ms-high-contrast:none) {
  .grid-container {
    display: -ms-grid;
    -ms-grid-columns: 1fr;
    -ms-grid-rows: 1fr;
  }

  .catalogue {
    display: -ms-grid;
    -ms-grid-columns: 1fr;
    -ms-grid-rows: 1fr;
    -ms-grid-row: 1;
    -ms-grid-row-span: 1;
    -ms-grid-column: 1;
    -ms-grid-column-span: 1;
    background-color: rgba( 255, 255, 255, .8);
  box-shadow: 0 2px 20px 0 rgba(0, 0, 0, .1);
    list-style-type: none;
  margin-bottom: 10px;
  padding: 15px;
  width: 99%;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 20px;
  grid-column-start:1;
  grid-column-end:4;
  grid-gap: 10px;
  font-family: 'Oswald', sans-serif;
  font-style:oblique;
  border: 2px solid #E2E2E2;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  -khtml-border-radius: 10px;
  border-radius: 10px;
  }

  .rayon {
    -ms-grid-row: 1;
    -ms-grid-row-span: 1;
    -ms-grid-column: 1;
    -ms-grid-column-span: 1;
  }

}



div .catalogue {
  background-color: rgba( 255, 255, 255, .8);
  box-shadow: 0 2px 20px 0 rgba(0, 0, 0, .1);
    list-style-type: none;
  margin-bottom: 10px;
  padding: 15px;
  width: 99%;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 20px;
  grid-column-start:1;
  grid-column-end:4;
  grid-gap: 10px;
  font-family: 'Oswald', sans-serif;
  font-style:oblique;
  border: 2px solid #E2E2E2;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  -khtml-border-radius: 10px;
  border-radius: 10px;
}



      /* Grid container */
      #p-grid {
        width:100%; /*ajout*/
        max-width: 1200px;
        margin: 0 auto;
        display: grid;
        
        /* Width of columns */
/*        grid-template-columns: 25% 25% 25% 25%;*/
        grid-template-columns: 33% 33% 33%;
      }
      /* Product items */
      div.p-grid-in, .p-grid-rayon {
        box-sizing: border-box;
        margin: 2px; 
        padding: 5px;
        height:150px;
        /*background: #f2f7ff;*/
        background: #fff;
          border: 2px solid #E2E2E2;
        -moz-border-radius: 10px;
        -webkit-border-radius: 10px;
        -khtml-border-radius: 10px;
        border-radius: 10px;
      }

      div.p-grid-in {
        position: relative;
      }


.p-grid-rayon {
  color: #FFF;
  background-color:#561010;
  text-decoration: none;
  font-size:25px;
  text-align: center;
  vertical-align: middle;
  padding-top : 15%;
  width:100%;
  height:150px;
  position: relative;
  font-family: 'Oswald', sans-serif;
  
}
      img.p-img {
        float:left; /*ajout*/
        width: 80px;
        height: 80px;
        padding-right:3px;
      }
      div.p-name {
        /*color:#561010;*/
        font-weight: bold;
        font-size: 1.1em;
        font-family: 'Oswald', sans-serif;

      }
      div.p-price {
        /*color: #561010;*/
        text-align:center;
        font-family: 'Oswald', sans-serif;

      }
      div.p-desc {
        color: #888;
        font-size: 90%;
        line-height: 100%;
        font-family: 'Oswald', sans-serif;

      }
      div.p-add {
        display:block;  
        /*background: #f46b41;*/
        color: #fff;
        border: none;
        width: auto;
        padding: 0px;
        margin:10px 5px 5px 5px;
        font-size: 1.1em;
        font-weight: bold;
        cursor: pointer;
        text-align: right;
        position: absolute;
        bottom:0;
        right:10px;
 }


.num-pallets-input{
  /*color:#561010; */
  border:none;
  width: 40px;
  font-heigt=130%;
  border-bottom: 2px solid #E2E2E2;
  border-left: 2px solid #E2E2E2;
  border-right: 2px solid #E2E2E2;
  text-align: center;
 
}
      
 .row-total-input{
 /*color:#561010;*/
 width: 60px;
 text-align: center;
 font-heigt=130%;
 font-weight:bold;
 border:none;
 }
 
.price-per-pallet{
  margin-top: auto;
  padding-bottom: 5px;
  padding-right:2px;
  /*text-align: right;*/
  color:green;
  font-weight:bold;
  font-family: 'Oswald', sans-serif;  
}

strong.unite{
  color:#2C2C2C;
  font-size:80%;
  font-weight:lighter;
}

strong.monnaie{
  color:green;
  font-size:100%;
  font-weight:lighter;
}

.price{
  margin-top: auto;
  padding-bottom: 5px;
  padding-right:2px;
  /*text-align: right;*/
  color:green;
  font-family: 'Oswald', sans-serif;  
}

.client{
  color:#2C2C2C;
  
}

input[type=button], input[type=submit], input[type=reset], button, .button {
	padding: 10px 25px;
	margin-top: 2em;
	display: inline-block;
	float:right;
 color: #ffffff;
	font-size: 80%;
	cursor: pointer;
	margin-right:10px;
 /*background: #561010;*/
	background: #561010;
	background: linear-gradient(top, #561010 0%, #3d0000 100%);
	background: -moz-linear-gradient(top, #561010 0%, #3d0000 100%);
	background: -webkit-linear-gradient(top, #561010 0%, #3d0000 100%);
	background: -o-linear-gradient(top, #561010 0%, #3d0000 100%);
	border: 1px solid #561010;
	border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	-o-border-radius: 10px;
	box-shadow:0px 0px 2px 1px rgba(0, 0, 0, 0.25), inset 1px 1px 0px 0px rgba(255, 255, 255, 0.25);
	-moz-box-shadow:0px 0px 2px 1px rgba(0, 0, 0, 0.25), inset 1px 1px 0px 0px rgba(255, 255, 255, 0.25);
	-webkit-box-shadow:0px 0px 2px 1px rgba(0, 0, 0, 0.25), inset 1px 1px 0px 0px rgba(255, 255, 255, 0.25);
	-o-box-shadow:0px 0px 2px 1px rgba(0, 0, 0, 0.25), inset 1px 1px 0px 0px rgba(255, 255, 255, 0.25);
	text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.50);
}
input[type=button]:hover, input[type=submit]:hover, input[type=reset]:hover, button:hover, .button:hover {
	background: linear-gradient(top, #702a2a 0%, #561010 100%);
	background: -moz-linear-gradient(top, #702a2a 0%, #561010 100%);
	background: -webkit-linear-gradient(top, #702a2a 0%, #561010 100%);
	background: -o-linear-gradient(top, #702a2a 0%, #561010 100%);
}
input[type=button]:active, input[type=submit]:active, input[type=reset]:active, button:active, .button:active{
	opacity:0.8;
} 

.grid-validbutton {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  gap: 1px 1px;
  grid-template-areas: "content_button";
}

.content_button {
 grid-area: content_button;

 }
      /* Responsive */
      @media only screen and (max-width: 1024px) {
        #p-grid { grid-template-columns: 50% 50%; }
      }
      @media only screen and (max-width: 600px) {
        #p-grid { grid-template-columns: 100%; }



      }