/* © Camarade Agency (camarade.agency) */
/* -------------------------------------------------------------------------- */
/* FAQ — 2 colonnes : navigation (thèmes) / accordéon                        */
/* -------------------------------------------------------------------------- */
.faq-widget {
  display:grid;
  grid-template-columns: minmax(max-content, 280px) 1fr;
  gap:60px;
  align-items: start;
  scroll-margin-top: calc(var(--header-height-shrink, 50px) + 20px);
}
.faq-thema-block {
  display: block;
}
@media (max-width: 767px) {
  .faq-widget {
    grid-template-columns: 1fr;
  }
}
.faq-widget-nav {
  position:sticky;
  top:65px;
}
.faq-nav {
  display: flex;
  flex-direction: column;
  gap:15px;
}
.faq-nav-title {
  font-size: .8em !important;
  text-transform: uppercase;
  font-weight: 900;
  color: var(--e-global-color-text);
  font-family: var(--e-global-typography-primary-font-family), Sans-serif;
  margin: 0 0 7.5px 0;
}
.faq-toggle-themas {
  display:flex;
  flex-direction:column;
  gap:15px;
  list-style:none;
  margin:0;
  padding:0;
  width:100%;
}
.faq-toggle-thema {
  display: flex;
  align-items: center;
  width: 100%;
  padding:0;
  overflow: hidden;
  font-weight:900;
  cursor: pointer;
  gap:5px;
  transition: box-shadow .15s ease, background-color .15s ease, border-color .15s ease;
}
.faq-toggle-thema i {
  display:none;
}
.faq-toggle-thema.is-active {
  color: var(--e-global-color-primary);
}
.faq-toggle-thema.is-active i {
  display:inline-block;
}
.faq-toggle-thema:hover {
  color: var(--e-global-color-primary);
}
.faq-toggle-thema:focus-visible {
  outline: 2px solid var(--e-global-color-primary);
  outline-offset: 2px;
}
.faq-widget-results {
  display: flex;
  flex-direction: column;
  gap:12px;
}
/* Grid view : 3-column masonry via CSS multi-column, same technique as
   .glossary-thema-block (assets/glossary.css) — items pack top-to-bottom
   per column instead of a fixed-row grid, so uneven answer lengths don't
   leave gaps. Toggled by adding/removing this class on .faq-widget-results,
   see assets/faq.js. */
.faq-widget-results.faq-view-grid {
  display: block;
  column-count: 3;
  column-gap:30px;
}
.faq-widget-results.faq-view-grid .faq-item {
  margin-bottom:30px;
  break-inside: avoid;
}
@media (max-width: 1024px) {
  .faq-widget-results.faq-view-grid {
    column-count: 2;
  }
}
/* Below 767px the Liste/Grille toggle is hidden entirely (see .faq-view-btn
   mobile rule further down) and list is the only layout used — override the
   grid multi-column rules regardless of the .faq-view-grid class, since PHP
   still renders it by default for desktop (see FAQ_render_toolbar() in
   lib/faq.php). */
@media (max-width: 767px) {
  .faq-widget-results.faq-view-grid {
    display: flex;
    flex-direction: column;
    column-count: unset;
    column-gap: unset;
    gap:12px;
  }
  .faq-widget-results.faq-view-grid .faq-item {
    margin-bottom: 0;
    break-inside: auto;
  }
}
.faq-results-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap:30px;
}
.faq-view-toggle {
  display: inline-flex;
}
button.faq-toolbar-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap:5px;
  margin-left: -1px;
  background-color: var(--e-global-color-secondary);
  border:none;
  padding:15px;
  cursor: pointer;
  color:#fff;
  font-size: .9em;
  font-weight: bold;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.faq-toolbar-btn:first-child {
  margin-left: 0;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}
.faq-toolbar-btn:last-child {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}
.faq-view-btn.is-active {
  z-index: 1;
  background-color: var(--e-global-color-primary);
  border-color: var(--e-global-color-primary);
  color: #fff;
}
.faq-toolbar-btn:hover {
  z-index: 1;
  box-shadow: 0px 0px 0px 5px rgba(0,0,0,0.2);
}
.faq-view-btn.is-active:hover {
  box-shadow: 0px 0px 0px 5px color-mix(in srgb, var(--e-global-color-primary) 20%, transparent);
}
.faq-toolbar-btn:focus-visible {
  z-index: 1;
  outline: 2px solid var(--e-global-color-primary);
  outline-offset: 2px;
}
/* Mobile : list is the only layout (see the .faq-view-grid override above),
   so the Grille/Liste toggle has nothing left to switch — hidden entirely.
   "Tout déplier / Tout replier" stays, and gets its own full rounded corners
   since it's no longer part of a joined group (its left edge was borrowed
   from :first-child, which is now hidden). */
