html, body {
  max-width: 100%;
  overflow-x: hidden;
}

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}

.main {
    max-width: 1200px;
    margin: 0 ;
    padding: 20px;
}

.categorie {
    margin: 2px;
    padding: 2px;

    border: 1px solid #ccc;
    border-radius: 5px;
}

.categorie h2 {
    font-size: 35px;
    margin-top: 0;
    font-family: Arial, sans-serif;   /* Police de caractères */
    color: #333;                      /* Couleur du texte */
    font-weight: bold;                /* Gras */
    text-transform: uppercase;        /* Mettre le texte en majuscules */
    letter-spacing: 1px;              /* Espacement des lettres */
    /* border-bottom: 3px solid orange;  /* Bordure inférieure orange */ */
    padding-bottom: 10px;             /* Espacement intérieur sous le texte */
    display: inline-block;            /* S'assurer que la bordure s'adapte à la largeur du texte */
    margin-bottom: 20px;
    padding-left: 10px;
    padding-top: 10px;          /* Espacement en dessous du titre */
}

.produits {
    /* display: flex;
    flex-wrap: wrap; */
}

[class^="produit-"] {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin: 10px;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 5px;
    flex: 1;
    max-width: 1200px;
}

[class^="produit-"] h3 {
    margin-top: 0;
}

[class^="produit-"] p {
    margin: 0;
}

form {
    margin-top: 10px;
}

.panier {
    flex: 1;
    margin: 10px;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

input[type="number"],
input[type="text"],
input[type="tel"],
input[type="email"],
input[type="date"],
input[type="time"],
input[type="datetime-local"] {
    width: 100%;
    padding: 6px 12px;
    margin: 4px 0;
    box-sizing: border-box;
    border: 1px solid #ccc;
    border-radius: 4px;
}

input[type="submit"] {
    width: 100%;
    background-color: orange;
    color: black;
    padding: 14px 20px;
    margin: 8px 0;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

input[type="submit"]:hover {
    background-color: darkorange;
}

.indisponible {
  color: red;             /* Couleur du texte */
  font-weight: bold;      /* Gras */
  font-size: 18px;        /* Taille de la police */
  font-family: Arial, sans-serif; /* Police de caractères */
  text-align: center;     /* Centrer le texte horizontalement */
  padding: 10px;          /* Espacement intérieur */
  border: 2px solid red;  /* Bordure */
  border-radius: 5px;     /* Coins arrondis */
  background-color: #f8d7da; /* Couleur d'arrière-plan */

}
/* Responsive Design */
@media (max-width: 768px) {
    .main {
        /* display: flex; */
        /* flex-direction: row; */
    }

    .produits {
        /* display: flex; */
        /* flex-direction: row; */
    }

    [class^="produit-"] {
        display: flex;
        flex-direction: column;
        max-width: 100%;
    }
    .description {
    flex-direction: column;
    /* padding-bottom: 5px; */

}
.description p {
 padding: 5px;
/* padding-bottom: 5px; */

}
}
.description {
  display: flex;
  justify-content: space-between;
}

[class^="produit-"] {
    /* display: flex;
    flex-direction: column; */
    margin: 10px;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 5px;
    flex: 1;
    max-width: 1200px;
}

[class^="produit-"] h3 {
    margin-top: 0;
}

[class^="produit-"] p {
    margin: 0;
}

form {
    display: flex;
    flex-direction: column;
    margin-top: 10px;
}

form label {
    display: inline-block;
    margin-bottom: 5px;
}

input[type="number"] {
    margin-bottom: 10px;
    font-size: 20px;
}
p{
  font-size: 18px;
}
h3 {
  font-size: 25px;
}
@media print {
  .no-print,
  .quantite_{
    display: none;
  }
  header {
    display: none;
  }
  .panier {
    display : none;
  }
  footer {
    display: none;
  }
  .add-to-cart-btn {
    display: none;
  }
  [class^="produit-"]{
    padding: 5px;
    margin : 5px;
  }
  .description {
  flex-direction: row;
}
}