#product_info {
  width: 65%;
  padding: 5px;                       /* Main product description column */
}
#product_in_info{
  font-weight: bold;
}
#recap, #recap2 {
  text-align: justify;                /* Clean paragraph alignment */
  margin-top: 20px;
}
#recap2{
    margin-top: 20px;                 /* Duplicate margin (same as above) */
}

#benefice {
  margin-top: 15px;                   /* Spacing above benefits section */
}
.marge{
  margin-top: 30px!important;
}
.ic_item{
    width: 40px;                      /* Size of benefit icons */
    height: auto;
}

.is_bold{
  font-weight: bold;
}
.is_marg{
  margin-top:1%;
}

.ben {
  width: 100%;
  display: flex;
  gap: 5%;                            /* Space between benefit columns */
  margin-top: 5px;
}

.ben div{
    display: flex;
    justify-content: start;
    gap:10px;                         /* Space between icon and text */
    width: 50%;                       /* Two benefits per row */
}

/* ---------------- FAQ SECTION ---------------- */

#faq_prod{
    margin-top: 20px;
}

#faq_container{
  text-align: center;
  width: 100%;
  margin-top: 60px;
  position: relative;
}

.contianer_quest_prod{
  width: 100%;
  height:50px;
  background-color: #b8c496;          /* Question background color */
  margin: auto;
  margin-top: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border 0.1s ease;
  border: 1px solid transparent;
  cursor: pointer;
  transition: border 0.5s ease;       /* Smooth hover transition */
}

.contianer_quest_prod:hover{
    border: 1px solid rgba(0, 0, 0, 0.288);
}

/* Expandable FAQ answer */
.response.open {
  grid-template-rows: 1fr;            /* Expands the hidden content */
}

.quest {
  cursor: pointer;
  user-select: none;
}

.response {
  display: grid;
  grid-template-rows: 0fr;            /* Hidden by default */
  transition: grid-template-rows 0.4s ease;
  overflow: hidden;
}

.response_content_top {
  min-height: 0;
  width: 100%;
  padding-top: 10px;
  text-align: justify;
}

.prod_resp{
    width: 100%!important;            /* Overrides widths from global FAQ styles */
    margin-left: 0!important;
}

/* ---------------- MEDIA QUERIES ---------------- */

@media (max-width: 1366px){
  .contianer_quest_prod{
    height:35px;                      /* Slightly smaller questions */
  }
  #containter_fiche{
    margin-top: 20px;
  }
  .ic_item{
      width: 30px;                      /* Size of benefit icons */
      height: auto;
  }
}

@media (max-width: 1280px) and (max-height: 1024px){
  #containter_fiche{
    margin-top: 60px;                 /* Adjust spacing depending on screen height */
  }
  .ic_item{
      width: 35px;                      /* Size of benefit icons */
      height: auto;
  }
}

@media (max-width: 1280px) and (max-height: 768px){
  #containter_fiche{
    margin-top: 40px;
  }
  .ic_item{
      width: 30px;                      /* Size of benefit icons */
      height: auto;
  }
}

@media (max-width: 1176px){
  .contianer_quest_prod{
    height:30px;                      /* Even smaller questions */
  }
}


@media (max-width: 1024px){
  .ic_item{
      width: auto;                      /* Size of benefit icons */
      height: 25px;
  }
}



@media (max-width: 800px){
  #product_info{
    width: 70%;                       /* More space for mobile layout */
  }
}

@media (max-width: 600px){
  #containter_fiche{
    flex-direction: column;           /* Stack image + info vertically on small screens */
  }
}