/**
 * FAQ AB - Divi 5 custom module (parent + child)
 * Trigger cliquable qui ouvre un panneau réponse.
 * États: default (blanc) / hover (gris) / open (orange).
 * Animation smooth via grid-template-rows: 0fr -> 1fr sur .ab-faq-item__panel.
 */

.ab-faq {
  --ab-faq-item-gap:      24px;
  --ab-faq-item-radius:   5px;
  --ab-faq-item-padding:  20px 24px;
  --ab-faq-icon-gap:      16px;
  --ab-faq-icon-size:     20px;

  --ab-faq-bg-default:    #FCFBF7;
  --ab-faq-bg-hover:      #EFEDE6;
  --ab-faq-bg-active:     #F62E02;
  --ab-faq-text-default:  #222222;
  --ab-faq-text-active:   #FCFBF7;
  --ab-faq-icon-default:  #F62E02;

  --ab-faq-panel-bg:      #FCFBF7;
  --ab-faq-panel-border:  #DAD6C8;
  --ab-faq-panel-text:    #222222;
  --ab-faq-panel-padding: 24px 28px;
  --ab-faq-panel-offset:  12px;

  width: 100%;
  box-sizing: border-box;
}

.ab-faq__list {
  display: flex;
  flex-direction: column;
  gap: var(--ab-faq-item-gap);
  width: 100%;
}

/* ---- Item ----
   Chaque item est un container qui contient trigger + panel. */
.ab-faq-item {
  display: block;
  width: 100%;
}

/* ---- Trigger ----
   Bouton pleine largeur avec icône + question uppercase. */
.ab-faq-item__trigger {
  display: flex;
  align-items: center;
  gap: var(--ab-faq-icon-gap);
  width: 100%;
  padding: var(--ab-faq-item-padding);
  background-color: var(--ab-faq-bg-default);
  color: var(--ab-faq-text-default);
  border: 0;
  border-radius: var(--ab-faq-item-radius);
  text-align: left;
  cursor: pointer;
  box-sizing: border-box;
  transition:
    background-color 250ms ease,
    color 250ms ease;
  font-family: inherit;
}

.ab-faq-item__trigger:hover {
  background-color: var(--ab-faq-bg-hover);
}

.ab-faq-item__trigger:focus-visible {
  outline: 2px solid var(--ab-faq-bg-active);
  outline-offset: 3px;
}

/* Item ouvert : fond orange + texte blanc */
.ab-faq-item[data-ab-faq-open="1"] .ab-faq-item__trigger,
.ab-faq-item[data-ab-faq-open="1"] .ab-faq-item__trigger:hover {
  background-color: var(--ab-faq-bg-active);
  color: var(--ab-faq-text-active);
}

/* ---- Icône +/- ----
   SVG avec deux barres, la barre verticale disparaît quand ouvert. */
.ab-faq-item__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: var(--ab-faq-icon-size);
  height: var(--ab-faq-icon-size);
  color: var(--ab-faq-icon-default);
  transition: color 250ms ease;
}

.ab-faq-item__icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.ab-faq-item__icon-v {
  transform-origin: 12px 12px;
  transition: transform 250ms ease;
}

/* Ouvert : icône devient blanche, barre verticale rotate à 90° pour se confondre avec l'horizontale */
.ab-faq-item[data-ab-faq-open="1"] .ab-faq-item__icon {
  color: var(--ab-faq-text-active);
}

.ab-faq-item[data-ab-faq-open="1"] .ab-faq-item__icon-v {
  transform: rotate(90deg);
}

/* ---- Question ----
   Uppercase par défaut, hérite de la font définie côté parent (cascade PHP). */
.ab-faq-item__question {
  flex: 1 1 auto;
  min-width: 0;
  font-family: 'PP Fragment Sans', 'PP Fragment', sans-serif;
  font-weight: 500;
  font-size: 15px;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

/* ---- Panel ----
   Animation de height en pixels (mesurée en JS via scrollHeight).
   Le grid-template-rows trick est plus concis mais Chrome a des perfs médiocres
   à interpoler les valeurs fr, résultat saccadé. */
/* L'animation open/close est pilotée par jQuery.slideDown/slideUp (JS incrémental
   sur height + overflow:hidden), même approche que le module Accordion natif Divi
   qui reste fluide sur les pages Divi complexes. Pas de CSS transition sur height. */
.ab-faq-item__panel {
  display: none;
  overflow: hidden;
}

.ab-faq-item__panel-inner {
  min-height: 0;
}

.ab-faq-item__answer {
  margin-top: var(--ab-faq-panel-offset);
  padding: var(--ab-faq-panel-padding);
  background-color: var(--ab-faq-panel-bg);
  border: 1px solid var(--ab-faq-panel-border);
  border-radius: var(--ab-faq-item-radius);
  color: var(--ab-faq-panel-text);
  font-family: 'Host Grotesk', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  box-sizing: border-box;
}

.ab-faq-item__answer > *:first-child { margin-top: 0; }
.ab-faq-item__answer > *:last-child  { margin-bottom: 0; }
.ab-faq-item__answer p               { margin: 0 0 1em; }
.ab-faq-item__answer p:last-child    { margin-bottom: 0; }
.ab-faq-item__answer a               { color: var(--ab-faq-bg-active); text-decoration: underline; }
.ab-faq-item__answer ul,
.ab-faq-item__answer ol              { margin: 0 0 1em; padding-left: 1.5em; }

/* Aria: quand panel fermé, le contenu n'est pas focusable */
.ab-faq-item:not([data-ab-faq-open="1"]) .ab-faq-item__panel {
  pointer-events: none;
}