/* ================================================================
   FAQ — "La Notice, au cas où"
   Section accordéon pixel-art 3D

   Chaque carte FAQ est composée de :
     [strip-outer 4px] [strip-mid 4px] [strip-inner 4px]
     [center : top-4px / body / depth-white-4px / depth-shadow-16px / depth-dark-4px]
     [strip-inner 4px] [strip-mid 4px] [strip-outer 4px]

   Les strips latéraux utilisent un linear-gradient avec calc(100% - Npx)
   pour que la profondeur 3D (blanc → violet moyen → violet foncé) soit
   toujours positionnée en bas, quelle que soit la hauteur de la carte.

   Animation accordéon : grid-template-rows 0fr → 1fr
   (pas de JS de calcul de hauteur nécessaire)
================================================================ */

/* ── Variables locales ─────────────────────────────────────────── */
.faq {
  --faq-card-bg:   #f2ecff;   /* fond carte lavande */
  --faq-purple:    #624c96;   /* bordure pixel foncé */
  --faq-purple-md: #9d8ac8;   /* ombre 3D moyen */
  --faq-text:      #1b1564;   /* texte carte */
  --faq-teal:      #15ad94;   /* accent teal (focus outline) */
  --ch-accent:     #7b3dee;   /* accent heading — même couleur que blog */
}


/* ════════════════════════════════════════════════════════════════
   SECTION
════════════════════════════════════════════════════════════════ */

.faq {
  position: relative;
  overflow: hidden;
}



/* ════════════════════════════════════════════════════════════════
   LISTE DES ITEMS
════════════════════════════════════════════════════════════════ */

.faq__list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}


/* ════════════════════════════════════════════════════════════════
   CARTE PIXEL-ART 3D
   Structure flex horizontale :
     [edge-left] [center] [edge-right]
════════════════════════════════════════════════════════════════ */

.faq__card {
  display: flex;
  align-items: stretch;
  box-shadow: 0px 8px 24px 0px rgba(98, 76, 150, 0.24);
}

/* ── Bord latéral (wrapper des 3 strips) ───────────────────────── */
.faq__edge {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  flex-shrink: 0;
}

/* ── Strip OUTER : 4px — coin pixel (4px de marge haut/bas) ─────── */
/*   Reproduit l'effet xleft du Figma : transparent aux coins          */
.faq__strip-outer {
  width: 4px;
  flex-shrink: 0;
  align-self: stretch;
  background: linear-gradient(
    to bottom,
    transparent                            0px   4px,   /* coin haut */
    var(--faq-purple)                      4px   calc(100% - 4px),
    transparent                            calc(100% - 4px) 100%  /* coin bas */
  );
}

/* ── Strip MID : 4px — 8px coins + profondeur 3D ─────────────────── */
.faq__strip-mid {
  width: 4px;
  flex-shrink: 0;
  align-self: stretch;
  background: linear-gradient(
    to bottom,
    var(--faq-purple)                      0px   8px,                /* 8px coin haut */
    var(--faq-card-bg)                     8px   calc(100% - 28px),  /* lavande (stretch) */
    #ffffff                                calc(100% - 28px) calc(100% - 24px), /* 4px blanc */
    var(--faq-purple-md)                   calc(100% - 24px) calc(100% - 8px),  /* 16px ombre */
    var(--faq-purple)                      calc(100% - 8px) 100%     /* 8px coin bas */
  );
}

/* ── Strip INNER : 4px — 4px coins + profondeur 3D ──────────────── */
.faq__strip-inner {
  width: 4px;
  flex-shrink: 0;
  align-self: stretch;
  background: linear-gradient(
    to bottom,
    var(--faq-purple)                      0px   4px,                /* 4px coin haut */
    var(--faq-card-bg)                     4px   calc(100% - 24px),  /* lavande (stretch) */
    #ffffff                                calc(100% - 24px) calc(100% - 20px), /* 4px blanc */
    var(--faq-purple-md)                   calc(100% - 20px) calc(100% - 4px),  /* 16px ombre */
    var(--faq-purple)                      calc(100% - 4px) 100%     /* 4px coin bas */
  );
}

