img {
    width: 20%;
    height: auto;

  }

  hr {
  margin: 0;
  margin-top: 10%;
  margin-bottom: 5%;
  width: 55%;
}
@media (max-width: 480px) {
  img {
    width: 70%;
    height: auto;
  }

  hr {
    margin: 0;
    margin-top: 20%;
    margin-bottom: 10%;
    width: 100%;
  }
  .descFood {
    text-align: left;
      font-size: x-large;
  }
  
}


body {
  font-family: Arial, sans-serif;
  background-color: #f5f5f5;
  text-align: center;
  margin: 0;
  padding: 0;
}


.food {
    float: left;
    margin-left: 4%; 
    padding-right: 4%;
    padding-bottom: 4%;
}

.container {
    align-items: center;
    justify-content: center;
    margin-bottom: 4%;
}

.container2 {
    align-items: center;
    justify-content: center;
    margin-bottom: 4%;
    margin-top: 3%;
}


.resume {
  margin-right: 5%;
  align-items: right;
  justify-content: right;

}

.Total1{
  text-align: right;
  margin-top: 5%;
}
.Total2{
  text-align: right;
}
p {
  font-family:Arial, Helvetica, sans-serif;
}  

.descFood {
  text-align: left;
    font-size: xx-large;
}

.promo {
  float: right;
  margin-right: 1%;
  width: 25%;
  height: 15%;
  border: 3px solid #555;
  padding: 1.7%;
  
}

hr.prix {
  float: right;
  margin-top: 0;
  margin-bottom: 0;
  width: 35%;
  border: 1px solid;
}

.totalPrix {
  text-align: right;
  font-weight: bold;
}



.commande {
  text-align: right;
  margin: 5%;
  margin-bottom: 1%;
  font-weight: bold;
  
}

@media (max-width: 480px) {
  .resume {
  margin-right: 5%;
  align-items: right;
  justify-content: center;

}

.Total1{
  text-align: center;
  margin-top: 5%;
}
.Total2{
  text-align: center;
}
  .promo {
    margin-right: 23%;
    width: 48%;
    height: 15%;
    border: 3px solid #555;
    padding: 1.7%;
    
  }
  
  hr.prix {
    float:right;
    margin-top: 0;
    margin-bottom: 0;
    margin-right: 30%;
    width: 40%;
    border: 1px solid;
  }
  
  .totalPrix {
    text-align: center;
    font-weight: bold;

  }
  
  .commande {
    text-align: center;
    margin: 5%;
    margin-bottom: 1%;
    font-weight: bold;
    
  }

  
}

.suppr {
  border: 0;
  line-height: 2.5;
  margin-top: 4%;
  font-size: 45%;
  text-align: center;
  color: #000000;
  font-weight: bold;
  border-radius: 10px;
  background-color: #FFD462;
  box-shadow:
    inset 2px 2px 3px #f5f5f5,
    inset -2px -2px 3px #000000;
}

.suppr:hover {
  background-color: #f6c335;
}

.suppr:active {
  box-shadow:
    inset -2px -2px 3px rgba(255, 255, 255, 0.6),
    inset 2px 2px 3px rgba(0, 0, 0, 0.6);
}

/* Ajoutez cette règle CSS pour personnaliser le bouton d'application du code promo */
#applyPromoButton {
  background-color: #FFD462;
  border: 0;
  border-radius: 10px;
  font-weight: bold;
  color: #000000;
  padding: 1.5% 1.5%; /* Ajustez les valeurs de marge ici */
  transition: all 0.3s; /* Ajoutez une transition pour une animation en douceur */
  float: right;
}

#applyPromoButton:hover {
  background-color: #f6c335;
  cursor: pointer; /* Changez le curseur au survol pour indiquer l'interaction */
}

#applyPromoButton:active {
  transform: scale(0.05); /* Réduisez légèrement la taille du bouton au clic */
}

.informations-commande {
  border: 1px solid #ddd;
  padding: 20px;
}

.toggle-title {
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.toggle-title span {
  font-size: 20px;
  margin-left: 5px;
}

.texte-retour,
.texte-livraison {
  display: none;
  margin-top: 10px;
}

.active {
  display: block; /* ou display: inline-block; en fonction de vos besoins */
}

.politique li {
  font-weight: bold;
}