/* ============================================================
   FAQ Numeria

   Ordre à l'ouverture :  TITRE -> BORDURE -> RÉPONSE
   - Fermé  : 30px entre le titre et la bordure
   - Ouvert : la bordure reste sous le titre (30px), puis
              40px entre la bordure et la réponse,
              puis 80px entre la réponse et la question suivante.

   NB : les espacements de la réponse sont des paddings PERMANENTS
   (masqués à l'état fermé par max-height:0) car le JS Nectar mesure
   le scrollHeight AVANT d'ajouter la classe .open ; un padding posé
   uniquement sur .open serait exclu de la mesure et tronquerait la
   réponse.
   ============================================================ */

#faq-numeria {
  max-width: 1120px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

/* Espace bordure -> question suivante = 40px
   (ouvert : 40px réponse->bordure-bas du panneau + 40px = 80px) */
#faq-numeria .toggle {
  margin-bottom: 40px;
}
#faq-numeria .toggle:last-child {
  margin-bottom: 0;
}

/* -----------------------------------------------------------
   Ligne du titre + bordure (toujours sous le titre)
   ----------------------------------------------------------- */
#faq-numeria .toggle > .toggle-title a {
  display: flex;
  flex-direction: row-reverse; /* texte à gauche, icône à droite */
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  /* Pas de `font-family` ici : l'extension est reprise d'un site à l'autre, et la
     police doit être celle de la CHARTE du site, pas celle du projet d'origine.
     Elle portait « Gloock » et « Funnel Display » en dur, deux polices qu'aucun
     autre site ne charge : la FAQ y rendait donc en serif/sans-serif système.
     Sans déclaration, la cascade fait son travail. */
  font-size: 22px;
  line-height: 120%;
  letter-spacing: 1px;
  /* Pas de couleur en dur, et surtout pas en !important : le titre de question
     doit prendre la couleur de texte de la charte du site. */
  /* 30px entre le titre et la bordure (fermé comme ouvert) */
  padding: 0 0 30px !important;
  border-bottom: 2px solid #e2e2e2;
}

/* Le texte de la question ne déborde pas sur l'icône :
   il occupe la place restante et passe à la ligne. */
#faq-numeria .toggle > .toggle-title a span.toggle-q-text {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: break-word;
  word-break: break-word;
}

/* -----------------------------------------------------------
   Icône d'ouverture / fermeture : 12px de marge à droite
   ----------------------------------------------------------- */
#faq-numeria .faqTogglerIcon {
  flex: 0 0 auto;
  width: 25px;
  box-sizing: content-box;
  padding-right: 12px; /* 12px à droite de l'icône */
  margin-bottom: 0 !important;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
#faq-numeria .toggle.open .faqTogglerIcon {
  transform: rotate(180deg);
}

/* -----------------------------------------------------------
   Panneau de la réponse (sous la bordure)
   ----------------------------------------------------------- */
#faq-numeria .faq-item-inner {
  padding: 0;
  border: 0;
  /* Transition adoucie entre l'état ouvert et fermé */
  transition: max-height 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 40px entre la bordure et la réponse (haut) + 40px sous la réponse.
   Padding PERMANENT => compté dans scrollHeight, masqué quand fermé. */
/* padding-top 40px : entre la bordure (sous le titre) et la réponse.
   padding-bottom 50px : sous la réponse → 50px + 40px (margin-bottom de .toggle)
   = 90px entre la réponse ouverte et le titre de la question suivante.
   (L'écart entre deux questions FERMÉES reste piloté par le seul margin-bottom
   de .toggle = 40px → inchangé.) */
#faq-numeria .inner-toggle-wrap {
  padding: 40px 0 50px 0;
  opacity: 0;
  transition: opacity 0.35s ease;
}
#faq-numeria .toggle.open .inner-toggle-wrap {
  opacity: 1;
}

/* ⚠️ Une réponse composée au page builder porte une RANGÉE, donc des éléments
   de classe `col`, et Salient centre TOUT `col` descendant d'une colonne réglée
   « centré » :

     .wpb_column.force-desktop-text-align-center .col { text-align: center !important }

   Or la section FAQ de nos pages EST dans une colonne centrée, pour son titre.
   Résultat mesuré : le texte des réponses se centrait, mais sur le seul palier
   BUREAU (sous 1000 px, le bloc plus bas remettait déjà l'alignement à gauche).
   Une réponse est de la prose : elle se lit alignée à gauche.

   ⚠️ Le `!important` répond au sien et ne se contourne pas : le réglage
   d'alignement de la colonne, testé, PERD l'égalité de spécificité contre la
   règle de Salient. C'est donc bien un cas « aucun réglage ne couvre ».
   Contrepartie assumée : une colonne explicitement centrée DANS une réponse
   perdrait aussi. Aucune n'existe, et une réponse n'est pas une page. */