@media (max-width: 767px) {
  button.faq-view-btn {
    display: none;
  }
  button.faq-toggle-all {
    margin-left: 0;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
  }
}
/* Nav column context (left sidebar, see faq-nav-options in FAQ_render_nav_layout())
   — narrow column, so the toolbar stacks vertically instead of the wide
   space-between row used in the results header (shortcode / no-thema case). */
.faq-nav-options .faq-results-toolbar {
  flex-direction: column;
  align-items: stretch;
}
.faq-nav-options .faq-view-toggle {
  width: 100%;
}
.faq-nav-options .faq-toolbar-btn {
  flex: 1;
}
.faq-nav-options .faq-nav-title { display:none }
.faq-no-results {
  display: none;
  font-style: italic;
  color: color-mix(in srgb, var(--e-global-color-text) 65%, transparent);
}
.faq-item {
  border: 1px solid #C8D5DC;
  scroll-margin-top: calc(var(--header-height-shrink, 50px) + 20px);
  border-radius:4px;
  transition: border-color .3s ease, box-shadow .3s ease;
}
/* Applied by assets/faq.js when the URL points directly at one question
   (#faq-{slug}), so the reader can actually see which item they were sent
   to, not just find it already open like every other item by default. */
.faq-item.is-target {
  border-color: var(--e-global-color-primary);
  box-shadow: 0 0 0 10px color-mix(in srgb, var(--e-global-color-primary) 25%, transparent);
}
.faq-question {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 0;
  padding: 15px 20px;
  cursor: pointer;
  color: var(--e-global-color-text);
  font-weight: 900;
}
.faq-question:focus-visible {
  outline: 2px solid var(--e-global-color-primary);
  outline-offset: -2px;
}
.faq-question-actions {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 10px;
  margin-left: 15px;
}
.faq-toggle {
  flex-shrink: 0;
  width: 15px;
  height: 15px;
  position: relative;
}
.faq-toggle::before,
.faq-toggle::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  background: currentColor;
  transform: translate(-50%, -50%);
  transition: transform .25s ease, opacity .25s ease;
}
.faq-toggle::before {
  width: 15px;
  height: 2px;
}
.faq-toggle::after {
  width: 2px;
  height: 15px;
}
.faq-item.faq-open .faq-toggle::after {
  transform: translate(-50%, -50%) rotate(90deg);
  opacity: 0;
}
/* max-height is set in JS (assets/faq.js) to the answer's real scrollHeight
   on open, and back to 0 on close — this guarantees a full, exact close
   regardless of content length, unlike a fixed oversized max-height or the
   grid-template-rows 0fr/1fr trick (both left a visible sliver in testing). */
.faq-answer {
  overflow: hidden;
  max-height: 0;
  transition: max-height .3s ease;
}
.faq-answer-inner {
  box-sizing: border-box;
  padding: 0 20px 20px 20px;
  color: var(--e-global-color-text);
  line-height: var(--e-global-typography-text-line-height);
}
.faq-answer-inner > *:last-child {
  margin-bottom: 0;
  margin-block-end: 0;
}
/* Mobile : nav toggle + dépliable en flux normal */
.faq-nav-toggle {
  display: none;
}
@media (max-width: 767px) {
  .faq-nav-toggle {
    display: flex;
    align-items: center;
    gap:10px;
    background-color: #000;
    border: 1px solid #000;
    color: #fff;
    padding: 10px 15px;
    cursor: pointer;
    font-family: var(--e-global-typography-primary-font-family), Sans-serif;
    font-weight: bold;
    font-size:1em;
    text-transform:uppercase;
    transition: box-shadow .15s ease, background-color .15s ease, border-color .15s ease;
  }
  .faq-widget-nav.is-open .faq-nav-toggle {
    border-color: var(--e-global-color-primary);
    background-color: var(--e-global-color-primary);
  }
  .faq-nav-toggle:hover {
    box-shadow: 0px 0px 0px 5px rgba(0,0,0,0.2);
  }
  .faq-widget-nav.is-open .faq-nav-toggle:hover {
    box-shadow: 0px 0px 0px 5px color-mix(in srgb, var(--e-global-color-primary) 20%, transparent);
  }
  .faq-widget-nav {
    position:relative;
    top:0;
  }
  .faq-widget-nav .faq-nav {
    display: none;
  }
  .faq-widget-nav.is-open {
    border:1px solid #C8D5DC;
  }
  .faq-widget-nav.is-open .faq-nav {
    border-top:1px solid #C8D5DC;
    display: flex;
    padding:15px;
  }
}