/* ── Centre ──────────────────────────────────────────────────────── */
.faq__center {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* Bordure top */
.faq__line-top {
  height: 4px;
  background: var(--faq-purple);
  flex-shrink: 0;
}

/* Corps (fond lavande) */
.faq__body {
  background: var(--faq-card-bg);
  flex: 1;
}

/* Profondeur 3D — bottom */
.faq__depth-white  { height: 4px;  background: #ffffff;              flex-shrink: 0; }
.faq__depth-shadow { height: 16px; background: var(--faq-purple-md); flex-shrink: 0; }
.faq__depth-dark   { height: 4px;  background: var(--faq-purple);    flex-shrink: 0; }


/* ════════════════════════════════════════════════════════════════
   BOUTON ACCORDÉON
════════════════════════════════════════════════════════════════ */

.faq__trigger {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 16px 8px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  -webkit-tap-highlight-color: transparent;
}

.faq__trigger:focus-visible {
  outline: 2px solid var(--faq-teal);
  outline-offset: -2px;
}

/* Texte de la question */
.faq__q-text {
  flex: 1;
  font-family: var(--font-body);
  font-size: var(--text-xl);          /* 20px */
  font-weight: var(--fw-bold);
  color: var(--faq-text);
  line-height: 1.35;
}


/* ════════════════════════════════════════════════════════════════
   ICÔNE +/−
   ::before = barre horizontale (toujours visible)
   ::after  = barre verticale (visible quand fermé, tourne à l'ouverture)
════════════════════════════════════════════════════════════════ */

.faq__icon {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  position: relative;
}

.faq__icon::before,
.faq__icon::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  background: var(--faq-text);
  transition: transform 0.35s ease, opacity 0.3s ease;
}

/* Barre horizontale */
.faq__icon::before {
  width: 20px;
  height: 2px;
  transform: translate(-50%, -50%);
}

/* Barre verticale */
.faq__icon::after {
  width: 2px;
  height: 20px;
  transform: translate(-50%, -50%) rotate(0deg) scaleY(1);
}

/* État OUVERT → barre verticale s'efface (rotation 90° + opacity 0) */
.faq__trigger[aria-expanded="true"] .faq__icon::after {
  transform: translate(-50%, -50%) rotate(90deg) scaleY(0);
  opacity: 0;
}


/* ════════════════════════════════════════════════════════════════
   ZONE RÉPONSE — Animation accordéon fluide
   Technique : grid-template-rows 0fr → 1fr
   (aucun calcul JS de hauteur nécessaire)
════════════════════════════════════════════════════════════════ */

.faq__answer-wrap {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Adjacent sibling : quand le trigger est ouvert */
.faq__trigger[aria-expanded="true"] + .faq__answer-wrap {
  grid-template-rows: 1fr;
}

/* Overflow caché pour l'animation (enfant direct du grid) */
.faq__answer {
  overflow: hidden;
}

/* Contenu de la réponse */
.faq__answer-inner {
  padding: 0 8px 20px;
  font-family: 'Inter', var(--font-body);
  font-size: var(--text-lg);          /* 18px */
  font-weight: var(--fw-regular);
  color: var(--faq-text);
  line-height: 1.5;
}


/* ════════════════════════════════════════════════════════════════
   CTA — "Toutes les questions"
════════════════════════════════════════════════════════════════ */

.faq__cta {
  display: flex;
  justify-content: center;
}


/* ════════════════════════════════════════════════════════════════
   RESPONSIVE
════════════════════════════════════════════════════════════════ */

/* ── Tablette ≤ 1024px ─────────────────────────────────────── */
@media (max-width: 1024px) {
  .faq__list {
    max-width: 100%;
  }
}

/* ── Mobile ≤ 768px ─────────────────────────────────────────── */
@media (max-width: 768px) {
  .faq__trigger {
    padding: 12px 8px;
  }

  .faq__q-text {
    font-size: var(--text-md);        /* 16px */
  }

  .faq__answer-inner {
    font-size: var(--text-md);
  }
}

/* ── Petit mobile ≤ 480px ─────────────────────────────────── */
@media (max-width: 480px) {
  .faq__q-text {
    font-size: 15px;
  }
}