.li_commande{
   text-align: center;
   float: left;
   padding: 8px;
   border: solid 1px #CCC;
   width: 270px;
   box-shadow: 5px 5px 8px #333;
   margin:5px;
}
.li_code_promo{margin-left:25px;}

.btn.btn_valide{color: white;background-color: #1a5faf; border: solid 2px #1a5faf;}
.btn.btn_valide:hover{opacity: .8;color: white;}
.btn.btn_cancel{color: white;background-color: #000; border: solid 2px #000;}
.btn.btn_cancel:hover{opacity: .8;color: white;}

                              /************************/
                              /*        Login         */
                              /************************/
#login{
   margin:auto;
   position:relative;
   width:400px;
   padding: 10px;
   text-align:center;
}
#bloc_text #login h1{font-size:22px;padding-left:0}
#bloc_text #login h1:before{content:none;}
#loginform{width:400px;}
#login .nform{margin:5px 0px;display:flex}
#login .nform label{
   display: block;
  
   width: 130px;
   
   line-height: 40px;
   color: white;
   font-weight: bold;
  
   
   background: #1A5F9B;
   font-size: 15px;
   
    margin: 0;
}
#login .nform.double label{padding-top:1px;height: 50px;}
#login .nform input{
   display: inline-block;
   width: 255px;
   height: 40px;
   padding-left: 10px;
   font-weight: bold;
   border: none;
   color: #fff;
   font-size: 16px;
   background: #1f2026;
   
   
}
#login .iform{
   padding: 4px 10px;
   border-radius: 5px;
   color: white;
   font-weight: bold;
   font-size: 14px;
   min-width: 135px;
   border: solid 1px #CCC;
   box-shadow: 5px 5px 8px #999;
   margin-bottom: 10px;
}

                              /************************/
                              /*       Boutique       */
                              /************************/

.pending{background-color: #EEE; }
.completed{font-weight:bold; background-color: #FFEAD0;}
.cancelled{background-color: #DDD; }
#main .cancelled a{color:#7EC7FF;}
.delivered{background-color: #C0EDE0;font-weight: bold;}
#main .delivered a{color: #7EC7FF;}
.check_status{background-color:#F60;}

#bloc_menu_accueil{text-align:center;    margin: 50px 0;position:relative
}
.menu_accueil{display:inline-block;background:#1A5FAF;color: #fff;
   font-size: 24px;width:300px;margin:20px;}
   .menu_accueil:hover{background:#BB6301}
  .btn_accueil{background:#666666;color:#fff;position:absolute;font-size: 18px;padding: 5px 20px;top:0} 
  .bloc_commande{text-align:center;} 
  .bloc_contact{max-width:500px;margin:auto;}
  .bloc_contact p label{width:200px;display:inline-block;vertical-align: top;}
  .bloc_contact p{margin:20px 0;}
  .bloc_contact input[type='text']{width:265px;}
  .bloc_contact select{width:285px;}
  .bloc_contact textarea{width:265px;height:140px} 
  .table_fac,.table_cmd{margin: 20px auto;max-width: 1400px;}
  
  .table_fac .header_table .cell_table,.table_cmd .header_table .cell_table{font-weight:bold;font-size:18px;}
  .table_fac .header_table,.table_fac .line_table{
   display: grid; 
   grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr; 
   grid-template-rows: 1fr; 
   gap: 0px 0px; 
   grid-template-areas: 
     "Numéro Date Montant mode_paiement details tel print"; 
     border-bottom:1px solid #000;
 }
 .table_cmd .header_table,.table_cmd .line_table{
   display: grid; 
   grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr ; 
   grid-template-rows: 1fr; 
   gap: 0px 0px; 
   grid-template-areas: 
     "Numéro Date Montant mode_paiement attente valide livre details renouv tel print"; 
     border-bottom:1px solid #000;
 }
 .Numéro { grid-area: Numéro; }
 .Date { grid-area: Date; }
 .Montant { grid-area: Montant; }
 .mode_paiement { grid-area: mode_paiement; }
 .details { grid-area: details; }
 .tel { grid-area: tel; }
 .print { grid-area: print; }
 .attente { grid-area: attente; }
 .valide { grid-area: valide; }
 .livre { grid-area: livre; }
 .renouv { grid-area: renouv; }

  
  .table_fac .cell_table,.table_cmd .cell_table{flex-grow:1;text-align:center;    padding: 15px 0;}
 
  .table_fac .cell_table.sep_left,.table_cmd .cell_table.sep_left{border-left:solid 1px #000;}


/* --- MEDIA QUERY --- */
@media print{
   #header,input,#footer{display:none;}
}