/* ==========================================================================
   Thirdslot — accordéon des FAQ (page /faq/ et page /contact/)
   Maquettes 2026-10-29 Thirdslot-faqs / -contact : cadre lavande 878.9 px (12 px de marge),
   questions blanches 855.2 px, 91.3 px fermées, 8.8 px entre deux. Logique : js/faq-acc.js
   (une seule question ouverte par cadre .fq-acc).
   ========================================================================== */

.fq-acc { padding: 12px; border-radius: 18.86px; background: #e7e7f2; }
.fq-item { border-radius: 15.65px; background: #fff; }
.fq-item + .fq-item { margin-top: 8.8px; }
.fq-item h3 { margin: 0; font: inherit; }
.fq-q {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  width: 100%; padding: 32.75px 35.5px 29.55px 35.6px;
  text-align: left; font-family: var(--font-head); font-weight: 500; font-size: 24px; line-height: 29px; color: #15181c;
  transition: padding 0.35s cubic-bezier(0.2, 0.7, 0.2, 1), color 0.2s ease;
}
.fq-q:hover { color: #4a46d3; }
.fq-q:focus-visible { outline: 2px solid #4a46d3; outline-offset: -2px; border-radius: 15.65px; }
/* question ouverte : remontée de 8.75 px, la réponse suit (maquette) */
.fq-item.is-open .fq-q { padding-top: 24px; padding-bottom: 0; }

/* cercle + / − (36.8 px, trait 1 px ; cercle à 20 % fermé) */
.fq-q .ic { flex: none; position: relative; width: 36.8px; height: 36.8px; margin: -3.9px 0; /* plus haut que la ligne (29 px) : ne doit pas grandir la question */ border-radius: 50%; border: 1px solid rgba(36, 39, 52, 0.2); transition: border-color 0.25s ease, transform 0.35s ease; }
.fq-q .ic::before, .fq-q .ic::after { content: ""; position: absolute; left: 50%; top: 50%; width: 11.2px; height: 1.5px; margin: -0.75px 0 0 -5.6px; background: #242734; transition: transform 0.3s ease, opacity 0.3s ease; }
.fq-q .ic::after { transform: rotate(90deg); }
.fq-item.is-open .fq-q .ic { border-color: #242734; }
.fq-item.is-open .fq-q .ic::after { transform: rotate(0deg); opacity: 0; }

.fq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.35s cubic-bezier(0.2, 0.7, 0.2, 1); }
.fq-item.is-open .fq-a { grid-template-rows: 1fr; }
.fq-a > div { overflow: hidden; }
.fq-a p { margin: 0; padding: 30.4px 41.6px 28px 35.6px; /* largeur de texte 778 px, comme les retours à la ligne de la maquette */ font-size: 16px; line-height: 26px; color: #424447; opacity: 0; transition: opacity 0.25s ease; }
.fq-item.is-open .fq-a p { opacity: 1; transition-delay: 0.1s; }
.fq-a a { color: #4a46d3; text-decoration: underline; text-underline-offset: 2px; }

@media (max-width: 699px) {
  .fq-acc { padding: 8px; border-radius: 16px; }
  .fq-item { border-radius: 12px; }
  .fq-q { gap: 16px; padding: 22px 20px 20px; font-size: 19px; line-height: 25px; }
  .fq-item.is-open .fq-q { padding-top: 20px; }
  .fq-q .ic { width: 32px; height: 32px; margin: -3.5px 0; }
  .fq-a p { padding: 16px 20px 22px; font-size: 15px; line-height: 24px; }
}