#faq-numeria .toggle .col {
  text-align: left !important;
}

/* Marges/paddings du contenu de la réponse neutralisés en haut et en bas pour
   que les espacements (40px au-dessus, 50px en dessous) restent exacts.
   NB : Salient applique « p { padding-bottom: 1.5em } » → on retire aussi le
   padding du dernier élément, sinon ~24px s'ajoutent sous la réponse. */
#faq-numeria .inner-toggle-wrap .wpb_wrapper > *:first-child {
  margin-top: 0;
  padding-top: 0;
}
#faq-numeria .inner-toggle-wrap .wpb_wrapper > *:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
}

/* Gras des réponses en SemiBold (600) plutôt que le 700 par défaut */
#faq-numeria .inner-toggle-wrap strong,
#faq-numeria .inner-toggle-wrap b {
  font-weight: 600 !important;
}

/* Titres de groupe sur la page FAQ (« Questions générales » puis chaque
   catégorie principale). Rendus en <h2 class="faq-group-title"> intercalés entre
   les toggles dans #faq-numeria. */
#faq-numeria .faq-group-title {
  font-size: 30px;
  line-height: 1.3;
  /* Pas de couleur en dur : le noir venait du projet d'origine et écrasait la
     couleur de texte de la charte du site (ici le bleu marine). */
  margin: 0 0 40px; /* espace avant la 1re question du groupe */
}
/* Séparation nette d'avec le groupe précédent (collapse avec le margin-bottom
   40px du dernier toggle → 90px effectifs). */
#faq-numeria .faq-group-title:not(:first-child) {
  margin-top: 90px;
}
/* Décale la cible sous le header fixe quand on clique un lien du sommaire, ou
   qu'on arrive sur une question par son ancre (#faq-question-<id>). */
#faq-numeria .faq-group-title,
#faq-numeria .toggle {
  scroll-margin-top: 140px;
}
/* Titre de groupe cliquable (vers la catégorie / la page) : souligné en accent. */
#faq-numeria .faq-group-title a {
  color: inherit;
  text-decoration-line: underline;
  text-decoration-color: var(--nectar-accent-color, #ce0f54);
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
  transition: color 0.2s ease;
}
#faq-numeria .faq-group-title a:hover,
#faq-numeria .faq-group-title a:focus {
  color: var(--nectar-accent-color, #ce0f54);
}

/* Sommaire de navigation (pastilles) en haut de la page FAQ.
   .faq-nav-wrap porte l'espacement bas (constant ouvert/fermé) ; le bouton
   .faq-nav-toggle n'apparaît qu'en mobile (< 1000px) pour plier/déplier. */
.faq-nav-wrap {
  margin: 0 0 60px;
}
.faq-nav-toggle {
  display: none; /* visible uniquement < 1000px */
}
.faq-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin: 0;
}
.faq-nav__link {
  display: inline-block;
  padding: 10px 25px;
  border-radius: 50px;
  background: var(--nectar-extra-color-3, #f7f6f2);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.faq-nav__link:hover,
.faq-nav__link:focus {
  background: var(--nectar-accent-color, #ce0f54);
  color: #fff;
}

/* ============================================================
   Divers
   ============================================================ */
/* Section "Questions fréquentes" (page catégorie produit) */
#faqSection.faq-section--titre {
  margin-top: 90px; /* token « séparateur de section » : = padding-top de la section before-footer (90px) → rythme cohérent */
}
#faqSection h2 {
  text-align: center;
  margin-top: 0;
  margin-bottom: 60px; /* token « titre → contenu » : = H1 catégorie → contenu (60px) */
  text-transform: uppercase;
}

/* La FAQ est rendue dans la colonne produits (.post-area.span_9, FLOTTANTE) puis
   DÉPLACÉE EN JS juste après la .row, sous les deux colonnes, cf.
   salient_child_render_category_faq() dans le thème enfant. Elle occupe alors toute
   la largeur du .container et se centre via #faq-numeria (max-width 1120, margin
   auto). On NE fait plus déborder #faqSection (width/margin-left supprimés) : ce
   débord, combiné au fait que .post-area est un BFC flottant, faisait chevaucher la
   FAQ avec la sidebar filtres quand celle-ci était plus haute (peu / pas de produits). */

.related-posts-by-product-cat {
  margin-bottom: 100px;
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 768px) {
  #faq-numeria .toggle > .toggle-title a {
    font-size: 18px;
    gap: 12px;
    padding-bottom: 26px !important;
  }
  #faq-numeria .toggle {
    margin-bottom: 32px;
  }
  #faq-numeria .inner-toggle-wrap {
    padding-top: 32px;
    padding-bottom: 40px; /* 40 + 32 (margin .toggle) = 72px réponse ouverte → titre suivant */
  }
  #faq-numeria .faqTogglerIcon {
    width: 20px;
    padding-right: 10px;
  }
  #faqSection.faq-section--titre {
    margin-top: 60px; /* séparateur resserré (≈ before-footer tablette 60) */
  }
  #faqSection h2 {
    margin-bottom: 50px;
  }
  #faq-numeria .faq-group-title {
    font-size: 24px;
    margin-bottom: 32px;
  }
  #faq-numeria .faq-group-title:not(:first-child) {
    margin-top: 70px;
  }
  #faq-numeria .faq-group-title {
    scroll-margin-top: 100px;
  }
  .faq-nav {
    gap: 10px;
  }
  .faq-nav-wrap {
    margin-bottom: 45px;
  }
  .faq-nav__link {
    padding: 8px 18px;
    font-size: 14px;
  }
}

