div.liste-panier {
  display: flex;
  justify-content: center;
  gap: 20px;
}

div.resultat {
  background-color: #ffffff;
  padding: 10px 20px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  width: 20%;
  margin-top: 10px;
}

td {
  background-color: #ffffff;
  padding: 10px 20px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
}

th {
  border-bottom: 1px solid #bbbbbb;
}

.panier {
  max-width: 45%;
}

td.produit div img {
  margin-right: 20px;
}

td.produit div {
  min-height: 64px;
  max-height: 64px;
  overflow: hidden;
}

td.produit p {
  line-height: 22px;
}
td.quantite,
td.prix-unitaire,
td.total-intermediaire {
  white-space: nowrap;
  text-align: center;
}

.total div,
.resume div {
  display: flex;
}

.total div p.prix,
.resume div p.prix {
  margin-left: auto;
}

/* Responsive pour le panier sur mobiles */
/* Pour les écrans de moins de 768px, par exemple */
@media screen and (max-width: 768px) {
  /* Le conteneur global passe en colonne */
  div.liste-panier {
    flex-direction: column;
    align-items: center;
  }

  /* Ajuster la largeur des sections du panier */
  .panier {
    max-width: 100%;
    width: 100%;
  }

  /* La colonne "resultat" prend toute la largeur */
  div.resultat {
    width: 100%;
    margin-top: 20px;
  }

  /* Le tableau s'affiche en défilement horizontal si nécessaire */
  .panier table {
    width: 100%;
    overflow-x: auto;
    display: block;
  }

  /* Ajuster les cellules pour un affichage compact */
  td, th {
    padding: 8px 10px;
    font-size: 14px;
  }

  /* Centrer le contenu et éviter les débordements */
  td.quantite,
  td.prix-unitaire,
  td.total-intermediaire {
    text-align: center;
    white-space: nowrap;
  }
}

/* Responsive spécifique pour les très petits écrans (max-width: 480px) */
@media screen and (max-width: 480px) {
  /* Réduire les marges et augmenter l'espacement vertical */
  div.liste-panier {
    gap: 10px;
    padding: 0 5px;
  }

  .panier {
    max-width: 100%;
  }
  
  div.resultat {
    width: 90%;    /* réduire la largeur pour laisser apparaître le padding */
    margin: 10px auto;  /* centrer et ajuster la marge verticale */
    padding: 10px; /* conserver un padding léger pour le contenu */
  }
  
  /* Adapter la taille du texte du tableau */
  td, th {
    font-size: 12px;
    padding: 6px 8px;
  }

  /* Pour les images dans le tableau */
  td.produit div img {
    width: 50px;
    height: auto;
    margin-right: 10px;
  }
}