html{
   max-width: 1280px;
}

body{
   max-width: 1280px; 
}

.gdconteneur{
   max-width: 1280px; 
}

img{
   border-radius: 5%;
}

.ttapropos{
  color: rgb(255, 255, 255);
  margin-top: 2%;
  margin-left: 1%;
}

.pstvg{
color: rgb(255, 255, 255);
margin-left: 1%;
}
.ttradescrippoint{
list-style-type: none;
}

.navbarresecond{
   max-width: 1280px; 

   background-color: rgb(13, 13, 13);
   padding-top: 10px;
   padding-bottom: 2px;
   

}

.navsecond{
   padding-left: 12px;
}

.navsecond li {
    display: inline-block;
    padding-right:30px;
   
}

.liensecond{
  color: rgb(255, 255, 255);
  
}

.imgacceuil2{
   border-radius: 0%;
}

.conteneur1{
   max-width: 1280px;
   border: solid 8px black; 
   background-color: rgb(48, 47, 47);

}

.ttra{
   color: rgb(241, 244, 247);
   padding-left:2% ;
   padding-top: 15px;
   padding-bottom:10px ;
}

.ttradescrip{
   color: rgb(241, 244, 247);
   padding-left:2% ;

}

.ttradescrippoint{
   color: rgb(241, 244, 247);
   padding-left:2%

   
   
}

.portemenu{
   max-width: 1280px;
   margin-right: 15%;
   margin-left: 15%;
   margin-top: 20px;
   margin-bottom: 20px;
   background-color: rgb(32, 29, 29);

}


.imgmenutous{
   margin-left: 20px;
   margin-top: 20px;
}

.ttrmenustous{
   color: rgb(252, 253, 255);
   margin-left: 35%;
   margin-top: 2%;
   
}

.presmenutous{
   color: rgb(252, 253, 255);
   margin-left: 20px;
   margin-top: 20px;

}

.minmenustous{
   color: rgb(252, 253, 255);
}

.prixmenustous{
   color: rgb(252, 253, 255);
}

.commandemenustous{
   margin-top: 3%;
   margin-left: 20px;
   margin-top: 20px;
   padding-bottom: 3%;


   display: grid;
   grid-template-columns: 25% 25% 50%;
   grid-template-rows: auto;
   justify-items:center;
   align-items: center;
}

.nom_menu{
   margin-left: 40%;
   color: rgb(235, 238, 241);
   margin-top: 3%;
}

.panneau_menu{

   max-width: 1280px;
   padding-left: 3%;
   padding-right: 2%;
   padding-top: 40px;

   display: grid;
   grid-template-columns: 50% 40%;
   grid-template-rows: auto;
   justify-items:center;
   align-items: center;
}

.present_menu{
   color: rgb(243, 243, 243);
   margin-bottom: 4%;
   margin-top: 2%;
}

.prix_nombre{
  color: rgb(243, 243, 243); 
  margin-bottom: 4%; 
}

.descrip_menu{
   color: rgb(243, 243, 243); 
   margin-bottom: 4%;
}

.ttrform{
   color: rgb(240, 245, 249);
   max-width : 1280px;
   width: 70%;
   
   margin-top: 3%;
   margin-bottom: 3%;
   margin-left: 20%;

}
.formcommande{
   max-width : 1280px;
   width: 50%;
   color: rgb(240, 245, 249);
   margin-left: 25%;
}

.commandeinfo{
   margin-top: 7%;
   margin-bottom: 2%;

}

#confcommande{
   margin-top: 3%;

}

.formcontact{
   max-width : 1280px;
   width: 50%;
   color: rgb(240, 245, 249);
   margin-left: 25%;
}

.ttrcontact{
  color: rgb(240, 245, 249);
   max-width : 1280px;
   width: 70%;
   
   margin-top: 3%;
   margin-bottom: 3%;
   margin-left: 20%;  
}

#confcontact{
   margin-top: 3%;

}