@media (max-width: 480px) {
  #faq-numeria .toggle > .toggle-title a {
    font-size: 16px;
    letter-spacing: 0.5px;
    padding-bottom: 22px !important;
  }
  #faq-numeria .toggle {
    margin-bottom: 28px;
  }
  #faq-numeria .inner-toggle-wrap {
    padding-top: 28px;
    padding-bottom: 36px; /* 36 + 28 (margin .toggle) = 64px réponse ouverte → titre suivant */
  }
  #faqSection.faq-section--titre {
    margin-top: 40px; /* séparateur resserré (≈ before-footer phone 30) */
  }
  #faqSection h2 {
    margin-bottom: 40px;
  }
  #faq-numeria .faq-group-title {
    font-size: 20px;
    margin-bottom: 28px;
  }
  #faq-numeria .faq-group-title:not(:first-child) {
    margin-top: 56px;
  }
  #faq-numeria .faq-group-title {
    scroll-margin-top: 90px;
  }
  .faq-nav {
    gap: 8px;
  }
  .faq-nav-wrap {
    margin-bottom: 36px;
  }
  .faq-nav__link {
    padding: 8px 16px;
    font-size: 13px;
  }
}

/* < 1000px : sommaire à 2 pastilles par ligne, ET tout le contenu FAQ aligné à
   gauche (override d'un text-align: center hérité de la colonne sur mobile ;
   confirmé : la valeur center est héritée, aucune règle directe sur les éléments,
   donc un text-align: left direct suffit). S'applique partout (page FAQ comme
   pages catégorie). */
@media (max-width: 999px) {
  .faq-nav__link {
    flex: 0 0 calc(50% - 6px); /* 2 par ligne ; un éventuel dernier seul reste centré */
    text-align: center;
  }
  #faq-numeria .toggle > .toggle-title a,
  #faq-numeria .toggle > .toggle-title a span.toggle-q-text,
  #faq-numeria .inner-toggle-wrap,
  #faq-numeria .inner-toggle-wrap .wpb_wrapper,
  #faq-numeria .faq-group-title {
    text-align: left;
  }

  /* Sommaire repliable derrière un bouton (même pattern que le tiroir de filtres
     de la page catégorie). FERMÉ : pilule blanche bordée sable, texte/chevron
     noirs. OUVERT : pilule magenta pleine, texte/chevron blancs. */
  .faq-nav-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 12px 22px;
    background: #fff;
    border: 1px solid var(--nectar-extra-color-1, #e1dab3);
    border-radius: 50px;
    cursor: pointer;
      font-size: 16px;
    font-weight: 600;
    line-height: 22px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  }
  .faq-nav-wrap.faq-nav-open .faq-nav-toggle {
    background: var(--nectar-accent-color, #ce0f54);
    border-color: var(--nectar-accent-color, #ce0f54);
    color: #fff;
  }
  .faq-nav-toggle__caret {
    flex-shrink: 0;
    width: 10px;
    height: 10px;
    margin-left: 15px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    transition: transform 0.25s ease;
  }
  .faq-nav-wrap.faq-nav-open .faq-nav-toggle__caret {
    transform: translateY(2px) rotate(-135deg);
  }
  /* Pastilles repliées par défaut, dépliées au clic. */
  .faq-nav {
    display: none;
  }
  .faq-nav-wrap.faq-nav-open .faq-nav {
    display: flex;
    margin-top: 16px; /* bouton → pastilles */
  }
}

/* < 690px : sommaire à 1 pastille par ligne. */
@media (max-width: 690px) {
  .faq-nav__link {
    flex: 0 0 100%;
  }
}