/* =====================================================================
   Modules FAQ - page foire-aux-questions (ID 4301) - Ingeforce
   Charge uniquement sur la page FAQ (cf. inc/faq-modules.php).
   ===================================================================== */

/* ---------- Module 1 : selecteur de categories (colonne gauche) ---------- */
.faq-cats__list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:1.1em;
}
/* .faq-cats prefixe pour battre la regle du kit Elementor `.elementor-kit-N button` */
.faq-cats .faq-cat{
  display:inline-flex;
  align-items:center;
  gap:.55em;
  width:100%;
  background:none;
  border:0;
  padding:0;
  margin:0;
  cursor:pointer;
  text-align:left;
  color:#868691;                 /* etat normal */
  font:inherit;
  text-transform:none;           /* nav en casse normale (cf. maquette) */
  line-height:1.3;
  transition:color .2s ease;
}
.faq-cats .faq-cat:hover,
.faq-cats .faq-cat:focus-visible{ color:#fff; }      /* hover */
.faq-cats .faq-cat.is-active{ color:#fff; }          /* actif */

/* La fleche occupe toujours sa gouttiere (les libelles restent alignes),
   visible seulement sur l'item actif, en couleur secondaire. */
.faq-cat__arrow{
  flex:0 0 auto;
  width:18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:var(--e-global-color-secondary,#FD770C);
  opacity:0;
  transform:translateX(-4px);
  transition:opacity .2s ease, transform .2s ease;
}
.faq-cat.is-active .faq-cat__arrow{
  opacity:1;
  transform:translateX(0);
}
.faq-cat__label{ flex:1 1 auto; }

/* ---------- Module 2 : barre de recherche (colonne droite) ---------- */
.faq-search{
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  padding:10px 0;
  margin:0 0 10px;
  border-bottom:1px solid var(--e-global-color-accent,#FD770C);
}
/* .faq-search prefixe pour battre le reset Elementor `input[type="search"]` (bordure grise) */
.faq-search .faq-search__input{
  flex:1 1 auto;
  min-width:0;
  background:transparent;
  border:0;
  outline:none;
  box-shadow:none;
  padding:0;
  color:#fff;
  text-align:left;
  line-height:1.4;
  font-family:var(--e-global-typography-secondary-font-family),Sans-serif;
  font-size:var(--e-global-typography-secondary-font-size);
  font-weight:var(--e-global-typography-secondary-font-weight);
  text-transform:var(--e-global-typography-secondary-text-transform);
  text-decoration:var(--e-global-typography-secondary-text-decoration);
  letter-spacing:var(--e-global-typography-secondary-letter-spacing);
}
.faq-search__input::placeholder{ color:rgba(255,255,255,.7); }
.faq-search__input::-webkit-search-cancel-button{ filter:invert(1); opacity:.6; cursor:pointer; }
.faq-search__icon{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  color:var(--e-global-color-secondary,#FD770C);
}

/* ---------- Module 3 : accordeon groupe par categorie ---------- */
.faq-accordion{
  interpolate-size:allow-keywords;   /* permet d'animer height: auto */
}

.faq-cat-section{ margin:0 0 60px; }
.faq-cat-section:last-of-type{ margin-bottom:0; }

.faq-cat-title{
  margin:0 0 .35em;
  padding:0 0 .35em;
  color:#fff;
  text-transform:uppercase;
  font-family:var(--e-global-typography-primary-font-family),Sans-serif;
  font-weight:var(--e-global-typography-primary-font-weight,700);
  letter-spacing:1px;
  font-size:clamp(28px,3.4vw,44px);
  line-height:1.1;
}

.faq-item{ border-top:1px solid rgba(255,255,255,.14); }
.faq-list .faq-item:last-child{ border-bottom:1px solid rgba(255,255,255,.14); }

.faq-item__head{ margin:0; }
/* .faq-accordion prefixe + reset explicite pour battre `.elementor-kit-N button`
   (le kit impose un background var(--e-global-color-primary) + padding 30px 40px). */
.faq-accordion .faq-item__toggle{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.2em;
  width:100%;
  background:none;
  background-color:transparent;
  border:0;
  border-radius:0;
  padding:1.25em 0;            /* padding inline = 0 (aligne avec la reponse) */
  cursor:pointer;
  text-align:left;
}
.faq-accordion .faq-item__toggle:hover,
.faq-accordion .faq-item__toggle:focus,
.faq-accordion .faq-item__toggle:focus-visible{
  background:none;
  background-color:transparent;
}
.faq-item__q{
  flex:1 1 auto;
  min-width:0;                  /* autorise le retrecissement dans le flex */
  white-space:normal;           /* le titre wrappe (sinon nowrap herite => debordement mobile) */
  overflow-wrap:break-word;
  color:#fff;
  font-family:var(--e-global-typography-secondary-font-family),Sans-serif;
  font-weight:700;                /* titres de questions en gras */
  text-transform:var(--e-global-typography-secondary-text-transform,uppercase);
  letter-spacing:var(--e-global-typography-secondary-letter-spacing);
  line-height:1.3;
}

/* Icone +/- (orange). Ferme = +, ouvert = - (la barre verticale disparait). */
.faq-item__icon{
  position:relative;
  flex:0 0 auto;
  width:20px;
  height:20px;
}
.faq-bar{
  position:absolute;
  background:var(--e-global-color-secondary,#FD770C);
  border-radius:2px;
}
.faq-bar--h{ top:50%; left:0; right:0; height:2px; transform:translateY(-50%); }
.faq-bar--v{
  left:50%; top:0; bottom:0; width:2px;
  transform:translateX(-50%);
  transition:opacity .3s ease, transform .3s ease;
}
.faq-item.is-open .faq-bar--v{ opacity:0; transform:translateX(-50%) rotate(90deg); }

/* Reponse : animation smooth height 0 <-> auto via interpolate-size */
.faq-item__answer{
  height:0;
  overflow:hidden;
  transition:height .35s ease;
}
.faq-item.is-open .faq-item__answer{ height:auto; }
.faq-item__answer-inner{ padding:0 0 1.6em; font-size:1rem; }
.faq-item__answer-inner,
.faq-item__answer-inner p{
  color:rgba(255,255,255,.78);
  font-family:var(--e-global-typography-text-font-family),Sans-serif;
  font-weight:400;
  line-height:1.7;
}
.faq-item__answer-inner p{ margin:0 0 1em; }
.faq-item__answer-inner p:last-child{ margin-bottom:0; }

/* ---------- Etats de filtrage (categorie + recherche) ---------- */
.faq-cat-section.is-cat-hidden,
.faq-cat-section.is-empty,
.faq-item.is-search-hidden{ display:none; }

.faq-noresults{
  display:none;
  color:rgba(255,255,255,.78);
  padding:8px 0;
  font-size:1.05em;
}
.faq-noresults.is-show{ display:block; }

/* ---------- Variante "mode sombre" : texte fonce pour un fond CLAIR ----------
   (les icones +/- restent en couleur secondaire/orange, contraste OK sur clair) */
.faq-accordion--dark .faq-cat-title{ color:#1e1d32; }
.faq-accordion--dark .faq-item{ border-top-color:rgba(30,29,50,.16); }
.faq-accordion--dark .faq-list .faq-item:last-child{ border-bottom-color:rgba(30,29,50,.16); }
.faq-accordion--dark .faq-item__q{ color:#1e1d32; }
.faq-accordion--dark .faq-item__answer-inner,
.faq-accordion--dark .faq-item__answer-inner p{ color:rgba(30,29,50,.78); }
.faq-accordion--dark .faq-noresults{ color:rgba(30,29,50,.78); }

/* ---------- Responsive : la grille Elementor passe en 1 colonne <=1024px ---------- */
@media (max-width:1024px){
  .faq-cats__list{ flex-direction:row; flex-wrap:wrap; gap:.6em 1.4em; }
  .faq-cat-section{ margin-bottom:40px; }
}