body {
    font-family: Arial, sans-serif;
    background-color: #f2f2f2;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  
  .product-container {
    display: flex;
    background-color: rgb(227, 231, 218);
    border: 1px solid rgb(221, 221, 221);
    padding: 10px;
    margin: 10px;
  }

  .product-container2 {
    display: flex;
    background-color: rgb(215, 231, 179);
    border: 1px solid hsl(125, 21%, 89%);
    padding: 10px;
    margin: 10px;
  }
  
  .image-container {
    width: 100px;
    flex: 1;
    margin-right: 2px;
  }
  
  .image-container img {
    max-width: 100%;
    height: auto;
  }
  
  .details-container {
    flex: 2;
  }

  
  input[type="number"] {
    width: 50px;
    padding: 5px;
  }

  .div_text_caddie{
    display: block;
    background-color: rgb(154, 189, 126);
    border: 1px solid rgb(6, 31, 8);
    padding: 10px;
    margin: 0px;
  }
  .div_text_commander{
    display: block;
    background-color: rgb(154, 189, 126);
    border: 1px solid rgb(6, 31, 8);
    padding: 5px;
    margin: 0px;
  }
  
  @media (max-width: 1000px) {

    .image-container img {
      min-width: 80px;
      height: auto;
    }

    .product-container {
      flex-direction: column;
    }

    .product-container2 {
      flex-direction: column;
    }

    .div_text_caddie{
      display: block;
    }
    
    .class-input{
      font-size: 30px;
      height: 60px;
      width: 150px;
    }

    .class-bouton{
      font-size: 30px;
      width: 230px;
      height: 60px;
    }

  }