/* Accordéons de la FAQ — désormais rendus dans la section #faq de
   pages/contact.njk, après la fusion des pages FAQ et Contact.

   Ce fichier ne contient PLUS que la recette d'accordéon. Tout ce qui
   relevait de la mise en page de l'ancienne page /faqs/ a été retiré avec
   elle : .faq-hero, .faq-intro__sticky, .faq-tabs / .faq-tab (les filtres
   par catégorie, supprimés — sept questions n'en ont pas besoin),
   .faq-category et son <h2> répété, ainsi que .faq-illustration*, qui
   vivent maintenant dans contact-page.css avec le reste de la nouvelle
   page.

   La mise en page gauche/droite vient de page-split.css comme sur toutes
   les autres pages redessinées ; ce fichier ne déclare aucune grille. */

.faq-wrap {
  width: 100%;
}

/* Le déclencheur est un <button> dans un <h3> (partials/faq.njk) : le
   titre porte la structure du document, le bouton l'interaction. Le <h3>
   ne doit donc apporter aucune marge ni taille propre. */
.faq-item__heading {
  margin: 0;
  font: inherit;
  color: inherit;
}

.faq-item__question {
  min-width: 0;
}

.faq-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* ---- Cards — dark glass violet, closed state -----------------------------
   Gradient anthracite/aubergine (not the plain flat #22222c used before),
   a real (if subtle) violet border and deep shadow so it reads as part of
   this site's own DA rather than a generic grey utility panel. */
.faq-item {
  background: linear-gradient(155deg, #251d34 0%, #1d1829 100%);
  border: 1px solid rgba(168, 102, 240, 0.16);
  border-radius: 16px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.28);
  overflow: hidden;
  transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.faq-item:hover {
  border-color: rgba(168, 102, 240, 0.3);
  background: linear-gradient(155deg, #2a2039 0%, #201a2e 100%);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.32), 0 0 20px rgba(99, 102, 241, 0.1);
}

/* Open state — a clearly more present (but not neon) violet border plus a
   thin gradient top edge, distinct from plain hover. */
.faq-item.is-open {
  border-color: rgba(184, 107, 248, 0.45);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.32), 0 0 0 1px rgba(184, 107, 248, 0.12);
}

/* Padding trimmed from 18px/20px — explicit feedback that the closed
   rows didn't need to be this tall ("pas besoin de faire des lignes
   aussi longues"), to fit more questions in view at once. The type size
   itself is deliberately back to its original 16px/600 (a later pass had
   also shrunk it to 15px chasing the same "shorter rows" goal, which
   wasn't asked for and cost the questions their intended presence —
   "raccourcir les bandeaux, mais pas réduire leur typographie"). Padding
   still clears the 44px touch-target floor used elsewhere on the site
   (14*2 + ~16px line-height ≈ 44px). */
.faq-item__trigger {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px 18px;
  font-family: var(--font-satoshi);
  font-weight: 600;
  font-size: 16px;
  color: rgba(255, 255, 255, 0.92);
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
  transition: background 0.18s ease;
}

.faq-item__trigger:hover {
  background: rgba(184, 107, 248, 0.06);
}

/* The open question sits on a very slightly lighter surface than the rest
   of the card, per explicit direction — a subtle wash, not a hard color
   change. */
.faq-item.is-open .faq-item__trigger {
  background: rgba(184, 107, 248, 0.08);
}

.faq-item__trigger:focus-visible {
  outline: 2px solid #b86bf8;
  outline-offset: -2px;
}

/* "+" / "−" morph — light violet now (was a flatter #b86bf8 on a grey
   card; kept the same hue since it's already the site's own violet, just
   confirming it reads clearly against the new darker/richer card
   background too). Centered, fixed size, never shifts on open/close —
   only the vertical bar's own scale animates away. */
.faq-item__icon {
  position: relative;
  width: 14px;
  height: 14px;
  margin-left: auto;
  flex-shrink: 0;
}

.faq-item__icon span {
  position: absolute;
  background: #c893fa;
  border-radius: 1px;
  transition: transform 0.2s ease;
}

.faq-item__icon span:first-child {
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
  transform: translateY(-50%);
}

.faq-item__icon span:last-child {
  top: 0;
  left: 50%;
  width: 2px;
  height: 100%;
  transform: translateX(-50%) scaleY(1);
}

.faq-item.is-open .faq-item__icon span:last-child {
  transform: translateX(-50%) scaleY(0);
}

/* Ouverture et fermeture douces via une piste de grille animée
   (0fr -> 1fr) plutôt que le saut instantané de <details> : ça marche pour
   n'importe quelle hauteur de contenu sans que le JS mesure un
   scrollHeight. Chaque accordéon est indépendant — plusieurs peuvent
   rester ouverts (js/faq-accordion.js ne bascule que sa propre classe). */
.faq-item__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease;
}

.faq-item.is-open .faq-item__panel {
  grid-template-rows: 1fr;
}

.faq-item__panel-inner {
  /* Deliberately zero padding of its own — this is the grid item being
     collapsed to 0fr, and padding on the collapsing item itself defeats the
     collapse (padding is always part of the box, even with overflow:hidden
     and content shrunk to nothing). The visual padding lives on
     .faq-answer__body instead, one level in, where it can't interfere —
     confirming there's genuinely zero padding leaking through while
     closed. */
  overflow: hidden;
}

/* Answer surface — a touch darker/more violet than the question above it
   (subtle separation, not a hard line) plus REAL symmetric padding: this
   used to be `padding: 0 20px 20px` (zero on top), which is exactly why
   the first line of every answer sat glued to the question above it while
   the bottom had real breathing room — confirmed directly, not a rendering
   illusion. Now 17px top AND bottom, same 20px sides as the question's own
   horizontal padding so both align on the same left/right edge. */
.faq-answer__body {
  padding: 17px 20px;
  background: rgba(10, 6, 16, 0.35);
  font-family: var(--font-satoshi);
  font-weight: 300;
  font-size: 15px;
  line-height: 1.7;
  color: #d2cadc;
}

.faq-answer__body p {
  margin: 0;
}

.faq-answer__list {
  margin: 8px 0 0;
  padding-left: 20px;
}

.faq-answer__link {
  text-decoration: underline;
  text-underline-offset: 3px;
  color: #93c5fd;
}

.faq-answer__link:focus-visible {
  outline: 2px solid #93c5fd;
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .faq-item,
  .faq-item__trigger,
  .faq-item__icon span,
  /* Le panneau aussi : sans lui, l'ouverture restait animée sur la seule
     propriété qui compte vraiment ici, la hauteur. L'ouverture devient
     instantanée — elle reste évidemment fonctionnelle, c'est une classe
     qui bascule, pas l'animation qui révèle le contenu. */
  .faq-item__panel {
    transition: none;
  }

  .faq-item:hover {
    transform: none;
  }
}