/* Main FAQ container */
#faq_container{
  text-align: center;    /* Centers all text inside */
  width: 100%;           /* Full width */
  margin-top: 60px;      /* Spacing above the FAQ section */
  position: relative;    /* Allows absolute children if needed */
}

/* FAQ title styling */
#titre_first_section{
  margin-top: 5%;        /* Spacing above the title */
  position: relative;
  z-index: 999;          /* Ensures the title stays above background shapes */
}

/* Single question container */
.contianer_quest{
  width: 60%;                     /* Main width for desktop */
  height:50px;                    /* Fixed height for questions */
  background-color: white;
  margin: auto;                   /* Centers the element horizontally */
  margin-top: 20px;
  display: flex;                  /* Centers text inside */
  align-items: center;            /* Vertical alignment */
  justify-content: center;        /* Horizontal alignment */
  transition: border 0.1s ease;   /* Smooth hover border effect */
  border: 1px solid transparent;  /* Invisible border before hover */
  cursor: pointer;                /* Indicates interactivity */
}

/* Hidden response wrapper */
.response {
  display: grid;                       /* Used for smooth height animation */
  grid-template-rows: 0fr;             /* Collapsed by default */
  transition: grid-template-rows 0.4s ease;
  overflow: hidden;                    /* Prevents content from overflowing */
}

/* Inner content of the response */
.response_content {
  min-height: 0;                       /* Required for grid animation */
  width: 60%;
  margin-left: 20%;                    /* Centers content under question */
  padding-top: 10px;                   /* Spacing above text */
}

/* Expanded state of the answer */
.response.open {
  grid-template-rows: 1fr;             /* Expands smoothly */
}

/* Hover and click behavior for question text */
.quest {
  cursor: pointer;
  user-select: none;                   /* Prevents text selection on click */
}


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

/* Slight height reduction for mid screens */
@media (max-width: 1366px) {
  .contianer_quest{
    height: 40px;
  }
}

/* Even smaller height on medium screens with limited height */
@media (max-width: 1280px) and (max-height: 768px){
  .contianer_quest{
    height:35px;
  }
}

/* Tablets and small laptops */
@media (max-width: 800px) {
  .contianer_quest{
    width: 80%;        /* Wider on small screens */
    margin-left: 10%;
  }
}

/* Mobile screens */
@media (max-width: 500px) {

  /* Flexible height so long text fits */
  .contianer_quest{
    height: fit-content;
    padding: 5px;  
  }

  /* Mobile width */
  .contianer_quest{
    width: 90%;
    margin-left: 5%;
  }
}