/* ============================================================
   FAQ — accordéon natif <details>, aucun JavaScript.
   Les réponses sont dans le HTML source, donc lisibles par les
   crawlers AI même repliées. Doublée d'un JSON-LD FAQPage.
   ============================================================ */

  .faq {
    position: relative; isolation: isolate;
    /* Elle porte un fond : elle referme son propre espace en bas. */
    padding-bottom: var(--section-gap);
  }

  .faq__inner {
    position: relative; z-index: 1;
    display: grid; gap: clamp(2rem, 4vw, 4rem);
    grid-template-columns: minmax(0, 32%) minmax(0, 1fr);
    align-items: start;
  }

  /* La colonne de gauche est alignée à gauche : le kicker suit,
     au lieu d'hériter du centrage commun aux têtes de section. */
  .faq__aside .kicker { margin-inline: 0; }
  .faq__title { margin-bottom: var(--space-xl); }
  .faq__photo {
    width: 100%; max-width: 21rem; height: auto;
    border-radius: var(--radius-panel);
    box-shadow: 0 2px 8px rgba(10, 4, 6, 0.06), 0 22px 50px rgba(55, 12, 130, 0.14);
  }

  /* ---------- Accordéon ---------- */
  .faq__item { border-bottom: 1px solid var(--hairline); }
  .faq__item:first-child { border-top: 1px solid var(--hairline); }

  .faq__q {
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg);
    padding: 1.35rem 0; cursor: pointer; list-style: none;
    font-family: var(--font-display); font-weight: 500;
    font-size: clamp(1.0625rem, 0.95rem + 0.4vw, 1.25rem);
    line-height: 1.35; color: var(--text-primary);
    transition: color 0.15s ease;
  }
  .faq__q::-webkit-details-marker { display: none; }
  .faq__q:hover { color: var(--k-purple); }

  /* Le signe + devient − à l'ouverture, sans changer de balise. */
  .faq__sign { position: relative; flex: none; width: 1.1rem; height: 1.1rem; }
  .faq__sign::before,
  .faq__sign::after {
    content: ''; position: absolute; inset: 50% 0 auto 0;
    height: 1.6px; background: var(--text-primary); border-radius: 2px;
    translate: 0 -50%; transition: transform 0.2s ease, background-color 0.15s ease;
  }
  .faq__sign::after { transform: rotate(90deg); }
  .faq__item[open] .faq__sign::after { transform: rotate(0deg); }
  .faq__item[open] .faq__sign::before,
  .faq__item[open] .faq__sign::after { background: var(--k-purple); }
  .faq__item[open] > .faq__q { color: var(--k-purple); }

  .faq__a { padding: 0 0 1.45rem; max-width: 62ch; }
  .faq__a p {
    margin: 0; color: var(--text-muted);
    font-size: 1rem; line-height: 1.7;
  }

  @media (max-width: 900px) {
    .faq__inner { grid-template-columns: 1fr; }
    /* En une colonne, la photo prend toute la largeur et se recadre,
       au lieu de laisser un bloc vide à côté d'elle. */
    .faq__photo {
      max-width: none; height: 12rem; object-fit: cover; object-position: center 30%;
      margin-bottom: var(--space-lg);
    }
  }