.ttrconnexion{
   color: rgb(148, 148, 225);
   margin-left: 40%;
   margin-top: 3%;
   margin-bottom: 3%;

}

.conteneurconnexions{
   max-width : 1280px;
   margin-left: 3%;
   

   display: grid;
   grid-template-columns: 50% 50%;
   grid-template-rows: auto;
   justify-items:center;
   align-items: center;
}

.formconnexion1{
   color: rgb(148, 148, 225);
}

.creationinfo{
   color: aliceblue;
}
.formconnexion2{
   color: rgb(148, 148, 225);
   
}
.seconinfo{
   color: aliceblue;
}

#connexionutilisateur{
   margin-top: 3%;
}

#creationespace{
   margin-top: 3%;
}












.footer{
   max-width: 1280px;
   margin-top: 60px;
   background-color: rgb(31, 29, 29);
}

.bandeau1{
   display: grid;
   grid-template-columns: 50% 50%;
   grid-template-rows:auto ;

   max-width: 1280px;
   padding: 20px;
   margin-left:13% ;
   margin-right: 13%;
   padding-bottom: 30px;
   height: auto;
   color: rgb(254, 254, 254);
   
}

.subdiv1{
   margin-left: 50px;
}

.ns{
   padding-bottom: 10px;
}
.tl{
   padding-bottom: 4px;
}

.itemreseaux{
   display: inline-block;
   margin-right: 20px;
   
}
.subdiv2{
   margin-left: 80px;
}




.bandeau2{
   max-width: 1280px;
   padding: 30px;
   margin-left:10% ;
   margin-right: 10%;
   height: auto;
   color: rgb(254, 254, 254);
   
   border:  1px solid;
   border-right: none;
   border-left: none;
   border-bottom: none;
   
   border-top-color: beige;
}

.bandeau3{
   max-width: 1280px;
   padding: 10px;
   margin-left:20% ;
   margin-right: 25%;
   height: auto;
   color: rgb(254, 254, 254);
   
}

.textebas{
   margin-left: 15%;
}

.epeutilisateur{
  color: rgb(222, 228, 42);
  margin-left: 35%;
}

#reinimdp{
   margin-left: 25%;
   margin-top: 3%;

}

.epeemploye{
  color:rgb(239, 107, 81);
  margin-left: 35%;

}

.epeadministrateur{
   color:rgb(244, 146, 0);
   margin-left: 28%;
}

.conteneurrein{
   margin-top: 2%;
   margin-left: 15%;
   margin-right: 15%;
   color: rgb(148, 148, 225);
}

.ttrrei{
   color: rgb(148, 148, 225);
}

.prei{
   color: rgb(148, 148, 225);

}

#tseemail{
   margin-top: 1%;
}

.resucom{
  max-width : 1280px;
  margin-left: 3%;
  margin-top: 3%;
   

   display: grid;
   grid-template-columns: 50% 50%;
   grid-template-rows: auto;
   justify-items:center;
   align-items: center; 
}

.resumecommandettr{
    color: rgb(148, 148, 225);
}

.resumecommande{
   color: aliceblue;
}



.bnvuser{
   color: rgb(209, 212, 128);
   margin-top: 1%;
   margin-left: 3%;
}

.pstcommande{
   color: rgb(209, 212, 128);
   margin-left: 2%;
   margin-top: 2%;
}

.rsmcom{
   color: rgb(227, 229, 166);
  
}


.panneaucom{

  max-width : 1280px;
  margin-left: 3%;
  margin-right: 3%;
  margin-top: 3%;
  background-color: rgb(19, 15, 15);
  border-radius: 10px;

   display: grid;
   grid-template-columns: 50% 50%;
   grid-template-rows: 250px;
   justify-items:center;
   align-items: center; 

}



.infoperso{

  max-width : 1280px;
  margin-left: 3%;
  margin-right: 3%;
  margin-top: 3%;
  color: rgb(227, 229, 166);
  
  display: grid;
  grid-template-columns: 40% 60%;
  justify-items:center;
  align-items: center; 
   
  
}

