/* Moustache SEO Booster — FAQ accordéon (v1.6.0)
 *
 * Toutes les valeurs visuelles sont contrôlées via les CSS variables
 * injectées par PHP (build_dynamic_css). Ces valeurs proviennent des
 * réglages utilisateur dans Paramètres → Style FAQ.
 *
 * Variables disponibles :
 *   --msb-faq-container-bg, --msb-faq-container-radius, --msb-faq-container-padding
 *   --msb-faq-item-gap, --msb-faq-border-color, --msb-faq-border-width
 *   --msb-faq-item-bg-closed, --msb-faq-item-text-closed
 *   --msb-faq-item-bg-open, --msb-faq-item-text-open
 *   --msb-faq-answer-bg, --msb-faq-answer-text
 *   --msb-faq-icon-color
 *   --msb-faq-question-size, --msb-faq-question-weight, --msb-faq-answer-size
 */

/* ===== Mode autonome ===== */
.msb-faq-accordion{
  background: var(--msb-faq-container-bg, #fff);
  border-radius: var(--msb-faq-container-radius, 8px);
  padding: var(--msb-faq-container-padding, 0);
  margin: 1.5em 0;
  display: flex;
  flex-direction: column;
}
.msb-faq-item{
  background: var(--msb-faq-item-bg-closed, #fff);
  border: var(--msb-faq-border-width, 1px) solid var(--msb-faq-border-color, #e5e7eb);
  border-radius: var(--msb-faq-container-radius, 8px);
  overflow: hidden;
  margin-bottom: var(--msb-faq-item-gap, 8px);
}
.msb-faq-item:last-child{ margin-bottom: 0; }

.msb-faq-question{
  width: 100%;
  text-align: left;
  padding: 18px 48px 18px 20px;
  background: transparent;
  border: 0;
  color: var(--msb-faq-item-text-closed, #1f2937);
  font-size: var(--msb-faq-question-size, 16px);
  font-weight: var(--msb-faq-question-weight, 600);
  cursor: pointer;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  transition: background .2s ease, color .2s ease;
  font-family: inherit;
  line-height: 1.4;
}
.msb-faq-question:hover{ filter: brightness(0.98); }
.msb-faq-question[aria-expanded="true"]{
  background: var(--msb-faq-item-bg-open, #fff7ed);
  color: var(--msb-faq-item-text-open, #1f2937);
}

/* Icône + / − */
.msb-faq-icon{
  width: 14px; height: 14px; flex: 0 0 14px;
  position: relative;
  color: var(--msb-faq-icon-color, #F7A600);
  transition: transform .3s ease;
}
.msb-faq-icon::before,
.msb-faq-icon::after{
  content: ""; position: absolute; background: currentColor;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
}
.msb-faq-icon::before{ width: 14px; height: 2px; }
.msb-faq-icon::after { width: 2px;  height: 14px; transition: transform .3s ease; }
.msb-faq-question[aria-expanded="true"] .msb-faq-icon::after{
  transform: translate(-50%, -50%) scaleY(0);
}

.msb-faq-answer{
  background: var(--msb-faq-answer-bg, #fff);
  color: var(--msb-faq-answer-text, #4b5563);
  font-size: var(--msb-faq-answer-size, 15px);
  padding: 0 20px 18px 20px;
  line-height: 1.65;
}
.msb-faq-answer[hidden]{ display: none; }
.msb-faq-answer p:first-child{ margin-top: 0; }
.msb-faq-answer p:last-child { margin-bottom: 0; }

.msb-faq-title{
  margin: 0 0 .75em;
}

/* ===========================================================
   v1.6.1 — Fix Divi : icône +/− visible et bien positionnée
   ===========================================================
   Bug 1 : Sans position:relative + padding-right sur le titre,
   le pseudo-élément ::before (icône ETmodules) déborde hors du
   conteneur et n'est pas visible.
   Bug 2 : Une fois le positionnement OK, on s'assure que
   l'icône "ouverte" (−) reste visible (Divi la cache parfois). */

.msb-faq-divi.et_pb_accordion .et_pb_toggle_title {
    position: relative !important;
    padding-right: 50px !important;
    cursor: pointer !important;
}

.msb-faq-divi.et_pb_accordion .et_pb_toggle_open .et_pb_toggle_title::before {
    display: block !important;
}