.persoencours{
background-color: rgb(19, 15, 15);
border-radius: 10px;
margin-right: 5%;
margin-left: 1%;
}

.perso{
   margin-left: 3%;

}

.persottr{
   margin-left: 3%;
}

.employegestioncom{
   max-width : 1280px;
}



.tablecommande {
    max-width : 1280px;
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: white;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    margin: 20px 0;
}




.tablecommande thead tr {
  
   background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
   font-weight: 400;
}

.tablecommande th {

    color: white;
    font-weight: 500;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 15px 12px;
    border: none;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
}

.tablecommande th:last-child {
    border-right: none;
}


.tablecommande td {
    padding: 12px;
    border-bottom: 1px solid #f0f0f0;
    border-right: 1px solid #f5f5f5;
    color: #333;
    font-size: 14px;
}

.tablecommande td:last-child {
    border-right: none;
}


.tablecommande tbody tr:hover {
   
    
    background: linear-gradient(90deg, #f8f9ff 0%, #ffffff 100%);
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.1);
    transition: all 0.2s ease;
}

.tablecommande tbody tr:hover td {
   
    border-bottom-color: #667eea;
}


.tablecommande tbody tr:last-child td {
    border-bottom: none;
}


.btn {
    display: inline-block;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s ease;
    border: none;
    cursor: pointer;
}

.btn-warning {
    background: linear-gradient(135deg, #f5af19 0%, #f12711 100%);
    color: white;
}

.btn-warning:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(245, 175, 25, 0.3);
}

.btn-danger {
    background: linear-gradient(135deg, #eb3349 0%, #f45c43 100%);
    color: white;
}

.btn-danger:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(235, 51, 73, 0.3);
}


@media (max-width: 768px) {
    .tablecommande {
        font-size: 12px;
    }
    
    .tablecommande th,
    .tablecommande td {
        padding: 8px 6px;
    }
    
    .btn {
        padding: 4px 10px;
        font-size: 10px;
    }
}


.tablecommande tbody tr:nth-child(even) {
    background-color: #fafbff;
}


.tablecommande tbody tr {
    animation: fadeInUp 0.3s ease backwards;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.resucom2{

color: rgb(226, 231, 235);
max-width : 1280px;
margin-top: 2%;
margin-left: 2%;
width: 80%;

}

.formmodif{
color: rgb(226, 231, 235);
max-width : 1280px;
margin-top: 2%;

width: 80%;
}

.employegestioncom{
   max-width : 1280px;
}

.btn-outline-secondary{
    background: linear-gradient(135deg, #ff9a02 0%, #fa02c4 100%);
    color: rgb(229, 14, 157);
   margin-right: 1%;
}


.btn-outline-secondary:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(235, 94, 103, 0.995);
}

.btn-outline-danger{
    background: linear-gradient(135deg, #f305bb 0%, #0250f8 100%);
    color: white;
   margin-right: 1%;
}


.btn-outline-danger:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(243, 215, 58, 0.995);
}


.btnrajouter{
   margin-left: 82%;
}

.messageresp{
   color: white;
   margin-top: 2%;
   margin-left: 1%;
}

.messageresp2{
   color: white;
   margin-top: 2%;
   margin-left: 1%;
}

.resumessage{
  color: white; 
  margin-left: 10px;
  
}


.resumessageclient{
   color: white; 
   margin-left: 5px;
   
}

.dmgstuti{
 color: rgb(12, 114, 198); 
 margin-left: 3%;
 margin-top: 4%;
}

.imgbasdepage{
   max-width: 1280px;
   margin-top: 5%;
   
   width: 100%;
   padding: 30px;
  
}

.imgbasdepage2{
   margin-left: 7%;
}

.vg{
   color: rgb(141, 0, 96); 
   margin-left: 32%;

}

.bnvadm{
   color: rgb(141, 0, 96); 
   margin-left: 38%;

}

.admgstuti{
   color: rgb(0, 102, 192); 
   margin-left: 35%;
}